1  <dialog id="mapModal">
 2  	<div class="mapContainer">
 3  	    <div id="modalMap"></div>
 4  	</div>
 5  </dialog>
 6  <script>
 7  {
 8      let map = L.map('modalMap')
 9      L.modalMap = map
10  
11      // Initialize the layerMap if it doesn't exist
12      L.layerMap = L.layerMap || {}
13  
14      // For each place in the markers list, add it as a layer
15      // if it does not already exist.
16      marker_string = '{{& markers }}'
17      let places = {}
18  
19      if (marker_string !== "") {
20          places = JSON.parse(marker_string)
21      }
22  
23      for (const [name, properties] of Object.entries(places)) {
24  	//console.log('props', name, properties)
25          const marker = L.marker(properties.coords)
26          marker.on('click', () => map.flyTo(properties.coords, 17))
27  	    marker.bindPopup(`<h4 style="text-align: center; margin-bottom: 0">${properties.display_name}</h4><br><a class="button" href="${properties.url}">Details</a>`)
28          L.layerMap[name] = marker.addTo(map)
29      }
30  
31      const initialView = [43.354050,-80.340883];
32      //const cafeMarker = L.marker(initialView)
33      //cafeMarker.addTo(map)
34      map.setView(initialView, 13)
35      
36      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
37          attribution: `&copy;<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>,
38          &copy;<a href="https://carto.com/attributions" target="_blank">CARTO</a>`,
39          subdomains: 'abcd',
40          maxzoom: 20,
41      }).addTo(map);
42  
43      // Close the modal when the backdrop is clicked
44      backdrop = me('#mapModal')
45      backdrop.on('click', (e) => {
46          if (e.target === backdrop) {
47              backdrop.close()
48          } else {
49              // We don't actually need this until we have a "Find Me" button
50              //map.locate({ setView: true, maxZoom: 16 });
51          }
52      })
53  }
54  
55  </script>
56  
57  <style>
58  #mapModal {
59      width: min(800px, 80vw);
60      height: min(600px, 80vh);
61  }
62  
63  .mapContainer {
64      height: min(600px, 80vh);
65      width: 100%;
66      margin: auto;
67      border-radius: 1em;
68      padding: 1em;
69      background: white;
70  }
71  
72  #modalMap {
73      height: 100%;
74      width: 100%;
75      border-radius: 0.5em;
76  }
77  </style>