Loading GeoJSON layer over OpenStreetMap layer in Leaflet web map

Question

I am building a Leaflet web map and I am using OpenStreetMap as the base layer.

I have a .shp file of land parcels that I converted to GeoJSON with QGIS.

I also was able to get the web map with the base layer displaying correctly in Leaflet.

I will spare you all the header code injection as it is standard, but I am stuck trying to load the GeoJSON layer over my base map. This is my first time doing anything with Leaflet, and I am rather lost.

How can I display the (remotely-hosted) GeoJSON layer? And, ideally, how can I bring it to 30% opacity when overlayed?

Here is the code I have:

<div id="mapid" style="width: 75%; height: 600px;"></div>
<script>

    var mymap = L.map('mapid').setView([31.807, -99.040], 50);

  // loading GeoJSON file - Here my html and usa_adm.geojson file resides in same folder
$.getJSON("https://www.mywebsite.com/testing/testmap1.geojson",function(data){
// L.geoJson function is used to parse geojson file and load on to map
L.geoJson(data).addTo(mymap);
});

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eythisisthekey', {
        maxZoom: 13,
        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);

</script>

The name of the GeoJSON file in the code and the name in your comment are different - no idea if this is causing the problem, though, because you don't say what the problem is. Are there any errors in the console? Is the GeoJSON being retrieved successfully? — peeebeee
Ah, the comment is an artefact from the code I originally based mine off. The GeoJSON is not appearing and I don't know how to test whether the query to get the .geojson file is working. — reallymemorable
The code in your question looks fine, it is impossible to help you without further details on your issue. E.g. could you share a sample of your GeoJSON data? — ghybs

Baptiste Baptiste · Accepted Answer · 2018-10-31T10:05:12

Here is a simple solution with L.geoJson and onEachFeature https://leafletjs.com/examples/geojson/

var myGeojson; // Your layer will be stored here
$.getJSON("https://www.mywebsite.com/testing/testmap1.geojson",function(data){
    myGeojson = L.geoJson(data, {
        onEachFeature: function (feature, layer) {
            // Loop inside each features of your geojson file
            layer.name = 'If you want to add a custom name';
            //creation of the popup
            var popup = L.popup().setContent('Your popup content');
            layer.bindPopup(popup);

            // Set default layer style
            layer.setStyle({
                fillColor: black,
                opacity: 1,
                fillOpacity: 1,
                color: black,
            });

            // When layer hovered
            layer.on('mouseover', function () {
                layer.setStyle({
                    opacity: 0.3,
                    fillOpacity: 0.3,
                });
            });

            // Then when your mouse is out change back
            layer.on('mouseout', function () {
                layer.setStyle({
                    opacity: 1,
                    fillOpacity: 1,
                });
            });
        }
    });
    // If you want to add a custom property/name
    myGeojson['layer_name'] = 'Custom name';
    // Add to your map
    myGeojson.addTo(mymap);
});

Loading GeoJSON layer over OpenStreetMap layer in Leaflet web map

1 Answers