WIP: Functionality

- Introduce PinElement
- Minor javascript refactoring
- Remove icon functionality

Author: argysamo

examples/simple.py

@@ -1,21 +1,27 @@
 from flask import Flask, render_template
-from flask_googlemaps import GoogleMaps, Map, icons
+
+from flask_googlemaps import GoogleMaps, Map
+from flask_googlemaps.pin import Pin
 
 app = Flask(__name__)
 GoogleMaps(app)
 
+red = Pin(border_color="", glyph_color="",
+          background="")
+blue = Pin(border_color="blue", glyph_color="",
+           background="black")
+
 
 @app.route("/")
 def map_created_in_view():
-
     gmap = Map(
         identifier="gmap",
         varname="gmap",
         lat=37.4419,
         lng=-122.1419,
         markers={
-            icons.dots.green: [(37.4419, -122.1419), (37.4500, -122.1350)],
-            icons.dots.blue: [(37.4300, -122.1400, "Hello World")],
+            red: [(37.4419, -122.1419), (37.4500, -122.1350)],
+            blue: [(37.4300, -122.1400, "Hello World")],
         },
         style="height:400px;width:600px;margin:0;",
     )

flask_googlemaps/__init__.py

@@ -8,9 +8,9 @@
 from flask import Blueprint, g, render_template
 from markupsafe import Markup
 
-from flask_googlemaps.icons import dots, Icon
+from flask_googlemaps.pin import Pin
 
-DEFAULT_ICON = dots.red
+DEFAULT_PIN = Pin(border_color="", glyph_color="", background="")
 DEFAULT_CLUSTER_IMAGE_PATH = "static/images/m"
 
 
@@ -115,9 +115,9 @@ def build_markers(self, markers):
             raise AttributeError("markers accepts only dict, list and tuple")
 
         if isinstance(markers, dict):
-            for icon, marker_list in markers.items():
+            for pin, marker_list in markers.items():
                 for marker in marker_list:
-                    marker_dict = self.build_marker_dict(marker, icon=icon)
+                    marker_dict = self.build_marker_dict(marker, pin=pin)
                     self.add_marker(**marker_dict)
         else:
             for marker in markers:
@@ -127,17 +127,17 @@ def build_markers(self, markers):
                     marker_dict = self.build_marker_dict(marker)
                     self.add_marker(**marker_dict)
 
-    def build_marker_dict(self, marker, icon=None):
-        # type: (Union[List, Tuple], Optional[Icon]) -> Dict
+    def build_marker_dict(self, marker, pin=None):
+        # type: (Union[List, Tuple], Optional[Pin]) -> Dict
         marker_dict = {
             "lat": marker[0],
             "lng": marker[1],
-            "icon": icon or DEFAULT_ICON,
+            "pin": pin or DEFAULT_PIN,
         }
         if len(marker) > 2:
             marker_dict["infobox"] = marker[2]
         if len(marker) > 3:
-            marker_dict["icon"] = marker[3]
+            marker_dict["pin"] = marker[3]
         return marker_dict
 
     def add_marker(self, lat=None, lng=None, **kwargs):
@@ -821,7 +821,7 @@ def verify_lat_lng_coordinates(self, lat, lng):
     def js(self):
         # type: () -> Markup
         return Markup(
-            self.render("googlemaps/gmapjs.html", gmap=self, DEFAULT_ICON=DEFAULT_ICON)
+            self.render("googlemaps/gmapjs.html", gmap=self, DEFAULT_PIN=DEFAULT_PIN)
         )
 
     @property

flask_googlemaps/pin.py

@@ -0,0 +1,11 @@
+from dataclasses import dataclass
+from typing import Optional
+
+
+@dataclass(frozen=True)
+class Pin:
+    border_color: str
+    glyph_color: str
+    background: str
+    glyph: Optional[str] = None
+    scale: float = 1.0

flask_googlemaps/templates/googlemaps/gmapjs.html

@@ -1,11 +1,11 @@
 {% if not is_googlemaps_loaded() and not gmap.heatmap_layer %} {% if GOOGLEMAPS_KEY %}
-<script async src="//maps.googleapis.com/maps/api/js?key={{GOOGLEMAPS_KEY}}&map_ids={{gmap.map_ids}}&language={{gmap.language}}&region={{gmap.region}}" type="text/javascript"></script>
+<script async src="//maps.googleapis.com/maps/api/js?key={{GOOGLEMAPS_KEY}}&map_ids={{gmap.map_ids}}&language={{gmap.language}}&region={{gmap.region}}&loading=async" type="text/javascript"></script>
 {% else %}
-<script async src="//maps.googleapis.com/maps/api/js?language={{gmap.language}}&region={{gmap.region}}" type="text/javascript"></script>
+<script async src="//maps.googleapis.com/maps/api/js?language={{gmap.language}}&region={{gmap.region}}&loading=async" type="text/javascript"></script>
 {% endif %} {{ set_googlemaps_loaded() }} {% endif %}{% if gmap.cluster %}
 <script src="//cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer_compiled.js" type="text/javascript"></script>
 {% endif %}{% if gmap.heatmap_layer %}{% if GOOGLEMAPS_KEY %}
-<script async src="//maps.googleapis.com/maps/api/js?key={{GOOGLEMAPS_KEY}}&map_ids={{gmap.map_ids}}&language={{gmap.language}}&region={{gmap.region}}&libraries=visualization" type="text/javascript"></script>
+<script async src="//maps.googleapis.com/maps/api/js?key={{GOOGLEMAPS_KEY}}&map_ids={{gmap.map_ids}}&language={{gmap.language}}&region={{gmap.region}}&libraries=visualization&loading=async" type="text/javascript"></script>
 {% endif %}{% endif%}
 
 
@@ -82,22 +82,28 @@
 		{% endif %}
 
 	     // add gmap markers
-	     var raw_markers = {{gmap.markers|tojson|safe}};
-         const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
-	     for(i=0; i<{{gmap.markers|length}};i++) {
+         const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
+
+         for (const marker of {{gmap.markers|tojson|safe}}) {
 	           tempMarker = new AdvancedMarkerElement({
-	             position: new google.maps.LatLng(raw_markers[i].lat, raw_markers[i].lng),
+	             position: new google.maps.LatLng(marker.lat, marker.lng),
 	             map: {{gmap.varname}},
-	             title: raw_markers[i].title ? raw_markers[i].title : null,
+	             title: marker.title ? marker.title : null,
+                 content: new PinElement({
+                     glyphColor: marker.pin.glyph_color,
+                     background: marker.pin.background,
+                     borderColor: marker.pin.border_color,
+                     glyph: marker.pin.glyph,
+                                        }).element,
 	   	        });
 
 
-	        if(raw_markers[i].infobox)
+	        if(marker.infobox)
 	        {
 	             google.maps.event.addListener(
 						tempMarker,
 	                    'click',
-	                    getInfoCallback({{gmap.varname}}, raw_markers[i].infobox)
+	                    getInfoCallback({{gmap.varname}}, marker.infobox)
 	             );
 	        }
 
@@ -106,10 +112,10 @@
 	              google.maps.event.addListener(
 						tempMarker,
 	                    'click',
-	                    function (event) { markerClickposCallback('{{gmap.markerClickpos_uri}}', event.latLng, raw_markers[i].title, raw_markers[i].label)}
+	                    function (event) { markerClickposCallback('{{gmap.markerClickpos_uri}}', event.latLng, marker.title, marker.label)}
 	            );
 	          }
-			  {{gmap.varname}}_markers[i] = tempMarker;
+			  {{gmap.varname}}_markers.push(tempMarker);
 
 	     }