Leaflet Map

What is Leaflet Map?

Leaflet is the open-source Java Scripted, mobile-friendly interactive maps. It works efficiently on all desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API.

Features

• Map Controls
  • Zoom buttons
  • Attribution
  • Layer switcher
  • Scale
• Layers Box
  • Tile layers, WMS
  • Vector layers: polylines, polygons, circles, rectangles
  • Image overlays
  • GeoJSON
• Customization Features
  • Pure CSS3 pop-ups and controls for easy restyling
  • Image- and HTML-based markers
  • A simple interface for custom map layers and controls
  • Custom map projections
  • Powerful OOP facilities for extending existing classes

Download Leaflet

Leaflet build system is powered by the Node.js platform, which installs easily and works well across all major platforms.

• Download Leaflet
• Download and install Node

Leaflet Tutorial

Before writing any code for the map, you need to following steps on your page:

Create Leaflet Map

1. First, we’ll initialize the map and set its view to our chosen geographical coordinates.

Code: ex.-

var map = L.map('map').setView([34.05, 10.09], 15);

2. Next, add a tile layer to the map, (it’s a OpenStreetMap tile layer). Creating a tile layer usually involves setting the URL template for the tile images, the attribution text, and the maximum zoom level of the layer.

Make sure all the code is ‘div‘ and ‘leaflet.js‘.

3. Besides tile layers, you can easily add other things to your map, like markers, polylines, polygons, circles, and popups. Let’s add a marker:

Ex.- add a marker: code–

var marker = L.marker([34.05, 10.09]).addTo(map);

4. You can also create a Popups in Leaflet maps

Code: ex.-

marker.bindPopup("<b>Hello world!</b><br>The popup.").openPopup();

The ‘bindPopup’ method attaches a popup with the specified HTML content to your marker, so the popup appears when you click on the object.

The ‘openPopup’ method immediately opens the attached popup.

Leaflet on Mobile

Leaflet has a very handy shortcut for zooming the map view to the detected location on your mobile. Try it on your mobile phone: View the full example.