Menu
I wonder how to display the scale map in leafleat.js. That is: I want this
instead of this
(taken to leaflet tutorial). See the left corner of the picture.
572
To add a scale control of your own to the map using Leaflet JavaScript library, follow the steps given below − Step 1 − Create a Map object by passing a < div > element (String or object) and map options (optional). Step 2 − Create a Layer object by passing the URL of the desired tile.
Leaflet.js is a JavaScript library that makes it extremely easy to show maps on a webpage and interact with it. This guide would attempt to give a simple introduction to using Leaflet.js to display map and display the required area on the map. We will start by declaring the HTML needed to display the map.
Leaflet provides various controls such as zoom, attribution, scale, etc., where −. Zoom − By default, this control exists at the top left corner of the map. It has two buttons "+" and "–", using which you can zoom-in or zoom-out the map.
To add map to our web page, simple web technologies like HTML, CSS and JavaScript are required. To use Leaflet in your code, you need to add the Leaflet CSS and Leaflet JS.
You can take use of L.control.scale().
Here is an EXAMPLE. In it's options you can set width, position and scale system.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
