Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tomickigrzegorz/leaflet-examples

:maple_leaf: A collection of examples of leaflet map usage
https://github.com/tomickigrzegorz/leaflet-examples

coordinates demo geocoding geojson leaflet-map markers polygons tilelayer

Last synced: 3 months ago
JSON representation

:maple_leaf: A collection of examples of leaflet map usage

Lists

README

        

# :maple_leaf: leaflet-examples

**leaflet-examples** a collection of examples of leaflet map usage

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

> The react version can be found at this link [react-leaflet-examples](https://github.com/tomickigrzegorz/react-leaflet-examples).

## Demo

Here is a working live demo : https://tomickigrzegorz.github.io/leaflet-examples/

> Work in progress :smiley: Suggestions welcome :bulb:.

76 [move-marker](https://tomickigrzegorz.github.io/leaflet-examples/#76.move-marker)
75 [dynamic-data-on-sidebar](https://tomickigrzegorz.github.io/leaflet-examples/#75.dynamic-data-on-sidebar)
74 [open-popup-markercluster-from-outside](https://tomickigrzegorz.github.io/leaflet-examples/#74.open-popup-markercluster-from-outside)
73 [change-tile-style-when-click](https://tomickigrzegorz.github.io/leaflet-examples/#73.change-tile-style-when-click)
72 [add-rectangle-over-click-tiles](https://tomickigrzegorz.github.io/leaflet-examples/#72.add-rectangle-over-click-tiles)
71 [text-below-a-marker](https://tomickigrzegorz.github.io/leaflet-examples/#71.text-below-a-marker)
70 [polygon-with-gradien](https://tomickigrzegorz.github.io/leaflet-examples/#70.polygon-with-gradien)
69 [simple-jump-marker](https://tomickigrzegorz.github.io/leaflet-examples/#69.simple-jump-marker)
68 [popup-in-a-fixed-position](https://tomickigrzegorz.github.io/leaflet-examples/#68.popup-in-a-fixed-position)
67 [add-data-attribute-to-marker](https://tomickigrzegorz.github.io/leaflet-examples/#67.add-data-attribute-to-marker)
66 [leaflet-geoman](https://tomickigrzegorz.github.io/leaflet-examples/#66.leaflet-geoman)
65 [marker-slide-to](https://tomickigrzegorz.github.io/leaflet-examples/#65.marker-slide-to)
64 [autocomplete-with-geojson](https://tomickigrzegorz.github.io/leaflet-examples/#64.autocomplete-with-geojson)
63 [leaflet-routing-machine](https://tomickigrzegorz.github.io/leaflet-examples/#63.leaflet-routing-machine)
62 [count-markers](https://tomickigrzegorz.github.io/leaflet-examples/#62.count-markers)
61 [bind-more-popups-to-the-same-marker](https://tomickigrzegorz.github.io/leaflet-examples/#61.bind-more-popups-to-the-same-marker)
60 [great-circle](https://tomickigrzegorz.github.io/leaflet-examples/#60.great-circle)
59 [sidebar-replacing-popup](https://tomickigrzegorz.github.io/leaflet-examples/#59.sidebar-replacing-popup)
58 [control-layers-outside-the-map](https://tomickigrzegorz.github.io/leaflet-examples/#58.control-layers-outside-the-map)
57 [create-additional-control-placeholders](https://tomickigrzegorz.github.io/leaflet-examples/#57.create-additional-control-placeholders)
56 [sidebar](https://tomickigrzegorz.github.io/leaflet-examples/#56.sidebar)
55 [follow-mouse](https://tomickigrzegorz.github.io/leaflet-examples/#55.follow-mouse)
54 [contextmenu](https://tomickigrzegorz.github.io/leaflet-examples/#54.contextmenu)
53 [create-and-save-geojson](https://tomickigrzegorz.github.io/leaflet-examples/#53.create-and-save-geojson)
52 [full-project](https://tomickigrzegorz.github.io/leaflet-examples/#52.full-project)
51 [tabs-in-popup](https://tomickigrzegorz.github.io/leaflet-examples/#51.tabs-in-popup)
50 [autocomplete-on-map-button](https://tomickigrzegorz.github.io/leaflet-examples/#50.autocomplete-on-map-button))
49 [location-button](https://tomickigrzegorz.github.io/leaflet-examples/#49.location-button)
48 [tiles-gray](https://tomickigrzegorz.github.io/leaflet-examples/#48.tiles-gray)
47 [random-marker-in-map-bounds](https://tomickigrzegorz.github.io/leaflet-examples/#47.random-marker-in-map-bounds)
46 [checking-if-the-marker-is-in-viewport](https://tomickigrzegorz.github.io/leaflet-examples/#46.checking-if-the-marker-is-in-viewport)
45 [multi-layer-search](https://tomickigrzegorz.github.io/leaflet-examples/#45.multi-layer-search)
44 [data-on-sidebar](https://tomickigrzegorz.github.io/leaflet-examples/#44.data-on-sidebar)
43 [image-on-map](https://tomickigrzegorz.github.io/leaflet-examples/#43.image-on-map)
42 [scale](https://tomickigrzegorz.github.io/leaflet-examples/#42.scale)
41 [back-to-home-button](https://tomickigrzegorz.github.io/leaflet-examples/#41.back-to-home-button)
40 [distance-between-cities-on-map](https://tomickigrzegorz.github.io/leaflet-examples/#40.distance-between-cities-on-map)
39 [coordinates-of-the-center-of-the-visible-map](https://tomickigrzegorz.github.io/leaflet-examples/#39.coordinates-of-the-center-of-the-visible-map)
38 [part-of-the-common](https://tomickigrzegorz.github.io/leaflet-examples/#38.part-of-the-common)
37 [enlarge-a-polygon-box-by-5%](https://tomickigrzegorz.github.io/leaflet-examples/#37.enlarge-a-polygon-box-by-5-percent)
36 [story-maps-IntersectionObserver](https://tomickigrzegorz.github.io/leaflet-examples/#36.story-maps-IntersectionObserver)
35 [marker-draggable-on-a-click](https://tomickigrzegorz.github.io/leaflet-examples/#35.marker-draggable-on-a-click)
34 [multiple-tile-layers](https://tomickigrzegorz.github.io/leaflet-examples/#34.multiple-tile-layers)
33 [location](https://tomickigrzegorz.github.io/leaflet-examples/#33.location)
32 [image-icons-prev-next](https://tomickigrzegorz.github.io/leaflet-examples/#32.image-icons-prev-next)
31 [awesome-markers](https://tomickigrzegorz.github.io/leaflet-examples/#31.Leaflet.awesome-markers)
30 [mini-map](https://tomickigrzegorz.github.io/leaflet-examples/#30.mini-map)
29 [linked-view](https://tomickigrzegorz.github.io/leaflet-examples/#29.linked-view)
28 [adding-map-description](https://tomickigrzegorz.github.io/leaflet-examples/#28.adding-map-description)
27 [fullscreen](https://tomickigrzegorz.github.io/leaflet-examples/#27.fullscreen)
26 [markers-60K](https://tomickigrzegorz.github.io/leaflet-examples/#26.markers-60K)
25 [fitBounds-with-padding](https://tomickigrzegorz.github.io/leaflet-examples/#25.fitBounds-with-padding)
24 [polyline](https://tomickigrzegorz.github.io/leaflet-examples/#24.polyline)
23 [custom-marker-and-popup](https://tomickigrzegorz.github.io/leaflet-examples/#23.custom-marker-and-popup)
22 [center-map-when-click-marker](https://tomickigrzegorz.github.io/leaflet-examples/#22.center-map-when-click-marker)
21 [geocoding-addresses-search-engine-outside-the-map](https://tomickigrzegorz.github.io/leaflet-examples/#21.geocoding-addresses-search-engine-outside-the-map)
20 [maxBound-map-restricts-the-view](https://tomickigrzegorz.github.io/leaflet-examples/#20.maxBound-map-restricts-the-view)
19 [custom-button](https://tomickigrzegorz.github.io/leaflet-examples/#19.custom-button)
18 [add-move-and-delete-marker](https://tomickigrzegorz.github.io/leaflet-examples/#18.add-move-and-delete-marker)
17 [TileLayer](https://tomickigrzegorz.github.io/leaflet-examples/#17.tileLayer)
16 [geoJson-extended-action](https://tomickigrzegorz.github.io/leaflet-examples/#16.geoJson-extended-action)
15 [geoJson-simple](https://tomickigrzegorz.github.io/leaflet-examples/#15.geoJson-simple)
14 [dragable-markers](https://tomickigrzegorz.github.io/leaflet-examples/#14.dragable-markers)
13 [svg-markers-width-legends](https://tomickigrzegorz.github.io/leaflet-examples/#13.svg-markers-width-legends)
12 [controling-polygons](https://tomickigrzegorz.github.io/leaflet-examples/#12.controling-polygons)
11 [controlling-the-map-from-outside-the-map](https://tomickigrzegorz.github.io/leaflet-examples/#11.controlling-the-map-from-outside-the-map)
10 [matching-all-markers-to-the-map-view](https://tomickigrzegorz.github.io/leaflet-examples/#10.matching-all-markers-to-the-map-view)
09 [marker-grouping-markercluster-plugin](https://tomickigrzegorz.github.io/leaflet-examples/#09.marker-grouping-markercluster-plugin)
08 [controlling-different-groups-of-markers](https://tomickigrzegorz.github.io/leaflet-examples/#08.controlling-different-groups-of-markers)
07 [image-instead-of-map](https://tomickigrzegorz.github.io/leaflet-examples/#07.image-instead-of-map)
06 [coordinates-of-the-visible-map](https://tomickigrzegorz.github.io/leaflet-examples/#06.coordinates-of-the-visible-map)
05 [coordinates-after-clicking-on-the-map](https://tomickigrzegorz.github.io/leaflet-examples/#05.coordinates-after-clicking-on-the-map)
04 [many-markers](https://tomickigrzegorz.github.io/leaflet-examples/#04.many-markers)
03 [adding-one-marker](https://tomickigrzegorz.github.io/leaflet-examples/#03.adding-one-marker)
02 [changing-locate-zoom-control](https://tomickigrzegorz.github.io/leaflet-examples/#02.changing-locate-zoom-control)
01 [simple-map](https://tomickigrzegorz.github.io/leaflet-examples/#01.simple-map)