Updating a Leaflet map Made with QGIS2web
In a previous post I created a Leaflet webmap using QGIS and the qgis2web plugin. I had a list of modifications that I wanted to perform on the map after creating the code using that plugin.
Some further things I would like to work on with this map:
- Displaying the legend in two columns
- Disabling scroll zoom without clicking on the map
- Restricting zoom levels
- I want to figure out how to display a table of the data as well, and then maybe do some linking and brushing to highlight, for example, the stations with the oldest average population.
Disabling Scroll Zoom
Previously, if scrolling down in the middle of the page, you would get the behaviour in the map below:
This can be disabled, as per this gis.stackexchange post by replacing the definition of the map variable:
var map = L.map('map', {
zoomControl:true, maxZoom:28, minZoom:1
}).fitBounds([[-23.0310490725,-43.7439095692],[-22.4740929065,-42.9533150116]]);
with:
var map = L.map('map', {
zoomControl:true, maxZoom:28, minZoom:1, scrollWheelZoom: false
}).fitBounds([[-23.0310490725,-43.7439095692],[-22.4740929065,-42.9533150116]]);
map.once('focus', function() { map.scrollWheelZoom.enable(); });
Tada! You now have to click within the map to activate scroll wheel zooming.
Restricting Zoom Level to Layer Extent
To prevent the map from being zoomed out beyond the extents of the layer, I added the following:
map.options.minZoom = map.getZoom();
`
# Editing the Legend
The legend appears to be contained within the `L.control.layers()` function. In order to remove the basemaps radio button, I passed it an empty variable:
```javascript
L.control.layers({},overlayMaps).addTo(map);
The order of the layers not being respected when turned on and off from the layer control panel is a frustrating issue in leaflet, one that is rumoured to be resolved in a future version of Leaflet. After quite a bit of search, and trial and error, I came up with a solution that will hopefully be soon incorporated into the QGIS plugin. Modify the restackLayers
function to the code below, and add the event listener to a layer control overlayadd
event.
function restackLayers() {
for (index = 0; index < layerOrder.length; index++) {
layerOrder[index].bringToFront();
}
}
map.on('overlayadd', restackLayers);
Let me know what you think of this article on twitter @dumasraphael!