Displaying GeoJSON Data On Map

ervin-lemark (71)in #geojson • 6 years ago

In this quick tutorial, I will show you how to display GeoJSON data on a map using Leaflet Javascript library and html.

About GeoJSON

GeoJSON is a format for encoding a variety of geographic data structures.
A GeoJSON object may represent a geometry, a feature, or a collection of features.
GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection.
Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.

Leaflet GeoJSON Example

Add Leaflet css and library to head section

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
        crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
        crossorigin="">
    </script>

Define map object's height

    <style>
        #map { height: 500px; }
    </style>

Add div for the map object - in the body

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

Add script

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

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

        function onEachFeature(feature, layer) {
            // does this feature have a property named popupContent?
            if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent);
            }
        }

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "amenity": "Baseball Stadium",
                "popupContent": "This is where the Rockies play!"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-104.99404, 39.75621]
            }
        };

        L.geoJSON(geojsonFeature, {
            onEachFeature: onEachFeature
        }).addTo(map);

    </script>