Skip to content

README.md

Latest commit

 

History

History
93 lines (67 loc) · 3.36 KB

README.md

File metadata and controls

93 lines (67 loc) · 3.36 KB
Raw

extended-leaflet-controls

Extends Leaflet's map control positions to add two centered locations: topcenter and bottomcenter.

This tiny utility makes it easy to place controls centered at the top or bottom of the map (for example, a centered zoom, search box, or custom control).

Quick summary

  • Adds two new position strings you can pass to Leaflet controls: topcenter and bottomcenter.
  • Works by creating containers compatible with Leaflet control positioning and providing small CSS helpers to center the contents.

Contents

Installation

There are two common ways to use this project:

  • Browser (include built file in dist/):

    1. Add Leaflet to your page (CSS + JS).
    2. Include the built bundle from dist/ (served from your site or CDN).

    Example HTML:

     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script src="/path/to/extended-leaflet-controls/dist/extended-leaflet-controls.js"></script>
 <div id="map" style="height:400px"></div>
 <script>
 	const map = L.map('map').setView([51.505, -0.09], 13);
 	L.control.zoom({ position: 'topcenter' }).addTo(map);
 	L.control.layers(null, null, { position: 'bottomcenter' }).addTo(map);
 </script>

  • npm / bundlers (if published):

     // Install and import according to package availability
 // npm install extended-leaflet-controls
 import 'extended-leaflet-controls';
 // The module augments Leaflet so control position strings 'topcenter' and 'bottomcenter' work.
 const map = L.map('map').setView([51.505, -0.09], 13);
 L.control.zoom({ position: 'topcenter' }).addTo(map);

Usage

  • After including this project (bundle or module), you can pass position: 'topcenter' or position: 'bottomcenter' to any Leaflet control that accepts a position option, for example:

     L.control.zoom({ position: 'topcenter' }).addTo(map);
 L.control.layers(baseLayers, overlays, { position: 'bottomcenter' }).addTo(map);

  • If you create a custom control with L.Control.extend or L.control({ position: 'topcenter' }), it will be rendered into the appropriate centered container.

Styling / CSS tips

Some control styles might need minor CSS tweaks to look centered and sized correctly. Example CSS to center controls placed in the topcenter/bottomcenter containers:

/* Center top controls */
.leaflet-topcenter, .leaflet-bottomcenter {
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	display: flex;
	align-items: center;
}

/* Optional spacing from map edges */
.leaflet-topcenter { top: 10px; }
.leaflet-bottomcenter { bottom: 10px; }

Adjust selectors to match the exact container classes used by the build output in dist/ if necessary.

Compatibility

  • Designed to work with Leaflet 1.x and later. Works in modern browsers.

Files & distribution

  • dist/ contains the browser-ready bundle(s). Include them directly in a webpage when you do not use a bundler.

Contributing

  • Bug reports and pull requests are welcome. Please open an issue describing the problem and the environment.

License