Refactor Map Javascript (#236)

DLu · Nov 30, 2023 · d2ff279 · d2ff279
1 parent e8ae478
commit d2ff279
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 39 deletions.
diff --git a/map.html b/map.html
@@ -4,50 +4,20 @@
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
     <meta charset="utf-8" />
     <title>ROS Users of the World</title>
-    <link href="http://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet" type="text/css" />
-    <style>
-      html,
-      body {
-        font-family: "Titillium Web", sans-serif;
-      }
-      #map-canvas {
-        height: 100%;
-        width: 80%;
-        position: absolute;
-        right: 0%;
-      }
-      #text {
-        height: 100%;
-        width: 15%;
-        position: absolute;
-        left: 0%;
-        padding: 50px;
-      }
-      table {
-        border: 1px solid LightGray;
-        border-collapse: collapse;
-      }
-    </style>
-    <script src="http://www.metrorobots.com/analytics.js"></script>
+    <link href="http://fonts.googleapis.com/css?family=Overpass" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" type="text/css" href="rosmap.css" />
+    <script src="https://kit.fontawesome.com/bf045d01fa.js"></script>
     <script
-      async
-      defer
-      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq02Y_R42xhDQa4n4Fr_9H3M_az7XO4gM&callback=initialize"
+      src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"
+      integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
     ></script>
-    <script>
-      function initialize() {
-        var map = new google.maps.Map(document.getElementById("map-canvas"), { zoom: 2, center: { lat: 0, lng: 140 } });
-        new google.maps.KmlLayer("http://www.metrorobots.com/scripts/generate_kml.py", {
-          preserveViewport: true,
-          map: map,
-        });
-      }
-    </script>
-    <!-- add jQuery -->
+    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-    <!-- add pie chart -->
     <script src="src/ocanvas-2.7.3.min.js"></script>
     <script src="src/pie.js"></script>
+    <script src="rosmap.js" type="module"></script>
   </head>
   <body>
     <div id="text">
@@ -71,5 +41,8 @@ <h1>ROS Users of the World</h1>
       </p>
     </div>
     <div id="map-canvas"></div>
+    <!-- prettier-ignore -->
+    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
+        ({key: "AIzaSyAq02Y_R42xhDQa4n4Fr_9H3M_az7XO4gM", v: "weekly"});</script>
   </body>
 </html>
diff --git a/rosmap.css b/rosmap.css
@@ -0,0 +1,17 @@
+html,
+body {
+  font-family: Overpass, sans-serif;
+}
+#map-canvas {
+  height: 100%;
+  width: 80%;
+  position: absolute;
+  right: 0%;
+}
+#text {
+  height: 100%;
+  width: 15%;
+  position: absolute;
+  left: 0%;
+  padding: 50px;
+}
diff --git a/rosmap.js b/rosmap.js
@@ -0,0 +1,102 @@
+const icons = {
+  school: "fa-school",
+  company: "fa-building",
+  "research institute": "fa-flask",
+  "user group": "fa-users",
+  individual: "fa-user-circle",
+};
+const colors = {
+  school: "#62af44",
+  company: "#4186f0",
+  "research institute": "#db4436",
+  "user group": "#232e4a",
+  individual: "#ffdd5e",
+};
+
+function createInfoWindow(location) {
+  const div = document.createElement("div");
+  const head = document.createElement("h3");
+  head.textContent = location.name;
+  head.classList.add("infohead");
+  div.appendChild(head);
+
+  const head2 = document.createElement("h5");
+  head2.textContent = location.type;
+  head2.classList.add("infosubhead");
+  div.appendChild(head2);
+
+  if (location.address) {
+    const add = document.createElement("div");
+    add.classList.add("infoadd");
+    add.textContent = location.address;
+    div.appendChild(add);
+  }
+
+  if (location.description) {
+    const desc = document.createElement("div");
+    desc.classList.add("infodesc");
+    desc.textContent = location.description;
+    div.appendChild(desc);
+  }
+
+  if (location.link) {
+    div.appendChild(document.createElement("br"));
+    const link = document.createElement("a");
+    link.href = location.link;
+
+    const linkicon = document.createElement("i");
+    linkicon.classList.add("fas");
+    linkicon.classList.add("fa-external-link-alt");
+    link.appendChild(linkicon);
+
+    div.appendChild(link);
+  }
+  return div;
+}
+
+async function initialize() {
+  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
+  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
+
+  var map = new Map(document.getElementById("map-canvas"), { mapId: "rosmap", zoom: 2, center: { lat: 0, lng: 20 } });
+  const infoWindow = new google.maps.InfoWindow({
+    content: "",
+    disableAutoPan: true,
+  });
+  var regions = ["america", "asia", "australia", "europe", "africa"];
+  var regions_loaded = 0;
+  const markers = [];
+  for (var region of regions) {
+    $.get("https://raw.githubusercontent.com/DLu/ros_map/main/data/" + region + ".yaml").done(function (data) {
+      var locations = jsyaml.load(data);
+      for (var location of locations) {
+        const pin = { title: location.name, glyphColor: "white", scale: 1.5 };
+        const icon = document.createElement("div");
+        icon.classList.add("fas");
+        icon.classList.add(icons[location.type] || "fa-globe");
+        pin.background = colors[location.type] || "purple";
+        pin["glyph"] = icon;
+
+        const pinGlyph = new google.maps.marker.PinElement(pin);
+
+        const marker = new google.maps.marker.AdvancedMarkerElement({
+          map,
+          position: { lat: location.lat, lng: location.long },
+          content: pinGlyph.element,
+        });
+        marker.ros_data = location;
+        marker.addListener("click", () => {
+          infoWindow.setContent(createInfoWindow(marker.ros_data));
+          infoWindow.open(map, marker);
+        });
+        markers.push(marker);
+      }
+      regions_loaded++;
+      if (regions_loaded == regions.length) {
+        const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });
+      }
+    });
+  }
+}
+
+initialize();