Leaflet

Leaflet is a lightweight and versatile JavaScript library for interactive maps, widely used for web applications. It supports various tile layers, markers, popups, and geolocation features, making it an excellent choice for building customizable maps. To integrate Leaflet into your project, include the Leaflet library and use its API to create dynamic and user-friendly maps.

Install from NPM

Install the Leaflet Maps JavaScript API in your project by including the following script tag in your HTML file:

npm install leaflet --save

Add the leaflet css file link.

<link src="assets/libs/leaflet/leaflet.css"></link>

Add the leaflet js file link.

<script src="assets/libs/leaflet/leaflet.js"></script>

Below the example how to use the package and make it working ApexTree on any page.

HTML:

<div class="card-body">
    <div id="leaflet_map" class="min-h-320px"></div>
</div>

Javascript:

// Function to initialize maps
function initializeMap(mapId, coords) {
    const map = L.map(mapId).setView(coords, 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(map);
    return map;
}

// Initialize maps
const map1 = initializeMap('leaflet_map', [51.505, -0.09]);