I'm generating html files from python (mainly using geopandas module) containing highmaps objects.
(The code is too long to fit here in stackoverflow as geojson are included in html files : please don't check the included code but refer to the fiddles instead).
The map datas are :
one geojson (directly generated from geopandas, using the .to_json() method), loaded in Departements serie as map serie. It is directly stored in the html file, using mapData option. Both crs and hc-transform properties are set manually using python.
one array of points (fields beeing lon, lat and name), manually generated using python ; this is loaded in cities serie as mappoint serie.
Both series are prealably converted in the same geodesic system using geopandas (which I think uses pyproj4 dll somewhere).
I got geodesics systems as proj4 strings from spatialreference, that is:
EPSG 2154 (official french system) : "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"
WGS84 (= epsg 4326) : "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"
When I convert all datas in WGS 84, I get correct results (though the map looks distorded for French users) : see this fiddle.
When I convert all datas in 2154, I get serious errors (as you can see, cities are displayed erraticly, which seems to include some latitude inversion as well) ; see this fiddle.
When I keep all datas in WGS 84 and just set the hc-transform to epsg2154, I still have strange results, though I think this is the correct way referenced in the doc (I'm not 100% certain of that, as those are maps generated using distant geojson datas and I'm not used to program in javascript)...
I also tried using the x/y properties for the mappoint serie (instead of lon/lat) but this does not improve the result (though I checked datas in QGis and these coordinates are 100% right).
How should I do this ?
Code sample (please refer to fiddles for working example with geojson) :
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.mapChart("container", {
title: {
text: 'Testmap Highmaps Hauts-de-France'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [
{
name: 'areas',
type: 'map',
mapData: {'type': 'FeatureCollection', 'features': [...], 'hc-transform': {'default': {'crs': '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'}}, 'crs': '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'},
},
{
name: 'cities',
type: 'mappoint',
data: [{'lon': 727759.0000000142, 'lat': 6884382.999997055, 'name': 'Chateau-Thierry'}, ...],
color: 'black',
marker: {
radius: 2
},
dataLabels: {
align: 'left',
verticalAlign: 'middle'
},
animation: false,
tooltip: {
pointFormat: '{point.name}'
}
},
]
});
</script>
</body>
</html>
