[GIS] How to draw polygons in leaflet using x and y coordinates instead of lat lng

coordinate systemgeojsonleaflet

I am currently working with leaflet. I was able to draw the polygons with geojson using lat,lng with below code snippet:

var geolayer=L.geoJson(geodata);

But above code uses the latlng for drawing the polygons. Now is there any way possible to draw the polygon using x and y coordinate(eg:1,1)?

Best Answer

The GeoJSON format only supports the WGS84 CRS.

The coordinate reference system for all GeoJSON coordinates is a
geographic coordinate reference system, using the World Geodetic
System 1984 (WGS 84) [WGS84] datum, with longitude and latitude units of decimal degrees.

Please see the website for more information or read the specification here.

If you need to reproject GeoJSON, you could look at https://github.com/perliedman/reproject.

Related Solutions

[GIS] Invalid GeoJSON object

You need to load file via AJAX call, loading the file directly doesn't work. You can either use AJAX plugin or create a global variable in the file you're trying to load and use that variable directly.

[GIS] Create map using Leaflet and JSON

You have a JSON but Leaflet really likes geoJSONs, so you should convert the JSON to geoJSON first, or directly load a geoJSON. So for your example, if you have:

var data =[{
"latitud": 43.526523590087891,
"longitud": -5.6150951385498047
}, {
"latitud": 43.511680603027344,
"longitud": -5.6671133041381836
},
 .
 //More Lat-Lng Points
 .
{
"latitud": 43.526451110839844,
"longitud": -5.6140098571777344
}]

You can restructure the JSON to a geoJSON:

var jsonFeatures = [];

data.forEach(function(point){
    var lat = point.latitud;
    var lon = point.longitud;

    var feature = {type: 'Feature',
        properties: point,
        geometry: {
            type: 'Point',
            coordinates: [lon,lat]
        }
    };

    jsonFeatures.push(feature);
});

var geoJson = { type: 'FeatureCollection', features: jsonFeatures };

And last but not least, you can add your new geoJSON to the map:

L.geoJson(geoJson).addTo(map);

A full code example to display your points on a map would look like this:

var map = L.map('map',{
}).setView([43.526523590087891, -5.6150951385498047], 12);

L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abcd',
    ext: 'png'
}).addTo(map);

var data = [{
"latitud": 43.526523590087891,
"longitud": -5.6150951385498047
}, {
"latitud": 43.511680603027344,
"longitud": -5.6671133041381836
},
{
"latitud": 43.526451110839844,
"longitud": -5.6140098571777344
}]

var jsonFeatures = [];

data.forEach(function(point){
    var lat = point.latitud;
    var lon = point.longitud;

    var feature = {type: 'Feature',
        properties: point,
        geometry: {
            type: 'Point',
            coordinates: [lon,lat]
        }
    };

    jsonFeatures.push(feature);
});

var geoJson = { type: 'FeatureCollection', features: jsonFeatures };

L.geoJson(geoJson).addTo(map);

Hope this solves your problem! Cheers

Best Answer

Related Solutions

[GIS] Invalid GeoJSON object

[GIS] Create map using Leaflet and JSON

Related Question