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: 5 days ago
JSON representation

:maple_leaf: A collection of examples of leaflet map usage

• Host: GitHub
• URL: https://github.com/tomickigrzegorz/leaflet-examples
• Owner: tomickigrzegorz
• License: mit
• Created: 2020-06-14T16:26:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-06-23T21:40:29.000Z (5 months ago)
• Last Synced: 2024-08-02T19:38:57.380Z (3 months ago)
• Topics: coordinates, demo, geocoding, geojson, leaflet-map, markers, polygons, tilelayer
• Language: JavaScript
• Homepage: https://tomickigrzegorz.github.io/leaflet-examples/
• Size: 4.6 MB
• Stars: 394
• Watchers: 17
• Forks: 69
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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:.

78 [calculate-area](https://tomickigrzegorz.github.io/leaflet-examples/#78.calculate-area)  

77 [arrow-marked-lines](https://tomickigrzegorz.github.io/leaflet-examples/#77.arrow-marked-lines)  

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)