CODEWITHSUNDEEP
leafletgispolygongeojson
Julie G
Julie G

Reputation: 21

GeoJSON won't show on Leaflet (1.0)

I'm trying to show a some GeoJSON on my map, and it isn't working. I'm pulling complex multipolygons from the database, but for simplicity's sake, I tried constructing a basic polygon by hand. I can't get it to show either.

I tried creating a new pane with a zIndex of 10000 and adding the layer there to no avail. I tried swapping lat/long in case I somehow reversed them, and that didn't work either. I'm using a 10px weight to ensure there's no way it could be missed.

Here is the basic example where I'm just trying to add a polygon that bounds Manhattan to a map.

var mapDivId = 'map';
var leafletMap = L.map(mapDivId,
                {'boxZoom': true,
                 'doubleClickZoom': false,
                 'scrollWheelZoom': true,
                 'touchZoom': true,
                 'zoomControl': true,
                 'dragging': true});

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
osm.addTo(leafletMap);

var districtOutlineStyle = {
    "color": "black",
    "weight": "10px",
    "opacity": "0.5"
};

var overlaySimplePolygonAroundManhattan = function() {
   xmin = 40.68291;
   xmax = 40.87903;
   ymin = -74.04772;
   ymax = -73.90665;

   geoJsonShape = {'type': "Polygon",
                   'coordinates': [[[xmin, ymin], [xmin, ymax], [xmax, ymax], [xmax, ymin], [xmin, ymin]]]};
   districtsOverlay = L.geoJSON(geoJsonShape,
                            {style: districtOutlineStyle});
   leafletMap.addLayer(districtsOverlay);
};

overlaySimplePolygonAroundManhattan();

Any idea why it won't display the polygon? This is Leaflet 1.1.0.

Thanks!

Upvotes: 1

Views: 280

Answers (2)

Julie G
Julie G

Reputation: 21

Andrew is right! It was because I specified pixels instead of just a number for the weight. It works great now.

I had tried swapping lat/long multiple times, so I knew it wasn't just that. And that was debugging code. I thought the code snippet I posted had them in the right order but apparently not. The real shapes I'm displaying are MultiPolygons pulled as GeoJSON from Postgres, so I was confident I had the proper lat/long ordering there, even if they were backwards in my debugging function. As soon as I removed 'px', my function to display the real shapes worked too.

Thank you!

Upvotes: 0

Andrew Reid
Andrew Reid

Reputation: 38151

Two things should help:

  1. Your xMin/Max are mixed up with you yMin/Max:

So if you are zoomed in to start, you won't find your polygon unless zooming out to Antarctica.

  xmin = 40.68291;   // 40 degrees north, not east
  xmax = 40.87903;
  ymin = -74.04772;  // 74 degrees west, not south
  ymax = -73.90665;

  1. You don't need to specify pixels, leaflet is expecting a number when styling the polygon. Leaflet doesn't handle this error gracefully apparently, resulting in no visible polygon.

    (I also set the initial zoom and centering location) Altogether, this gives a result like:

var mapDivId = 'map';
var leafletMap = L.map(mapDivId,
                {'boxZoom': true,
                 'doubleClickZoom': false,
                 'scrollWheelZoom': true,
                 'touchZoom': true,
                 'zoomControl': true,
                 'dragging': true}).setView([40.75, -73.97], 10);
   

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

osm.addTo(leafletMap);

var districtOutlineStyle = {
    "color": "black",
    "weight": 10,
    "opacity": "0.5"
};


var overlaySimplePolygonAroundManhattan = function() {
   ymin = 40.68291;
   ymax = 40.87903;
   xmin = -74.04772;
   xmax = -73.90665;
   
   geoJsonShape = {"type": "Polygon",
                   "coordinates": [[[xmin, ymin],[xmax, ymin],  [xmax, ymax], [xmin, ymax], [xmin, ymin]]]};
                   
   districtsOverlay = L.geoJSON(geoJsonShape, {style: districtOutlineStyle});
   leafletMap.addLayer(districtsOverlay);
   
   // Alternative approach:
   //L.geoJSON(geoJsonShape,{style: districtOutlineStyle}).addTo(leafletMap);
};


overlaySimplePolygonAroundManhattan();
#map {
  width: 600px;
  height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.css"/>

<div id="map"></div>

Upvotes: 1

Related Questions