Free Map Integration - Leaflet.js with OpenStreetMap tiles - Display multiple point locations as map markers - Plot multiple points on Map view - Display multiple point locations as map markers

Here is the documantation https://leafletjs.com/examples/quick-start/

Code snippet (Download full code from here):

<script src="//code.jquery.com/jquery-3.6.1.min.js"></script> <link rel="stylesheet" href="leaflet.css" /> <script src="leaflet.js"></script> <!-- https://leafletjs.com --> <div id="leaflet-js-map"></div> <div> <button id="moveToPoint">Move to specific point</button> </div> <script type="text/javascript"> const map = L.map('leaflet-js-map').setView([46.241226, 6.051737], 14); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 0, maxZoom: 18, attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(map); const leafletMarkers = L.layerGroup([ new L.marker([46.233226, 6.055737]), new L.marker([46.2278, 6.0510]), new L.marker([46.23336, 6.0471]) ]); leafletMarkers.addTo(map); var LeafIcon = L.Icon.extend({ options: { shadowUrl: 'images/leaf-shadow.png', iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] } }); var greenIcon = new LeafIcon({iconUrl: 'images/leaf-green.png'}), redIcon = new LeafIcon({iconUrl: 'images/leaf-red.png'}), orangeIcon = new LeafIcon({iconUrl: 'images/leaf-orange.png'}); L.icon = function (options) { return new L.Icon(options); }; L.marker([46.234226, 6.055737], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf."); L.marker([46.237226, 6.052737], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf."); L.marker([46.240226, 6.065737], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf."); [{T: 46.249226, N: 6.056937, D: '1'}, {T: 46.250226, N: 6.066937, D: '2'}].forEach(function (t) { const el = document.createElement('div'); L.marker([t.T, t.N]).addTo(map).on("click", function () { console.log(this); var popup = L.popup() .setLatLng(this._latlng) .setContent('<p>Hello world!<br />This is a nice popup-' + t.D + '</p>') .openOn(map); }) }); $("#moveToPoint").on("click", function () { map.flyTo(L.latLng(46.249226, 6.056937), 15); const popUps = document.getElementsByClassName('leaflet-popup'); if (popUps[0]) popUps[0].remove(); L.popup() .setLatLng(L.latLng(46.250226, 6.056937)) .setContent('<p>Hello world!<br />This is a nice popup-Self</p>') .openOn(map); }); </script> <style type="text/css"> #leaflet-js-map { width: 100%; height: 500px; } </style>

Output is as below: