Installation
Leaflet is installed via NPM as a third-party dependency by referring to
package.json
.
During the
Theme Installation
process,
it is compiled by the
Build Tools
into the
/dist/assets/vendors/leaflet
directory (leaflet.bundle.css and leaflet.bundle.js).
Optionally,
esri-leaflet
and
esri-leaflet-geocoder
are included in the same bundle for geocoding.
Require Assets
To use Leaflet in your pages, include the following CSS and script in the order shown.
<!DOCTYPE html>
<html>
<head>
<!--Vendor styles -->
<link href="/dist/assets/vendors/leaflet/leaflet.bundle.css" rel="stylesheet"/>
<!--Core styles-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<div id="map" style="height: 400px;">
</div>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!--Vendor script -->
<script src="/dist/assets/vendors/leaflet/leaflet.bundle.js">
</script>
<!--Custom script -->
<script src="/dist/assets/pages/plugins/leaflet/basic-map.js">
</script>
</body>
</html>
Basic Map
A simple Leaflet map with a tile layer (OpenStreetMap), center, and zoom. Uses
L.map
,
L.tileLayer
per the
Leaflet API reference
.
class KTExampleLeafletBasicMap {
static init() {
const element = document.getElementById('leaflet_basic_map');
if (!element || typeof L === 'undefined') return;
const map = L.map(element, {
center: [40.7128, -74.006],
zoom: 12,
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'©
<a href="https://www.openstreetmap.org/copyright">
OpenStreetMap
</a>
contributors',
}).addTo(map);
}
}
KTDom.ready(() => {
KTExampleLeafletBasicMap.init();
});
<div class="rounded-lg overflow-hidden" id="leaflet_basic_map" style="height: 320px;">
</div>
Markers and Popups
Markers with popups using
L.marker
and
bindPopup
. Optional custom icon via
L.divIcon
.
class KTExampleLeafletMarkersPopups {
static init() {
const element = document.getElementById('leaflet_markers_popups_map');
if (!element || typeof L === 'undefined') return;
const map = L.map(element, {
center: [40.7128, -74.006],
zoom: 13,
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'©
<a href="https://www.openstreetmap.org/copyright">
OpenStreetMap
</a>
contributors',
}).addTo(map);
const icon = L.divIcon({
html: '
<i class="ki-solid ki-geolocation text-2xl text-primary">
</i>
',
iconAnchor: [12, 24],
popupAnchor: [0, -24],
className: 'leaflet-marker',
});
L.marker([40.7128, -74.006], { icon })
.addTo(map)
.bindPopup('
<strong>
New York
</strong>
<br/>
Sample marker with popup.')
.openPopup();
L.marker([40.72, -73.99], { icon })
.addTo(map)
.bindPopup('
<strong>
Brooklyn
</strong>
<br/>
Another marker.');
}
}
KTDom.ready(() => {
KTExampleLeafletMarkersPopups.init();
});
<div class="rounded-lg overflow-hidden" id="leaflet_markers_popups_map" style="height: 320px;">
</div>
Polylines and Polygons
class KTExampleLeafletPolylinesPolygons {
static init() {
const element = document.getElementById('leaflet_polylines_polygons_map');
if (!element || typeof L === 'undefined') return;
const map = L.map(element, {
center: [40.7128, -74.006],
zoom: 12,
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'©
<a href="https://www.openstreetmap.org/copyright">
OpenStreetMap
</a>
contributors',
}).addTo(map);
// Polyline path entirely inside the highlight rectangle (SW–NE diagonal)
const polylineLatLngs = [
[40.722, -74.015], // west side of rectangle
[40.73, -73.995], // center
[40.738, -74.005], // east side of rectangle
];
const polyline = L.polyline(polylineLatLngs, {
color: '#009ef7',
weight: 4,
});
// Rectangle: SW → SE → NE → NW (clockwise), then close
const polygonLatLngs = [
[40.72, -74.02], // SW
[40.72, -73.98], // SE
[40.74, -73.98], // NE
[40.74, -74.02], // NW
[40.72, -74.02], // close
];
const polygon = L.polygon(polygonLatLngs, {
color: '#009ef7',
fillColor: '#009ef7',
fillOpacity: 0.25,
weight: 2,
});
const featureGroup = L.featureGroup([polyline, polygon]).addTo(map);
map.fitBounds(featureGroup.getBounds(), { padding: [24, 24] });
}
}
KTDom.ready(() => {
KTExampleLeafletPolylinesPolygons.init();
});
<div class="rounded-lg overflow-hidden" id="leaflet_polylines_polygons_map" style="height: 320px;">
</div>
