I have a GeoJson from brazil which is a more detailed version of the official HighMaps Brazil map. In this JSON I have the states divided into its mesoregions.
When I tried to draw a point on top of this GeoJson I got the message telling me that this functionality was only supported with official highmaps maps. Reading the documentation I found out that I should create an object hc-transform on my geojson. I thought it would make sense to use the same hc-transform used by the official HighMaps Brazil map, and when I did, it kinda works ok: It gives me the the same point with fromLatLonToPoint() method but then when I use the method toPixels() to get the "canvas" position (and draw something on top of it) it gives me different values.
The code Im using is this (it works fine for brazil official highmaps):
let point = chart.fromLatLonToPoint({lat: n.lat, lon: n.long});
let x = chart.xAxis[0].toPixels(point.x, true);
let y = chart.yAxis[0].toPixels(point.y, true);
// Draw the div / point / whatever on the (x, y) position
The GeoJson I am talking about you can find here: https://github.com/Menighin/HighmapsExperiment/blob/master/geo/mesorregiao.json
Checking Highmaps oficial Brazilian map I can see that each polygon also has some highcharts attributes (hc-middle-x, hc-middle-y, etc). Does that make any difference? If not, what am I doing wrong?
EDIT
Turns out my hc-transform doesn't seem to be right as we can see on this fiddle:
http://jsfiddle.net/0vm8a4x3/
If we uncoment the line 8, we can see that the city Belo Horizonte, is not plotted on the right position on the Mesoregion map.
So, how can I get the hc-transform right?
Related
Im drawing a simple map in spotfire using US cities as geo location. The values I want to show on the map is the location of 'specific gas stations' by the geo code.
For larger cities there are many but im only able to get one 'shape'. I can work on the coloring or size. But im interested to get all 5 dots next to each other or a call-out highlighting there are five..?
Is there a way to show all values, or does spotfire need to combine them?
I know I can get more details with lat/long but that is not an option.
are your shapes literally being combined? that shouldn't happen unless you are doing a "Marker by: City". double check this setting.
if they aren't being literally combined into one point on the map, but instead they are sitting on top of each other, you could adjust the jitter settings on your Marker Layer (check the Appearance page in the Properties dialog) to spread them out a little bit.
if that doesn't suit your needs, and the former case is true, please update your question with some screencaps of your map chart's configuration and I'll see if I can provide a better answer :)
Working with highmaps from Highcharts. I'm displaying a world map and trying to display some states like capitals using mappoint serie.
To display the states I need the lat/lon or the x/y coordinates. Is there any way to get the position based on the hc-key or the name of the state ?
I want to convert (google sourced) longitude and latitude coordinates to x and y to place points on a SVG map
I can get the longitude converted to X but I can't nail latitude.
http://jsfiddle.net/chrisloughnane/an3BZ/17/
red dots = place holders
green dot = calculated position from longitude/latitude
I have read so much about Mercator projections and other projection systems API's I am now completely confused. I also followed Proj4JS library threads but couldn't find an example that was close to my task.
I attempted to emulate this solution, unfortunately I got something wrong.
Could someone please have a look at my jsfiddle and see if it's an obvious mistake.
The second test function secondconvert(latitude, longitude) (bottom of javascript pane) provides me with a reasonably accurate x coordinate i.e. if I manually enter the y coordinate b.ylat change to 265 it covers my left red dot place holder nearly perfectly.
I think I'm close, any help would be really appreciated.
tia.
Original SVG from here.
In your calculations of lattest and mapOffsetY inside secondconvert() you're using variable width where Raphael's solution uses worldMapWidth. Fixing that you get closer to the expected result, though still not precise.
I have a set of locations that I want to bring up, individually through ajax calls, and some of them aren't within the current bounds of the map. Is there a way to move the map so the marker is in view?
I don't need it to be in the center, just as long as it's in view.
I figured it out after some research. I'd still be curious to know how to NOT have to center if the marker is visible on the map.
var centerpoint = new google.maps.LatLng(lat_value, long_value);
Gmaps4Rails.map.setCenter(centerpoint)
edit: Found answer to how to not center map every time.
Pseudo code version.
1. Get values from Gmaps4Rails.map.getBounds().
2. Use resulting ta and la values to see if the marker is within those values.
3. If marker is outside of those values, center map, otherwise place marker without centering map.
Thanks guys. I should post more questions. It really helps me to think through my problems.
Jim's answer was probably right when he posted it. But as of now the right way to do it would be :
var centerpoint = new google.maps.LatLng(lat_value, long_value);
Gmaps.map.map.setCenter(centerpoint);
What you expect is automatically done as long as you pass the auto_adjust setting to true. See here.
Then, you should just use the js function Gmaps4Rails.add_markers described here.
i'm trying to geocode values and map them to a satellite image of a city (new york city to be precise). i've successfully done this before using a geospatial image of the world, and then mapped/scaled longitude and latitude values from the max lat/lng range (-90,90 & -180,180) to the max width and hight of the image (0,width & 0,height) which worked perfectly. i'm a bit confused how to do this to just a map of a city.
currently, i have a hi-res satellite image of new york city, and have positioned it so that it perfectly aligns with the map of new york city on Google Maps (i'm using their API to geocode my locations). i've attempted to get the top/bottom latitude values and left/right longitude values of the satellite image i'm using, and tried to scale any longitude/latitude values that needed to be mapped onto the image within this range. however, this didn't seem to work. is there another method i could use so that it would be possible to dynamically map lat/lng coordinates onto a satellite image of new york city?
this is essentially the image that i would like to map onto:
thanks.
If you know the image size and its geographic extent (lat/lon values), you can use something like:
x = imageWidth * ( pointLon - ImageExtentLeft ) / (ImageExtentRight - ImageExtentLeft);
y = imageHeight * ( 1 - ( pointLat - ImageExtentBottom) / (ImageExtentTop - mImageExtentBottom));
By the way, if you are using the Google Maps API to geocode your locations, why don't you use its functions to add markers directly to your map? (Maybe I didn't completely understand your case)
var latlng = new GLatLng(pointLat, pointLon);
map.addOverlay(new GMarker(latlng));
Hope it helps
You are engaging in a process called image registration or map rectification. There is a whole set of remote sensing dedicated to the equations for doing this.
Perhaps you can just start with this web site - it should basically do what you need
http://labs.metacarta.com/rectifier/ (dead link)
if not then maybe look at tools like QGIS or GRASS. If you have money and time you can also use ESRI ArcGIS desktop or ERDAS Imagine or IDRISI.