day3: polygons

marcosci · Nov 3, 2021 · 764eac2 · 764eac2
1 parent 60d4cd0
commit 764eac2
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 1 deletion.
diff --git a/src/lib/LeafletMap.svelte b/src/lib/LeafletMap.svelte
@@ -7,6 +7,7 @@
   import curiosity_path from "$lib/data/curiosity_path.json";
   import perseverance_path from "$lib/data/perseverance_path.json";
   import helicopter_path from "$lib/data/helicopter_path.json";
+  import mars_montes from "$lib/data/mars_montes.json";
 
   onMount(async () => {
     if (browser) {
@@ -212,6 +213,12 @@
         opacity: 0.65,
       };
 
+      var montesStyle = {
+        color: "#f2c693",
+        weight: 5,
+        opacity: 0.75,
+      };
+
       var curiosity_line = L.geoJSON(curiosity_path, {
         style: roverStyle,
       });
@@ -222,6 +229,24 @@
         style: heliStyle,
       });
 
+      // show name of each element of mars_poly
+      function onEachFeatures(feature, layer) {
+        layer.bindPopup(feature.properties.clean_name);
+        // change layer color
+        layer.on({
+          click: function (e) {
+            e.target.setStyle({
+              color: "#ff7800",
+            });
+          },
+        });
+      }
+
+      var mars_poly = L.geoJSON(mars_montes, {
+        style: montesStyle,
+        onEachFeature: onEachFeatures,
+      });
+
       helicopter_line.bindTooltip("Perseverance copter flight path");
       curiosity_line.bindTooltip("Curiosity rover path");
       perseverance_line.bindTooltip("Perseverance rover path");
@@ -233,16 +258,19 @@
         helicopter_line,
       ]);
 
+      var marsMontes = L.featureGroup([mars_poly]);
+
       var overlayMaps = {
         "Landing Sites": landingsites,
         Curiosity: curiosityPaths,
         Perseverance: perseverancePaths,
+        "Mars Montes": marsMontes,
       };
 
       // let s do the actual map
       const map = leaflet
         .map("map", {
-          layers: [landingsites, baseMaps.Basemap],
+          layers: [marsMontes, baseMaps.Basemap],
         })
         .setView([0, 0], 2.25);
 
@@ -276,6 +304,8 @@
           map.fitBounds(perseverancePaths.getBounds());
         } else if (e.name === "Curiosity") {
           map.fitBounds(curiosityPaths.getBounds());
+        } else if (e.name === "Mars Montes") {
+          map.fitBounds(curiosityPaths.getBounds());
         }
       });
     }