less than 1 minute read

I added a minimap on the leaflet page. Pretty easy to integrate:

  • Host the 2 important file from the plugin
    • Control.MiniMap.js
    • Control.MiniMap.css
  • Load them in your head balise
    • <!-- Minimap -->
      <!-- https://github.com/Norkart/Leaflet-MiniMap
      Copyright (c) 2012, Norkart AS
      All rights reserved. -->
      <script src="js/Minimap/Control.MiniMap.js"></script>
      <link  href="js/Minimap/Control.MiniMap.css" rel="stylesheet"/>
  • Load in on the map (OpenStreetMap_France is a L.tileLayer already loaded before)
    • // Minimap
      var miniMap = new L.Control.MiniMap(OpenStreetMap_France, {
        position: 'bottomleft'

I added a scale in the center as well (needed a control plugin - topcenter)

Just load the css and js needed:

<!-- topcenter -->
<link  href="js/topcenter/leaflet-control-topcenter.css" rel="stylesheet"/>
<script src="js/topcenter/leaflet-control-topcenter.js"></script>

You will have 2 new values available for the position option of the Control from leaflet:

  • bottomcenter
  • topcenter

E.g. L.control.scale({imperial: false, position: 'bottomcenter'}).addTo(map);