How can I line up a GeoJSON world map with Leaflet so that coordinates line up?

user_9400421 0
Viewed 257

Lets say I want to use Leaflet offline by rendering a GeoJSON world map generated with a tool like the one found here: https://geojson-maps.ash.ms/. In Leaflet's documentation on GeoJSON it looks like I'd use the option coordsToLatLng to do this, like:

L.geoJSON(data, {
    coordsToLatLng: function () {
        
    }
})

The documentation on that coordsToLatLng func are as follows:

Creates a LatLng object from an array of 2 numbers (longitude, latitude) or 3 numbers (longitude, latitude, altitude) used in GeoJSON for points.

But I don't think it's immediately clear how I would know how to map a global GeoJSON object based on that. Would my only option be trial and error, or is there a more pragmatic approach?

Edit: The issue is 2D maps of a 3D sphere are warped into a myriad of different styles, each with unique functions to map lat / lon coords to the warping of the map, right? Assuming I can find the correct algorithm for conversion based on the GeoJSON map I have, that documentation still doesn't explain clearly what the syntax, input output for that coordsToLatLng func.

How is that function used exactly, and bonus points for naming the algorithms used by different map tranform styles to convert to lat/lon, for example to the map style used for the GeoJSON generator I linked above.

geojson leaflet
1 Answers

Your linked page generates all for you:

<script>
        var myGeoJSONPath = 'path/to/mymap.geo.json';
        var myCustomStyle = {
            stroke: false,
            fill: true,
            fillColor: '#fff',
            fillOpacity: 1
        }
        $.getJSON(myGeoJSONPath,function(data){
            var map = L.map('map').setView([39.74739, -105], 4);

            L.geoJson(data, {
                clickable: false,
                style: myCustomStyle
            }).addTo(map);
        })
    </script>

You don't need to set the coordsToLatLng, it is a predefined function which can be overwritten. Look into: GeoJSON-src

user_82839380
Related