Leaflet

Leaflet is an open source JavaScript library used to build web mapping applications. First released in 2011, it supports most mobile and desktop platforms, supporting HTML5 and CSS3. Among its users are FourSquare, Pinterest and Flickr. Leaflet allows developers without a GIS background to very easily display tiled web maps hosted on a public server, with optional tiled overlays. It can load feature data from GeoJSON files, style it and create interactive layers, such as markers with popups when clicked. It is developed by Volodymyr Agafonkin, who joined Mapbox in 2013. A typical use of Leaflet involves binding a Leaflet "map" element to an HTML element such as a div. Layers and markers are then added to the map element.

Leaflet Map Example

#map { height: 250px; width: 400px; border: 1px solid gray; }

// Initialize the map var map = L.map('map').setView([51.505, -0.09], 13); // Add the tile layer (you can choose a different map style by changing the URL) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Add a circle overlay with a specific radius and color var circle = L.circle([51.508, -0.11], { color: 'red', radius: 500 // Radius in meters }).addTo(map); // Add a marker with a popup var marker = L.marker([51.5, -0.09]).addTo(map) bindPopup('Hello World! I am a popup.');

In this code sample, the Leaflet library itself is accessible through the variable L. Leaflet supports Web Map Service (WMS) layers, GeoJSON layers, Vector layers and Tile layers natively. Many other types of layers are supported via plugins.