[GIS] How to hide leaflet base map

leafletweb-mapping

I'm building a webGIS using leaflet library. Since the data visualization is for only a certain region, it seems that the broader leaflet base map looks a bit distracting. I wonder if there's a way to hide the redundant region.

Best Answer

If I understand correctly what you're asking, here are a few ideas:

Limit the map bounds and zoom to a certain range with minZoom, maxZoom and maxBounds
add an "inverted mask" to the area of interest. Check Bjorn's mask plugin, as well as the questions and answers in this discussion

Related Solutions

[GIS] Leaflet / Google Map baselayer / markers not visible

Just a quick fix: you were on the right track with the z-index. Try adding this to your own css file (may break other things! I simply got it to display the markers):

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}

[GIS] Control to select data source on Leaflet map

You can change your style function to accept another parameter, and use that to set your style. When the user wants to change the rendering, you just call .setStyle(feature, color). You will also need to create a function to define the colors for that dataset as well. For example, I'm using a function name of getGenderColor().

Example:

function style(feature, fillColor) {
    return {
        fillColor : fillColor,
        ....
    }
}
var geojson = L.geoJson(districts, {style: function (f) {
    return style(f, getColor(f.properties.party));
}}).addTo(map);

$("#button-to-render").on('click', function () {
    geojson.setStyle(function (f) {
        return style(f, getGenderColor(f.properties.gender));
    });
});

There are other ways to do this, but I think this example will work for what you need.

I created a simple example in jsfiddle: http://jsfiddle.net/TnX96/103/

Best Answer

Related Solutions

[GIS] Leaflet / Google Map baselayer / markers not visible

[GIS] Control to select data source on Leaflet map

Related Question