Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API.
Read the official Leaflet Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="leaflet.min.js"></script>
<link rel="stylesheet" type="text/css" href="leaflet.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/maps/map-leaflet.css">

      

2. Binding to existing DOM element.

<div class="leaflet-map" id="basic-map"></div>

      

3. Basic usage looks something like this:

var basicMap = L.map('basic-map').setView([42.35, -71.08], 10);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
maxZoom: 18
}).addTo(basicMap);

      

Refer following links for detailed documentation, configuration options, methods and examples: