Leaflet with GeoJSON Layer

This post will cover creating a basic Leaflet map using a GeoJSON data source.

We’ll cover using both a GeoJSON file as well as GeoJSON from a GeoServer url.

Let’s start with our Leaflet map skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
	<base target="_top">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>Leafletjs Map</title>
	
	<!-- Leafletjs and CSS -->    
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
	
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

	
	
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		.leaflet-container {
			height: 80%;
			width: 80%;
			max-width: 100%;
			max-height: 100%;
		}
	</style>

	
</head>
<body>

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


	
	<script>
		
	// Add OpenStreetMap basemap
		const map = L.map('map').setView([41.8916, -87.7219], 4);

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

	
	



</script>

</body>
</html>

We have a local file, states.json.

We now add some javascript to fetch our json data and add it to the map

The first section sets the data location and the second adds the data to our map.

Add the code below just above the closing </script> tag

Note: this code is intended for use on a server, if run locally you will get a CORS exception.

/*Add JSON location or url*/
       var url = 'states.json';  // path to json file
       
/*fetch JSON data and to mao*/
       fetch(url)
       .then(function(response) {
          return response.json()
       })
       .then(function(data) {
         L.geoJson(data).addTo(map);
       })

So our final code looks like below:

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Leaflet GeoJSON Example</title>
    
    <!-- Leafletjs and CSS -->    
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .leaflet-container {
            height: 80%;
            width: 80%;
            max-width: 100%;
            max-height: 100%;
        }
    </style>

    </head>
<body>

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

    // Add OpenStreetMap basemap
        var map = L.map('map').setView([41.8916, -87.7219], 4);

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

     
       /*Add JSON location or url*/

       var url = 'states.json';  // path to json file

    	/*fetch JSON data and to map*/

       fetch(url)
       .then(function(response) {
          return response.json()
       })
       .then(function(data) {
         L.geoJson(data).addTo(map);
       })  

</script>
</body>
</html>

If we open the map in our browser, it now looks like below:

Using a GeoServer url for JSON data.

If we wish to, we can use a GeoServer JSON url for our JSON data source.

In order to do so, we will need to enable CORS for our GeoServer instance.

To get our GeoJSON url from GeoServer, go to Layer Preview page and select GeoJSON from the Formats dropdown for the layer you would like to use.

Note the url that is generated:

https://yourdomain.com/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=application/json

Now, paste the url in place of ‘states.json’ in your code as below:

 var url = 'https://yourdomain.com/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=application/json';  // path to json file

Refresh the page and your map should look the same as previous, but is now using your GeoServer GeoJSON url.