Interactive Map: Difference between revisions

Revision as of 20:49, 25 November 2025

{{#datamap: type=leaflet |zoom=7 |center=41.05,29.0 |width=100% |height=450px |markers=

 41.12,29.04 | label=Marker A | popup=This is A;
 41.02,29.10 | label=Marker B | popup=This is B;

|shapes=

 circle | 41.04,29.02 | radius=3000 | color=green;
 polygon |
   41.01,28.98;
   41.03,28.96;
   41.04,28.99
 | color=purple;

}}

@@ Line 1: / Line 1: @@
-<div id="irontideMap" style="width: 100%; height: 600px; border: 2px solid black; border-radius: 12px;"></div>
+{{#datamap:
+type=leaflet
-<htmltag tagname="script">
+|zoom=7
-  // Initialize the map
+|center=41.05,29.0
-  var map = L.map('irontideMap').setView([51.505, -0.09], 3); // adjust coords & zoom
+|width=100%
+|height=450px
-  // Add a tile layer (dark theme)
+|markers=
-   L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+.12,29.04 | label=Marker A | popup=This is A;
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/">CARTO</a>',
+.02,29.10 | label=Marker B | popup=This is B;
-      subdomains: 'abcd',
+|shapes=
-      maxZoom: 19
+   circle | 41.04,29.02 | radius=3000 | color=green;
-  }).addTo(map);
+   polygon |
+.01,28.98;
-   // Example marker
+.03,28.96;
-  var marker = L.marker([51.505, -0.09]).addTo(map)
+.04,28.99
-      .bindPopup('<b>Imperial Keep</b><br>Key starting location.')
+   | color=purple;
-      .openPopup();
+}}
-   // Example circle
-  var circle = L.circle([51.51, -0.1], {
-      color: 'red',
-      fillColor: '#f03',
-      fillOpacity: 0.5,
-      radius: 50000
-  }).addTo(map).bindPopup('Danger zone');
-  // Example polygon
-   var polygon = L.polygon([
-      [51.52, -0.12],
-      [51.53, -0.07],
-      [51.51, -0.05]
-   ], {
-      color: 'gold',
-      fillColor: '#FFD700',
-      fillOpacity: 0.3
-  }).addTo(map).bindPopup('Elven Forest');
-</htmltag>