From 41c490d2e889dfef33914e3688d314c02c906f66 Mon Sep 17 00:00:00 2001 From: "David V. Lu" Date: Thu, 30 Nov 2023 13:07:31 -0500 Subject: [PATCH] Refactor Map Javascript --- map.html | 51 +++++++-------------------- rosmap.css | 17 +++++++++ rosmap.js | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 131 insertions(+), 39 deletions(-) create mode 100644 rosmap.css create mode 100644 rosmap.js diff --git a/map.html b/map.html index 402ec28..2420474 100644 --- a/map.html +++ b/map.html @@ -4,50 +4,20 @@ ROS Users of the World - - - + + + - - + - +
@@ -71,5 +41,8 @@

ROS Users of the World

+ + diff --git a/rosmap.css b/rosmap.css new file mode 100644 index 0000000..fdf6618 --- /dev/null +++ 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 new file mode 100644 index 0000000..b75bfc3 --- /dev/null +++ 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();