Leaflet: Minimap and bottom center

02 March 2019

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'
      }).addTo(map);
      

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);



Comments

    Join the discussion for this article on this ticket. Comments appear on this page instantly.
    Thanks to aristaht for making this static comment system possible.