Leaflet GeoJson

Question

Can someone explain me why this leaflet code works for visualizing the GeoJson data of the state New York but I can't draw the data of the city new york. I used the same export preferences for the files in QGIS.

I used the data from the following links:

New York city http://www.nyc.gov/html/dcp/html/bytes/districts_download_metadata.shtml

New York state http://cugir.mannlib.cornell.edu/bucketinfo.jsp?id=7865

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
 <link rel="stylesheet" href="style_blank.css" />
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <script src="sdfgsdgdfgfdsgd.js"></script>
  <div id="map"></div>
  <script>

  var map = L.map('map',{
    center: [5,28],
    zoom: 3,
    minZoom: 2,
    maxZoom: 18
  });

  L.geoJson(data, {
    style: function (feature) {
        return {color: feature.properties.color};
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.description);
    }
}).addTo(map);
</script>
</body>
</html>

Can you throw this onto a demo site?Or show us the geojson at least? — snkashis

northlandiguana northlandiguana · Accepted Answer · 2015-10-02T18:27:29

From the lack of specificity of the question, it's difficult to say where the problem lies. However, I have a good guess.

I followed your link to the city data and downloaded the "Borough Boundaries" shapefile, then imported it into QGIS. The coordinate units appear to be either feet or meters, indicating that it is projected data. Leaflet can't deal with projected coordinates; it requires unprojected lat/long (decimal degree) coordinates. What you need to do is follow these steps:

1) Find out what projection the data is in;

2) Assign that projection to the data using GIS software (such as free, open-source QGIS);

3) Reproject the data into the WGS 84 (EPSG:4326) coordinate reference system;

4) Save the reprojected data as a new GeoJSON.

Leaflet GeoJson

3 Answers