Start rendering the basics of a map.

So far we have all the points showing, and are able to give detailed information on the unit and address. Future changes should hopefully allow selecting a point and then going to the unit page. Be able to pull unit information from the unit pin report #6
billnapier · Sep 5, 2023 · 66012dc · 66012dc
1 parent bacaa50
commit 66012dc
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 1 deletion.
diff --git a/main.py b/main.py
@@ -4,6 +4,7 @@
 import os
 import markdown2
 import googlemaps
+from geojson import Point, dumps, FeatureCollection, Feature
 
 
 from flask import (
@@ -39,7 +40,7 @@
 
 @app.route("/")
 def root():
-    return render_template("main.html")
+    return render_template("main.html", googlemaps_api_key=googlemaps_config.get('api_key'))
 
 
 def UnitNameToUnitType(name):
@@ -207,6 +208,20 @@ def send_email():
             units=units,
         )
 
+def _unit_to_geo_feature(unit):
+    pin_info=unit.get('pin_info')
+    return Feature(geometry=Point((pin_info.get('longitude'), pin_info.get('latitude'))), 
+                   properties=dict(name=unit.get('key'),
+                                   address_line=f'{pin_info["address_line"]}',
+                                   city=f'{pin_info["city"]}',
+                                   state=f'{pin_info["state"]}',
+                                   zip=f'{pin_info["zipcode"]}',
+                                   ))
+
+@app.route("/unit_geojson")
+def unit_geojson():
+    units = [_unit_to_geo_feature(u.to_dict()) for u in db.collection("units").stream()]
+    return dumps(FeatureCollection(units))
 
 def send_to_units(code, subject, units, send_test=False):
     for unit in units:

diff --git a/requirements.txt b/requirements.txt
@@ -1,5 +1,6 @@
 Flask==2.2.5
 firebase-admin==6.1.0
+geojson==3.0.1
 google-cloud-firestore==2.11.1
 googlemaps==4.10.0
 gunicorn==20.1.0

diff --git a/static/maps.js b/static/maps.js
@@ -0,0 +1,20 @@
+function initMap() {
+  const map = new google.maps.Map(document.getElementById("map"), {
+    zoom: 10,
+    center: { lat: 37.333438, lng: -121.909562 },
+  });
+
+  map.data.loadGeoJson('unit_geojson')
+
+  map.data.setStyle(function(feature) {
+    return {
+      title: feature.getProperty('name'),
+    }});
+
+  map.data.addListener('mouseover', function(event) {
+    document.getElementById('info-box').innerHTML = 
+        event.feature.getProperty('name') + '<br>' + event.feature.getProperty('address_line') + ' ' + event.feature.getProperty('city') + " " + event.feature.getProperty('state') + " " + event.feature.getProperty('zip')
+  });
+}
+
+window.initMap = initMap;
diff --git a/templates/main.html b/templates/main.html
@@ -1,4 +1,14 @@
 <HTML>
+<head>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+    <script type="module" src="{{url_for('static', filename='maps.js')}}"></script>
+    <style>
+#map {
+  height: 50%;
+  width: 50%;
+}
+</style>
+</head>
 
 <BODY>
     <ul>
@@ -18,6 +28,13 @@ <H1>Upload Unit Pin CSV</H1>
         Choose a file to upload: <input name="file" type="file" />
         <input type="submit" value="Upload File" />
     </form>    
+
+   <div id="map"></div>
+   <div id="info-box"></div>
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key={{googlemaps_api_key}}&callback=initMap&v=weekly"
+      defer
+    ></script>
 </BODY>
 
 </HTML>