feat: add leaflet map ui (#291)

src/assets/static/js/pages/ui-map-leaflet.js

@@ -0,0 +1,41 @@
+// init map
+var map = L.map('map', {
+	center: [-7.7945047, 110.3803253],
+	zoom: 12
+});
+
+// set map tiles source
+var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+	attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
+	maxZoom: 18
+});
+
+var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+	attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+});
+
+// add tiles to map
+osm.addTo(map);
+
+// add marker
+var marker = L.marker([-7.8013849, 110.3647631]);
+marker.addTo(map)
+	.bindPopup('Yogyakarta, Indonesia')
+	.openPopup();
+
+// scale bar
+L.control.scale({
+	imperial: false
+}).addTo(map);
+
+// add layer control
+var baseMaps = {
+	"OSM": osm,
+	"Esri World Imagery": Esri_WorldImagery
+};
+
+var overlayMaps = {
+	"Marker": marker
+};
+
+L.control.layers(baseMaps, overlayMaps).addTo(map);

src/sidebar-items.json

@@ -322,7 +322,11 @@
       {
         "name": "JS Vector Map",
         "url": "ui-map-jsvectormap.html"
-      }
+      },
+			{
+				"name": "Leaflet Map",
+				"url": "ui-map-leaflet.html"
+			}
     ]
   },
   {

src/ui-map-leaflet.html

@@ -0,0 +1,53 @@
+{% set title = 'Leaflet Map' %}
+{% set filename = 'ui-map-leaflet.html' %}
+
+{% extends 'src/layouts/master.html' %}
+{% block content %}
+<div class="page-heading">
+	<div class="page-title">
+		<div class="row">
+			<div class="col-12 col-md-6 order-md-1 order-last">
+				<h3>Leaflet Map</h3>
+				<p class="text-subtitle text-muted">an open-source JavaScript library for mobile-friendly interactive maps.</p>
+			</div>
+			<div class="col-12 col-md-6 order-md-2 order-first">
+				<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
+					<ol class="breadcrumb">
+						<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
+						<li class="breadcrumb-item active" aria-current="page">Leaflet Map</li>
+					</ol>
+				</nav>
+			</div>
+		</div>
+	</div>
+	<section class="section">
+		<div class="row">
+			<div class="col-12">
+				<div class="card">
+					<div class="card-header">
+						<h5 class="card-title">Our Location</h5>
+					</div>
+					<div class="card-body">
+						<div id="map"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</div>
+{% endblock %}
+{% block styles %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+	integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+<style>
+	#map {
+		height: 500px;
+		width: 100%;
+	}
+</style>
+{% endblock %}
+{% block js %}
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+	integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<script src="assets/static/js/pages/ui-map-leaflet.js"></script>
+{% endblock %}