leaflet-tactical-markers
Version:
Display DV102 Tactical Markers on a Leaflet Map
54 lines (42 loc) • 1.74 kB
HTML
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<!-- <script type="module" src="./src/TacticalMarkers.js"></script> -->
</head>
<body>
<div id="map" style="height: 100%"></div>
<script type="module">
// import { TacticalMarker, TacticalIcon } from "./src/TacticalMarkers.js";
import { TacticalMarker, TacticalIcon } from "https://cdn.jsdelivr.net/npm/leaflet-tactical-markers/+esm";
let map = L.map('map').setView([51.505, -0.09], 13);
let osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
let baseMaps = {
"OpenStreetMap": osm,
};
const tz_spec = {
grundzeichen: "kraftfahrzeug-gelaendegaengig",
organisation: "feuerwehr",
fachaufgabe: "brandbekaempfung",
einheit: "gruppe",
};
let icon = new TacticalIcon({tz: tz_spec});
L.marker([51.5, -0.09], {icon: icon}).bindPopup(JSON.stringify(tz_spec, null, 2)).addTo(map);
const tz_spec2 = {
grundzeichen: "person",
organisation: "feuerwehr",
funktion: "fuehrungskraft",
verwaltungsstufe: "kreis",
text: "KBI",
};
new TacticalMarker([51.52, -0.09], {tz: tz_spec2}).bindPopup(JSON.stringify(tz_spec2, null, 2)).addTo(map);
</script>
</body>
</html>