CODEWITHSUNDEEP
javascriptleafletopenstreetmap
somenxavier
somenxavier

Reputation: 1557

How to display the map scale in leaflet.js

I wonder how to display the scale map in leafleat.js. That is: I want this enter image description here instead of this enter image description here (taken to leaflet tutorial). See the left corner of the picture.

Upvotes: 10

Views: 16630

Answers (2)

Artem Tymchenko
Artem Tymchenko

Reputation: 111

In case of react-leafleat just use following code:

import { MapContainer, ScaleControl } from "react-leaflet";

export function MyMap() {
  return (
    <MapContainer>
      <ScaleControl metric={true} imperial={false} />
    </MapContainer>
  );
}

Upvotes: 0

Manuel
Manuel

Reputation: 2542

You can take use of L.control.scale():

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.control.scale().addTo(map);
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

<div id="map" style="width: 100%; height: 150px;"></div>

Upvotes: 17

Related Questions