Interactive Map: Difference between revisions

@@ Line 1: / Line 1: @@
 <div id="irontideMap" style="width: 100%; height: 600px; border: 2px solid black; border-radius: 12px;"></div>
+<htmltag tagname="script">
+  // Initialize the map
+  var map = L.map('irontideMap').setView([51.505, -0.09], 3); // adjust coords & zoom
+  // Add a tile layer (dark theme)
+  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/">CARTO</a>',
+      subdomains: 'abcd',
+      maxZoom: 19
+  }).addTo(map);
+  // Example marker
+  var marker = L.marker([51.505, -0.09]).addTo(map)
+      .bindPopup('<b>Imperial Keep</b><br>Key starting location.')
+      .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>

Revision as of 16:02, 16 November 2025