I've built a map in Leaflet which has a really large GeoJSON file. Currently the only way I can get it to work is if I severely simplify the GeoJSON file down from 100mb to 25mb. I'm looking at using the mapbox gl leaflet binding as a way of solving the problem of dealing with such a large file. However, I can't figure out how to interact (on hover and click) with the layer I'm pulling in using Mapbox GL.

This is my code initialising my map and pulling my layer in from Mapbox. The style includes a basemap and a vector tile polygon layer (originally uploaded to Mapbox from a GeoJSON file):

var map = L.map('map', {maxZoom: 17}).setView([37.8, -96], 4);

var gl = L.mapboxGL({
    accessToken: 'myAccessToken',
    style: 'mapbox://styles/myStyle',
    onEachFeature: onEachFeature

Here's the onEachFeature function:

    function onEachFeature(feature, layer) {
        var popupText = "";
        var labelText = "";
        if (feature.properties && feature.properties.GEOID10) {
            labelText = "Zip Code: " + feature.properties.GEOID10.toString();
            click: highlightFeature, 
            mouseout: resetHighlight
            //click: zoomToFeature

    function highlightFeature(e) {
        var layer = e.target;

            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7

        if (!L.Browser.ie && !L.Browser.opera) {


    function resetHighlight(e) {

I don't know how to implement the on click functionality to interact with the vector layer being brought in by Mapbox GL.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.