In this recipe, we will learn how to add controls to the map. Actually, our maps already use controls. The zoom control in the upper-left corner and the attribution in the lower-right corner are examples of controls.
We need to do the following:
Create a control and customize it by passing the options.
Add the control to the map.
Open the
chapter-4-example-13-controls
folder in your favorite text editor. The project is already configured and has a base layer.In
main.js
, let's modify the map to disable the default controls via the following code:var map = L.map('map', { zoomControl: false, attributionControl: false }).setView(latlong, 15);
This will disable the zoom and attribution controls. We will then add our own.
Let's add the zoom control first. Execute the following code:
var zoomControl = L.control.zoom({position: 'topright', zoomInTitle: 'Click to zoom in', zoomOutTitle...