Leaflet - a JavaScript library for interactive maps If you find some feature really missing in Leaflet, first check if there's a plugin for it and if it's been discussed before already on GitHub issues If not, please open a new GitHub issue Getting Involved Let's create the best mapping library in the world!
Documentation - Leaflet - a JavaScript library for interactive maps Option Type Default Description; closePopupOnClick: Boolean: true: Set it to false if you don't want popups to close when user clicks the map : boxZoom: Boolean: true: Whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing the shift key
Using GeoJSON with Leaflet - Leaflet - a JavaScript library for . . . About GeoJSON According to GeoJSON Specification (RFC 7946): GeoJSON is a format for encoding a variety of geographic data structures […] A GeoJSON object may represent a region of space (a Geometry), a spatially bounded entity (a Feature), or a list of Features (a FeatureCollection)
Markers With Custom Icons - Leaflet - a JavaScript library for . . . Preparing the images To make a custom icon, we usually need two images — the actual icon image and the image of its shadow For this tutorial, we took the Leaflet logo and created four images out of it — 3 leaf images of different colors and one shadow image for the three:
Tutorials - Leaflet - a JavaScript library for interactive maps Leaflet Quick Start Guide A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with OpenStreetMap tiles) on your page, working with markers, polylines and popups, and dealing with events
Interactive Choropleth Map - Leaflet - a JavaScript library for . . . ← Tutorials Interactive Choropleth Map This is a case study of creating a colorful interactive choropleth map of US States Population Density with the help of GeoJSON and some custom controls (that will hopefully convince all the remaining major news and government websites that do not use Leaflet yet to start doing so) The tutorial was inspired by the Texas Tribune US Senate Runoff
Leaflet on Mobile - Leaflet - a JavaScript library for interactive maps Preparing the page First we’ll take a look at the HTML CSS code of the page To make our map div element stretch to all available space (fullscreen), we can use the following CSS code (note: In this example we use percentage for height While vh is arguably better, due to a bug with Google Chrome on mobile ):
Plugins - Leaflet - a JavaScript library for interactive maps Plugin Description Demo Maintainer; Azure Maps Leaflet plugin: A leafletjs plugin that makes it easy to overlay all the different tile layers available from the Azure Maps Supports using an Azure Maps subscription key or Azure Active Directory for authentication