CODEWITHSUNDEEP
leafletgeojson
Cayo lopes
Cayo lopes

Reputation: 31

How i show geojson FeatureCollection in a leaflet Map?

I've exported shapefile data to geoJson with Qgis, before i try published in leaflet map, but it's not working.

The code i've used is below, where geojson file is "gj2.geojson".

Where is wrong?

GEOJSON is like:

{
"type": "FeatureCollection",
"name": "gj2",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "DN": 976 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647916182333311, -8.742916206999967 ], [ -36.647082848999979, -8.742916206999967 ], [ -36.647082848999979, -8.743749540333299 ], [ -36.647916182333311, -8.743749540333299 ], [ -36.647916182333311, -8.742916206999967 ] ] ] } },
{ "type": "Feature", "properties": { "DN": 971 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647082848999979, -8.742916206999967 ], [ -36.646249515666646, -8.742916206999967 ], [ -36.646249515666646, -8.745416206999966 ], [ -36.647082848999979, -8.745416206999966 ], [ -36.647082848999979, -8.742916206999967 ] ] ] } },
{ "type": "Feature", "properties": { "DN": 966 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.646249515666646, -8.742916206999967 ], [ -36.645416182333307, -8.742916206999967 ], [ -36.645416182333307, -8.743749540333299 ], [ -36.646249515666646, -8.743749540333299 ], [ -36.646249515666646, -8.742916206999967 ] ] ] } },
{ "type": "Feature", "properties": { "DN": 975 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647916182333311, -8.743749540333299 ], [ -36.647082848999979, -8.743749540333299 ], [ -36.647082848999979, -8.744582873666634 ], [ -36.647916182333311, -8.744582873666634 ], [ -36.647916182333311, -8.743749540333299 ] ] ] } },
{ "type": "Feature", "properties": { "DN": 965 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.646249515666646, -8.743749540333299 ], [ -36.645416182333307, -8.743749540333299 ], [ -36.645416182333307, -8.744582873666634 ], [ -36.646249515666646, -8.744582873666634 ], [ -36.646249515666646, -8.743749540333299 ] ] ] } },
{ "type": "Feature"....

THE CODE i've try: 

<!DOCTYPE html>
<html>
<head>
	
	<title>GeoJSON tutorial - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 100%;
			height: 100%;
		}
	</style>

	
</head>
<body>

<div id='map'></div>

<script src="geojson.js" type="text/javascript"></script>

<script>
	var map = L.map('map').setView([-9,-36], 13);

	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.light'
	}).addTo(map);


var geojson = L.geoJSON('gj2.geojson').addTo(map);
	

	
</script>



</body>
</html>

Upvotes: 3

Views: 9561

Answers (1)

KevB
KevB

Reputation: 391

The problem is that you are trying to specify a filename as a parameter to L.geoJSON(..) but it needs a Javascript object containing the geoJson definition. Add the following to the beginning of your geoJson file (geojson.js):

var myGeoJson =

So that the file starts like this:

var myGeoJson = {
"type": "FeatureCollection",
"name": "gj2",
...
...

And then add a semicolon at the end of the file. This way you have a variable 'myGeoJson' representing the geoJson definition.

Then change this line:

var geojson = L.geoJSON('gj2.geojson').addTo(map);

to this:

var geojson = L.geoJSON(myGeoJson).addTo(map);

The Leaflet GeoJSON example page has a similar example towards the top of the page here: Using GeoJSON with Leaflet

Upvotes: 4

Related Questions