Home / Mobile / Leaflet – Mobile Friendly Maps
Leaflet – Mobile Friendly Maps

Leaflet – Mobile Friendly Maps

Download Demo
  • Overview
  • Documents
User Rating: 4.6/5 ( 2 votes)
Your Rating:

Leaflet is an open source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin of MapBox with a team of dedicated contributors. Weighing just about 30 KB of gzipped JS code, it has all the features most developers ever need for online maps.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

 

Leaflet Features

Leaflet doesn't try to do everything for everyone. Instead it focuses on making the basic things work perfectly. It should still satisfy the needs of the vast majority of map apps developers while being easily extended by third-party plugins.


Available Map Layers

  • Tile layers
  • Markers
  • Popups
  • Vector layers: polylines, polygons, circles, rectangles, circle markers
  • GeoJSON layers
  • Image overlays
  • WMS layers
  • Layer groups

Interaction Features

General

  • Drag panning with inertia

On Desktop Browsers

  • Scroll wheel zoom
  • Double click zoom
  • Zoom to area (shift-drag)
  • Keyboard navigation(with arrows and +/- keys)

On Mobile Browsers

  • Multi-touch zoom(iOS, Android 4+, Win8)
  • Double tap zoom

For Layers

  • Various events: click (tap), mouseover, contextmenu, etc.
  • Marker dragging

Visual Features

  • Zoom animation (for all layers, including tile layers, markers and vector layers)
  • Panning animation
  • Smooth continuous zoom on modern mobile devices
  • Tile and popup fade animation
  • Very nice default design for markers, popups and other map controls
  • Retina resolution support for tile layers and markers

Customization Features

  • Pure CSS3 popups and controls for easy restyling
  • Image- and HTML-based markers
  • A simple interface for implementing custom map layers
  • The same for custom map controls
  • Custom map projections (with EPSG:4326, EPSG:3857and EPSG:3395 out of the box)
  • Powerful OOP facilities for extending existing classes

     

Performance Features

  • Hardware acceleration on iOS (and other modern browsers) makes it feel as smooth as native apps
  • Utilizing CSS3 features like Transitions, Transforms, requestAnimationFrame where possible to make panning and zooming really smooth
  • Smart polyline/polygon rendering with dynamic clipping and simplification makes it responsive even when displaying objects with thousands of points
  • Modular design and a build system allow you to reduce the library size by leaving out features you don't need
  • Tap delay elimination on mobile devices makes controls and layers respond to taps immediately

Map Controls

  • Zoom buttons
  • Attribution
  • Layer switcher
  • Scale

Browser Support

On Desktop

  • Chrome
  • Firefox
  • Safari 5+
  • Opera 12+
  • IE 7–11

On Mobile

  • Safari for iOS 3–7+
  • Android browser 2.2+, 3.1+, 4+
  • Chrome for Android 4+ and iOS
  • Firefox for Android
  • Other WebKit browsers(webOS, Blackberry 7+, etc.)
  • IE10/11 for Win8 devices

Misc

  • Extremely lightweight — around 34 KB of gzipped JS code
  • No external dependencies
  • Keeps your JS environment clean — no global or native prototypes pollution

 

Scroll To Top