refactor: ♻️ reduce the amount of dynamically generated javascript by…

… passing in a datastructure from the python bridge
qthequartermasterman · Dec 15, 2023 · e69c7fc · e69c7fc
1 parent 39a2a74
commit e69c7fc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 32 deletions.
diff --git a/render_map/map_template.html b/render_map/map_template.html
@@ -2,6 +2,7 @@
     const styleDict = {{STYLE}};
     const mapCenter = {{MAP_CENTER}};
     const mapZoom = {{MAP_ZOOM}};
+    const mapMarkers = {{MARKERS}};
 </script>
 
 <script type="text/javascript"
@@ -10,10 +11,20 @@
 ></script>
 
 <script type="text/javascript">
+    let markers = [];
+    function addMarker(mapMarker, map){
+        let marker = new google.maps.Marker({
+            position: {lat: mapMarker.latitude, lng: mapMarker.longitude},
+            map: map,
+            title: mapMarker.title,
+            icon: {url: mapMarker.icon, scaledSize: new google.maps.Size(20, 20)},
+        });
+        markers.push(marker);
+    }
+
     async function initMap() {
         // Request needed libraries.
         const { Map } = await google.maps.importLibrary("maps");
-        const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
 
         // Basic options for a simple Google Map
         const mapOptions = {
@@ -29,18 +40,16 @@
 
         // Get the HTML DOM element that will contain your map
         // We are using a div with id="map" seen below in the <body>
-        var mapElement = document.getElementById('map');
+        const mapElement = document.getElementById('map');
 
         // Create the Google Map using our element and options defined above
-        var map = new Map(mapElement, mapOptions);
-
-        // Let's also add a marker while we're at it
-        // var marker = new google.maps.Marker({
-        //     position: new google.maps.LatLng(40.6700, -73.9400),
-        //     map: map,
-        //     title: 'Snazzy!'
-        // });
-        {{MARKERS}}
+        const map = new Map(mapElement, mapOptions);
+
+        // Add markers to the map
+        for (const mapMarker of mapMarkers) {
+            addMarker(mapMarker, map);
+        }
+
     }
     window.initMap = initMap;
 </script>
diff --git a/render_map/render_map.py b/render_map/render_map.py
@@ -21,21 +21,14 @@
 MAP_TEMPLATE = MAP_TEMPLATE.replace("{{STYLE}}", json.dumps(STYLE))
 
 
-MARKER_TEMPLATE = """
-new google.maps.Marker({{
-    position: {{lat: {latitude}, lng: {longitude}}},
-    map: map,
-    title: "{title}",
-    icon: {{url:"{icon}", scaledSize: new google.maps.Size(20, 20)}},
-}});
-
-"""
 
 class GeoLink(pydantic.BaseModel):
+    model_config = pydantic.ConfigDict(use_enum_values=True)
+
     name: str
     latitude: float
     longitude: float
-    icon: map_icons.MapIcon = map_icons.MapIcon.SETTLEMENT
+    icon: map_icons.MapIcon = pydantic.Field(default=map_icons.MapIcon.SETTLEMENT, validate_default=True)
 
 GEO_LINKS: list[GeoLink] = []
 
@@ -55,17 +48,8 @@ def create_map_template(config:mkdocs.plugins.MkDocsConfig):
     map_source = map_source.replace("{{MAP_CENTER}}", json.dumps(config.extra['global_map']['center']))
     map_source = map_source.replace("{{MAP_ZOOM}}", json.dumps(config.extra['global_map']['zoom']))
     map_source = map_source.replace("{{GOOGLE_MAPS_API_KEY}}", str(config.extra["GOOGLE_MAPS_API_KEY"]))
-
-    markers_source = "".join(
-        MARKER_TEMPLATE.format(
-            latitude=geo_link.latitude,
-            longitude=geo_link.longitude,
-            title=geo_link.name,
-            icon=geo_link.icon.value,
-        )
-        for geo_link in GEO_LINKS
-    )
-    map_source = map_source.replace("{{MARKERS}}", markers_source)
+    markers = [geo_link.model_dump() for geo_link in GEO_LINKS]
+    map_source = map_source.replace("{{MARKERS}}", json.dumps(markers))
 
     return map_source