Adding JSON layers to a Leaflet map
Question
I am trying to get familiar with leaflet maps, however I am not finding their tutorials very intuitive. I have been using their geojson tutorial and looking through the source code of their examples to try and add my own data to a map I am creating, however I have not been successful in having the polygon display.
html:
<!DOCTYPE html >
<html>
<head>
<title>Leaflet Ex</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="creek.js" type="text/javascript"></script>
</head>
<body>
<div id="mapid" style="width: 1000px; height: 700px;"></div>
<script type="text/javascript">
var map = L.map('mapid').setView([49.2485, -122.9995], 15);
L.tileLayer('https://api.mapbox.com/styles/v1/***/civ43lux700032iqp0990mgfn/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGd3YWx0b24iLCJhIjoiSUZURmlaUSJ9.FLL81KvyJ3kCFiUbUgCAWg', {
attribution: 'Map data © <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>',
maxZoom: 18,
}).addTo(map);
L.geoJson(creek, {
style: function (feature) {
return feature.properties && feature.properties.style;
}
}).addTo(map);
</script>
</body>
</html>
json:
var creek = {
"type": = "Feature",
"properties": {
"AREA":4575.273,
"PERIMETER":1396.149,
"CREEK_":2,
"CREEK_ID":5,
"TYPE":"water",
"CODE":"Guichion Creek"
"style": {
weight: 1,
color: "#000",
opacity: 1,
fillColor: "#0D00F2",
fillOpacity: 0.7
}
}
"geometry": {
"type": "Polygon",
"coordinates": [
[
[500001.59375,5455104],[500001.84375,5455110],[500010.09375,5455109.5],[500012.5,5455105.5],[500013.15625,5455100.5],[500013.78125,5455094],[500014.4375,5455085.5],[500014.4375,5455080],[500014.4375,5455076],[500013.5625,5455073.5],[500012.28125,5455068.5],[500010.75,5455065.5],[500008.59375,5455062.5],[500006.4375,5455059],[500004.90625,5455057],[500004.90625,5455049],[500004.90625,5455042.5],[500005.34375,5455038],[500006,5455031.5],[500006,5455028.5],[500006.4375,5455024.5],[500007.5,5455021],[500009.25,5455016.5],[500010.53125,5455014],[500010.96875,5455010],[500011.1875,5455005],[500011.84375,5454999.5],[500012.28125,5454991.5],[500013.78125,5454982.5],[500015.53125,5454975.5],[500016.84375,5454969],[500018.78125,5454964.5],[500019.875,5454959.5],[500022.25,5454947.5],[500023.96875,5454941.5],[500025.71875,5454936.5],[500026.375,5454928],[500027.25,5454921.5],[500026.59375,5454910.5],[500026.15625,5454906],[500026.375,5454893.5],[500027.03125,5454887],[500027.03125,5454881],[500027.25,5454876],[500027.875,5454871],[500028.96875,5454868.5],[500032.4375,5454864],[500033.96875,5454861],[500034.59375,5454856.5],[500033.75,5454851.5],[500031.125,5454847],[500028.75,5454842],[500026.59375,5454840.5],[500023.34375,5454838],[500020.5,5454836],[500019.65625,5454831.5],[500019.21875,5454826],[500017.46875,5454820.5],[500017.46875,5454814],[500016.40625,5454807],[500015.3125,5454801],[500014.21875,5454796],[500014,5454790.5],[500013.15625,5454786],[500013.5625,5454779],[500012.71875,5454775],[500011.40625,5454770.5],[500010.96875,5454760],[500011.1875,5454744],[500011.40625,5454734],[500010.53125,5454727.5],[500009.03125,5454721],[500008.375,5454712.5],[500006.4375,5454702],[500005.34375,5454694],[500004.46875,5454687],[500003.59375,5454683],[500003.375,5454673],[500003.15625,5454667],[500001.65625,5454659],[500000.78125,5454650.5],[500000.125,5454643],[499999.28125,5454639],[499998.40625,5454634.5],[499997.75,5454629.5],[499997.09375,5454624.5],[499996.21875,5454621.5],[499995.375,5454617.5],[499993.1875,5454613],[499991.25,5454609],[499991.03125,5454602.5],[499990.375,5454597.5],[499988,5454592],[499986.6875,5454588.5],[499986.03125,5454583.5],[499985.8125,5454578],[499984.53125,5454572],[499983.4375,5454561.5],[499981.9375,5454555],[499980.40625,5454550],[499980.40625,5454542],[499980.84375,5454532.5],[499978.6875,5454522.5],[499978.46875,5454517],[499977.375,5454514],[499971.9375,5454506],[499965.65625,5454499],[499958.28125,5454491],[499953.09375,5454486.5],[499947.03125,5454483],[499938.125,5454478],[499930.53125,5454474.5],[499922.53125,5454469.5],[499916.65625,5454464],[499914.0625,5454467],[499918.40625,5454470],[499922.75,5454474],[499929.03125,5454478.5],[499931.1875,5454479.5],[499935.09375,5454480],[499941.59375,5454484.5],[499952.65625,5454491.5],[499958.5,5454498.5],[499964.15625,5454504],[499968.46875,5454508],[499973.46875,5454523.5],[499975.40625,5454531.5],[499976.28125,5454546.5],[499978.46875,5454556],[499979.53125,5454566],[499981.9375,5454585],[499985.625,5454599.5],[499988.21875,5454615],[499992.125,5454629],[499994.9375,5454642],[499998.625,5454653],[499998.40625,5454660],[500000.78125,5454674.5],[500001,5454688.5],[500001.65625,5454700.5],[500003.59375,5454709],[500005.5625,5454724],[500005.125,5454736.5],[500005.125,5454756],[500007.28125,5454782],[500008.375,5454798.5],[500010.09375,5454809.5],[500014.21875,5454830.5],[500018.125,5454848],[500019.875,5454859.5],[500022.03125,5454864],[500022.46875,5454886.5],[500022.6875,5454903.5],[500022.03125,5454928],[500020.71875,5454935.5],[500017.46875,5454940.5],[500015.3125,5454962.5],[500011.1875,5454977],[500005.78125,5454990.5],[500005.78125,5454995],[500005.5625,5455005.5],[500003.8125,5455011.5],[500001,5455019.5],[499995.59375,5455034],[499990.8125,5455050.5],[499985.8125,5455062],[499983.65625,5455065.5],[499984.09375,5455078],[499986.25,5455080.5],[499990.15625,5455083.5],[499995.15625,5455090.5],[499999.90625,5455098],[500001.59375,5455104]
]
]
}
};
any help figuring out where my problem is would be greatly appreciated!
1 answers
solution1
1 2016-11-15 20:34:08
Typo, right here:
"type": = "Feature",
Check the object initializer syntax in JS , notice there is no usage of the = operator in there.
In the future, use tools like JSONlint and GeoJSONLint to check the validity of your JSON/GeoJSON. Avoid writing JSON/GeoJSON manually if possible. Use your browser's debugging capabilities to catch errors like that one.
Besides that, notice the coordinate system for this L.LatLng :
var map = L.map('mapid').setView([49.2485, -122.9995], 15);
And the coordinates in your GeoJSON:
[500001.59375,5455104], ...
Those are definitely not latitude-longitude coordinates. From the looks of it, they should be some kind of UTM coordinates (false easting and northing of 500000 and 5000000).
According to the GeoJSON specs , in particular section 4 of RFC 7946 :
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.
In other words, convert your coordinates to lat-long in WGS84 (AKA EPSG:4326) if you want to conform to the GeoJSON standard. As it is now, Leaflet will try to have a point at 500000 degrees west, 5450000 degrees north, which makes absolutely no sense.
Convert your coordinates. If you don't have any clue on how to do that, start by researching into proj4 , related utilities like cs2cs or ogr2ogr , cousin projects like proj4js , or graphical GIS software like gvSIG and QGIS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.