CODEWITHSUNDEEP
leafletgisgeojsongeojsonio
codewanderer
codewanderer

Reputation: 1

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

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/[email protected]/dist/leaflet.css"/>
<!-- Leaflet javascript library -->
<script src="https://unpkg.com/[email protected]/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>

Upvotes: 0

Views: 2368

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38221

You have a malformed geojson.

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

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

  1. 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/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>


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

Upvotes: 1

Related Questions