mcarmona
Posts: 3
Joined: Fri May 06, 2016 4:47 pm

Working with FeatureCollection

Hello, thanks for allowing to post

The problem i have, i almost solved, i guess i am ready but always i get a back-draw, but i see other developer have could do it.

I made the custom map, geometry as follow:


Code: Select all

 var mapa3 = {
 			"type": "FeatureCollection",
 			"crs": {
 				"type": "Name",
 				"properties": {
 					"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
 				}
 			},
 			"hc-transform": {
 		                        "default": {
 					"crs": "+proj=utm +zone=19 +datum=WGS84 +units=m +no_defs", 							
 					"jsonres": 15.5
 		                        }
 			},
 		  "type": "FeatureCollection",
 		  "features": [
 		    {
 		      "type": "Feature",
 		      "properties": {
 		        "Name": "NHS Eastern Cheshire",
 		      },
 		      "geometry": {
 		        "type": "MultiPolygon",
 		        "coordinates": [
 		          [
 		            [
	 		            [
	 		              -71.12995147705077,
	 		              -30.27226265850092
	 		            ],
	 		            [
	 		              -71.12995147705077,
	 		              -30.22199183320206
	 		            ],
	 		            [
	 		              -71.04721069335938,
	 		              -30.22199183320206
	 		            ],
	 		            [
	 		              -71.04721069335938,
	 		              -30.27226265850092
	 		            ],
	 		            [
	 		              -71.12995147705077,
	 		              -30.27226265850092
 		            ]		       
 		            ]
 		          ]
 		        ]
 		      }
 		    }
 		  ]
 		};
That GeoJson, fits well, in http://geojsonlint.com/, showin the boundaries i need to display

The problem is, that when i set a point certain located into the boundaries, it does not appear where i am expecting it to be

The calling function is:

Code: Select all

	$(function () {

	    // Initiate the chart
	    $('#container').highcharts('Map', {

	        title: {
	            text: 'Highmaps basic lat/lon demo'
	        },

	        mapNavigation: {
	            enabled: true
	        },

	        tooltip: {
	            headerFormat: '',
	            pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
	        },

	        series: [{
	            // Use the gb-all map with no data as a basemap
	           // mapData: Highcharts.maps['countries/gb/gb-all'],
			   type: 'map',
	            mapData: mapa3,
	            name: 'Basemap',
	            borderColor: '#A0A0A0',
	            nullColor: 'rgba(200, 200, 200, 0.3)',
	            showInLegend: false
	        },{
	            // Specify points using lat/lon
	            type: 'mappoint',
	            name: 'Cities',
	            color: Highcharts.getOptions().colors[1],
	            data: [{
	                name: 'A',
	                lat: -30.2419,
	                lon: -71.108
	            },
	            {
	                name: 'Bdfd',
	                lat: -30.2519,
	                lon: -71.105
	            }
	            ]
	        }]
	    });
	});

I want to set a background image that fits with those boundaries, and set point into the box

The development which i have based mine it is made by a guy from England

https://jsfiddle.net/markysoft/haghpg4d/

That map fits, well in the real map as expected, and items are set as he wants, by coordinates


Thanks for any hint, good day
mcarmona
Posts: 3
Joined: Fri May 06, 2016 4:47 pm

Re: Working with FeatureCollection

¿Could it be the offset config? We noticed that it was pointing to England, and we tried to fix it, but we dont know what does mean jsonmarginX and jsonmarginY atributes, and we don't konw if it could be causing the mistake

Can some body, please, clear my mind about if jsonmarginX and jsonmarginY, are pixeles, or geographical meassurements?

Any information is welcome
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Working with FeatureCollection

Hi,

Unfortunately there is something wrong with scale of your map.
Example: https://jsfiddle.net/djt2odke/
(Hover over map with cursor and lat/lon info will show)
Seems like you hc-transform options are wrong - why have you set them like that?

jsonmarginX and jsonmarginY are used to calculate transformFromLatLon and transformToLatLon. They are for internal use and given in axis values. More info about lat/lon can be found in Docs:
http://www.highcharts.com/docs/maps/latlon

Best Regards.
Kacper Madej
Highcharts Developer
mcarmona
Posts: 3
Joined: Fri May 06, 2016 4:47 pm

Re: Working with FeatureCollection

Hello KacperMadej, thank you very much for your answer


Yes, it seems, it was a problem in the configuration, so i had to learn a bit more the fundamentals to set it properly

Indeed, i completed my work, using highchart with not maps for now, being that the map i use, it is an image that fit over coordinates, handleable as x,y coordinates with out problems

I would like, to use svg highmaps in the future, but i need to increase my undestanding about it

And thanks for the answer, i was very desperate then so you answer brought me by the right way undestanding the problem

Regards bro
[email protected]
Posts: 3
Joined: Sun Jul 24, 2022 6:03 am

Re: Working with FeatureCollection

How to Get feature collection object for HONG KONG and BerMUDA?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Working with FeatureCollection

Hi [email protected]!

Please, do not duplicate posts on our forum and wait for the reply on your topic. That makes it much easier to track the whole issue in one topic (for us, and future users who might face a similar issue). You will get your answer here on your topic: viewtopic.php?f=14&t=49135

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”