score:1

Accepted answer

Ok, so this is an akward solution : I still don't understand how this could solve the problem, but it works... [EDIT : this is indeed the correct solution for the time beeing, see EDIT at the end of the post]

What I did was :

  • use the proj4 string for ESPG2154 as previously said : "+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"

  • set the mapData with xy coordinates in EPSG2154's system : [761574.9000000217, 6918670.299997976], [761648.2000000217, 6918469.799997974], ...

  • set the hc-transform/crs on the mapData as previously said : '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'

  • set the mappoint datas using x/y instead of lat/lon, without any 'hc-transform' or crs, but with y coordinates inverted : data: [{'x': 727759.0000000142, 'y': -6884382.999997055, 'name': 'Chateau-Thierry'}, ...]

Note that :

  • I inverted the y coordinates, for the mappoint datas, and that these are not the correct coordinates in any sense ;
  • I also set yAxis to reversed: true, which should not be the default value as stated in the API's doc. But in fact it doesn't change anything if you remove this line or not : somehow, using multiple series including one mapData seems to be changing the default property (at least when using proj4 in this configuration). In fact, if you put it to reversed:false, you won't have any correct results, even if you don't invert the y coordinate as stated before.

I think this is some kind of undocumented bug (I might be wrong still), I will try to refer if to highcharts'staff...

See complete functional exemple in this fiddle.

<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'
            }
        },

        yAxis: {
            reversed: true
        },

        series: [
            {
                name: 'areas',
                type: 'map',
                mapData: {'type': 'FeatureCollection', 'features': [{'id': '1', 'type': 'Feature', 'properties': {'DEP': '02'}, 'geometry': {'type': 'Polygon', 'coordinates': [[[761574.9000000217, 6918670.299997976], [761648.2000000217, 6918469.799997974], ..., [699287.6999999998, 6901218.199997955]]]}}], '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: [{'x': 727759.0000000142, 'y': -6884382.999997055, 'name': 'Chateau-Thierry'}, ...],
                color: 'black',
                marker: {
                    radius: 2
                },
                dataLabels: {
                    align: 'left',
                    verticalAlign: 'middle'
                },
                animation: false,
                tooltip: {
                    pointFormat: '{point.name}'
                }
            },
        ]
    });
</script>
</body>
</html>

EDIT

So this is indeed a tricky problem... I have been in touch with highsoft and there seem to be multiple facts to take in consideration : - first, the yAxis.reverse=true IS the default behaviour, regardless to what is currently stated in the doc ; - secondly, some inner algorithm about mapData corrects this behaviour, because this type of layer is assumed to be GeoJSON ; - 3rdly, this is not the case for mappoint aw well as mapbubble layers.

Notice that if you set yAxis.reverse = false, you are up for some bad time. The mappoint layers may seem to be correctly superposed with your mapData (if I understood this correctly, this have something to do with the mappoint layer's y range to be more or less alike to those of the map area.

Highsoft has opened an issue on this subject.

Morality : my solution was in fact the good one (at least until they decide what to do with this "issue"). As for this version of Highmaps, always work with yAxis.reverse = true, and be aware that mapDatas passed as GeoJSON are not affected by this command.


Related Query

More Query from same tag