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

• LICENSE
• dist/ — built distributables to include in a browser page
• README.md — this file

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

• See LICENSE.