Changing style color of geoJSON polygon, but the geojson is not showing up

Question

My layer won't appear, I've used Leaflet's example and it is still not showing up.

Here is a snippet demonstrating the problem.

// Setting map point of view with L.map and set view
var map = L.map('map').setView([47.656896, -122.307511], 7);

// Adding a tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

// Washington Boundaries geoJSONLayer
var stateBoundaries = {
  "type": "FeatureCollection",
  "features":  {
      "type":"Feature",
      "properties": {
      "name":"Washington"
    },
    "geometry":{
    "type":"MultiPolygon",
    "coordinates":[[[
              [-117.033359,49.000239],[-117.044313,47.762451],
              [-117.038836,46.426077],[-117.055267,46.343923],
              [-116.92382,46.168661],[-116.918344,45.993399],
              [-118.988627,45.998876],[-119.125551,45.933153],
              [-119.525367,45.911245],[-119.963522,45.823614],
              [-120.209985,45.725029],[-120.505739,45.697644],
              [-120.637186,45.746937],[-121.18488,45.604536],
              [-121.217742,45.670259],[-121.535404,45.725029],
              [-121.809251,45.708598],[-122.247407,45.549767],
              [-122.762239,45.659305],[-122.811531,45.960537],
              [-122.904639,46.08103],[-123.11824,46.185092],
              [-123.211348,46.174138],[-123.370179,46.146753],
              [-123.545441,46.261769],[-123.72618,46.300108],
              [-123.874058,46.239861],[-124.065751,46.327492],
              [-124.027412,46.464416],[-123.895966,46.535616],
              [-124.098612,46.74374],[-124.235536,47.285957],
              [-124.31769,47.357157],[-124.427229,47.740543],
              [-124.624399,47.88842],[-124.706553,48.184175],
              [-124.597014,48.381345],[-124.394367,48.288237],
              [-123.983597,48.162267],[-123.704273,48.167744],
              [-123.424949,48.118452],[-123.162056,48.167744],
              [-123.036086,48.080113],[-122.800578,48.08559],
              [-122.636269,47.866512],[-122.515777,47.882943],
              [-122.493869,47.587189],[-122.422669,47.318818],
              [-122.324084,47.346203],[-122.422669,47.576235],
              [-122.395284,47.800789],[-122.230976,48.030821],
              [-122.362422,48.123929],[-122.373376,48.288237],
              [-122.471961,48.468976],[-122.422669,48.600422],
              [-122.488392,48.753777],[-122.647223,48.775685],
              [-122.795101,48.8907],[-122.756762,49.000239],
              [-117.033359,49.000239],[-122.718423,48.310145],
              [-122.586977,48.35396],[-122.608885,48.151313],
              [-122.767716,48.227991],[-122.718423,48.310145],
              [-123.025132,48.583992],[-122.915593,48.715438],
              [-122.767716,48.556607],[-122.811531,48.419683],
              [-123.041563,48.458022],[-123.025132,48.583992] ]]]
            }
        }
    };
var styleState = {
  color: "#ff7800",
  weight: 5,
  opacity: 0.65
};
L.geoJSON(stateBoundaries, {style: styleState}).addTo(map);

<!-- Leaflet CSS styles-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"/>
<!-- Leaflet javascript library -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<!-- <div> element to hold the map and height style -->
<div id="map" style="width: 800px; height: 600px; margin: auto; border: 1px solid #AAA"></div>

You should format your question. Reformulate the title. Comment on your code. Now it is likely to be removed. — storaged, Dec 01 '17 at 19:09

Andrew Reid · Answer 1 · 2017-12-01T19:36:03.363

You have a malformed geojson.

The features in your feature collection must be in an array - even if only one feature is present:

{"type":"FeatureCollection","features": [{feature},{feature}] }

While I don't believe Leaflet will fail on this, the end point of each polygon should be the same as the start point.

Note, you have included one array of coordinates, these form the outer shell of the polygon - this means that the islands you've included are strung together with mainland Washington - you'll need to look into a multi-polygon geometry or use multiple polygon features to get the eventual effect you are likely looking for.

Implementing one and two above, your geojson should look like:

var stateBoundaries = { "type": "FeatureCollection", "features": [{ "type":"Feature", "properties": { "name":"Washington" }, "geometry":{ "type":"MultiPolygon", "coordinates":[[[ [-117.033359,49.000239],[-117.044313,47.762451], [-117.038836,46.426077],[-117.055267,46.343923], [-116.92382,46.168661],[-116.918344,45.993399], [-118.988627,45.998876],[-119.125551,45.933153], [-119.525367,45.911245],[-119.963522,45.823614], [-120.209985,45.725029],[-120.505739,45.697644], [-120.637186,45.746937],[-121.18488,45.604536], [-121.217742,45.670259],[-121.535404,45.725029], [-121.809251,45.708598],[-122.247407,45.549767], [-122.762239,45.659305],[-122.811531,45.960537], [-122.904639,46.08103],[-123.11824,46.185092], [-123.211348,46.174138],[-123.370179,46.146753], [-123.545441,46.261769],[-123.72618,46.300108], [-123.874058,46.239861],[-124.065751,46.327492], [-124.027412,46.464416],[-123.895966,46.535616], [-124.098612,46.74374],[-124.235536,47.285957], [-124.31769,47.357157],[-124.427229,47.740543], [-124.624399,47.88842],[-124.706553,48.184175], [-124.597014,48.381345],[-124.394367,48.288237], [-123.983597,48.162267],[-123.704273,48.167744], [-123.424949,48.118452],[-123.162056,48.167744], [-123.036086,48.080113],[-122.800578,48.08559], [-122.636269,47.866512],[-122.515777,47.882943], [-122.493869,47.587189],[-122.422669,47.318818], [-122.324084,47.346203],[-122.422669,47.576235], [-122.395284,47.800789],[-122.230976,48.030821], [-122.362422,48.123929],[-122.373376,48.288237], [-122.471961,48.468976],[-122.422669,48.600422], [-122.488392,48.753777],[-122.647223,48.775685], [-122.795101,48.8907],[-122.756762,49.000239], [-117.033359,49.000239],[-122.718423,48.310145], [-122.586977,48.35396],[-122.608885,48.151313], [-122.767716,48.227991],[-122.718423,48.310145], [-123.025132,48.583992],[-122.915593,48.715438], [-122.767716,48.556607],[-122.811531,48.419683], [-123.041563,48.458022],[-123.025132,48.583992] ]]] } }] };

And here it is in leaflet:

 var stateBoundaries = { "type": "FeatureCollection", "features": [{ "type":"Feature", "properties": { "name":"Washington" }, "geometry":{ "type":"MultiPolygon", "coordinates":[[[ [-117.033359,49.000239],[-117.044313,47.762451], [-117.038836,46.426077],[-117.055267,46.343923], [-116.92382,46.168661],[-116.918344,45.993399], [-118.988627,45.998876],[-119.125551,45.933153], [-119.525367,45.911245],[-119.963522,45.823614], [-120.209985,45.725029],[-120.505739,45.697644], [-120.637186,45.746937],[-121.18488,45.604536], [-121.217742,45.670259],[-121.535404,45.725029], [-121.809251,45.708598],[-122.247407,45.549767], [-122.762239,45.659305],[-122.811531,45.960537], [-122.904639,46.08103],[-123.11824,46.185092], [-123.211348,46.174138],[-123.370179,46.146753], [-123.545441,46.261769],[-123.72618,46.300108], [-123.874058,46.239861],[-124.065751,46.327492], [-124.027412,46.464416],[-123.895966,46.535616], [-124.098612,46.74374],[-124.235536,47.285957], [-124.31769,47.357157],[-124.427229,47.740543], [-124.624399,47.88842],[-124.706553,48.184175], [-124.597014,48.381345],[-124.394367,48.288237], [-123.983597,48.162267],[-123.704273,48.167744], [-123.424949,48.118452],[-123.162056,48.167744], [-123.036086,48.080113],[-122.800578,48.08559], [-122.636269,47.866512],[-122.515777,47.882943], [-122.493869,47.587189],[-122.422669,47.318818], [-122.324084,47.346203],[-122.422669,47.576235], [-122.395284,47.800789],[-122.230976,48.030821], [-122.362422,48.123929],[-122.373376,48.288237], [-122.471961,48.468976],[-122.422669,48.600422], [-122.488392,48.753777],[-122.647223,48.775685], [-122.795101,48.8907],[-122.756762,49.000239], [-117.033359,49.000239],[-122.718423,48.310145], [-122.586977,48.35396],[-122.608885,48.151313], [-122.767716,48.227991],[-122.718423,48.310145], [-123.025132,48.583992],[-122.915593,48.715438], [-122.767716,48.556607],[-122.811531,48.419683], [-123.041563,48.458022] ]]] } }] };

var mymap = L.map('mapid').setView([46.8907,-118.795101], 5);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
   '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
   'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
 }).addTo(mymap);

var styleState = { color: "#ff7800", weight: 5, opacity: 0.65 }; 
L.geoJSON(stateBoundaries, {style: styleState}).addTo(mymap);

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>


<div id="mapid" style="width: 600px; height: 400px;"></div>

Changing style color of geoJSON polygon, but the geojson is not showing up

1 Answers1