Merge pull request #136 from bhuveshsharma09/feature_1_custom_styles

Adding three features

examples/dark_mode.json

@@ -0,0 +1,161 @@
+[
+  {
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#242f3e"
+      }
+    ]
+  },
+  {
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#746855"
+      }
+    ]
+  },
+  {
+    "elementType": "labels.text.stroke",
+    "stylers": [
+      {
+        "color": "#242f3e"
+      }
+    ]
+  },
+  {
+    "featureType": "administrative.locality",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#d59563"
+      }
+    ]
+  },
+  {
+    "featureType": "poi",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#d59563"
+      }
+    ]
+  },
+  {
+    "featureType": "poi.park",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#263c3f"
+      }
+    ]
+  },
+  {
+    "featureType": "poi.park",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#6b9a76"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#38414e"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry.stroke",
+    "stylers": [
+      {
+        "color": "#212a37"
+      }
+    ]
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#9ca5b3"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#746855"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "geometry.stroke",
+    "stylers": [
+      {
+        "color": "#1f2835"
+      }
+    ]
+  },
+  {
+    "featureType": "road.highway",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#f3d19c"
+      }
+    ]
+  },
+  {
+    "featureType": "transit",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#2f3948"
+      }
+    ]
+  },
+  {
+    "featureType": "transit.station",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#d59563"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": [
+      {
+        "color": "#17263c"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text.fill",
+    "stylers": [
+      {
+        "color": "#515c6d"
+      }
+    ]
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text.stroke",
+    "stylers": [
+      {
+        "color": "#17263c"
+      }
+    ]
+  }
+]

examples/example_2.py

@@ -0,0 +1,68 @@
+from flask import Flask, render_template
+from flask_googlemaps import GoogleMaps, Map, icons
+from dynaconf import FlaskDynaconf
+#enter the api key below
+api = ''
+app = Flask(__name__)
+GoogleMaps(app, key = api)
+FlaskDynaconf(app)
+
+import json
+
+
+@app.route("/")
+def map_created_in_view():
+
+    with open('dark_mode.json') as d:
+        dark_data = json.load(d)
+
+    wmap = Map(
+        identifier="wmap",
+        varname="wmap",
+        lat=41.881832,
+        lng=-87.623177,
+        markers={
+            icons.dots.green: [(37.4419, -122.1419), (37.4500, -122.1350)],
+            icons.dots.blue: [(37.4300, -122.1400, "Hello World")],
+        },
+        style="height:400px;width:600px;margin:0;color:#242f3e;",
+        bicycle_layer = True,
+    )
+
+
+    gmap = Map(
+        identifier="gmap",
+        varname="gmap",
+        lat=1.351616,
+        lng=103.808053,
+        markers={
+            icons.alpha.A: [(1.351616, 103.808053), (37.4500, -122.1350)],
+            icons.dots.blue: [(37.4300, -122.1400, "Hello World")],
+        },
+        style="height:400px;width:600px;margin:0;color:#242f3e;",
+        layer = "https://geo.data.gov.sg/dengue-cluster/2020/09/02/kml/dengue-cluster.kml"
+    )
+
+    dmap = Map(
+        identifier="dmap",
+        varname="dmap",
+        lat=1.351616,
+        lng=103.808053,
+        markers={
+            icons.dots.green: [(37.4419, -122.1419), (37.4500, -122.1350)],
+            icons.dots.blue: [(37.4300, -122.1400, "Hello World")],
+        },
+        style="height:400px;width:600px;margin:0;color:#242f3e;",
+        styles=dark_data,
+
+    )
+
+  #  print(get_address(api, 22.4761596, 88.4149326))
+    return render_template("example_2.html", dmap=dmap ,gmap = gmap, wmap = wmap,key = api)
+
+
+
+
+
+if __name__ == "__main__":
+    app.run(port=5050, debug=True)

examples/templates/example_2.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    {{ dmap.js }}
+     {{ wmap.js }}
+     {{ gmap.js }}
+</head>
+<body>
+
+<h2>Custom Style</h2>
+    {{ dmap.html }}
+
+<h2>Bicycle lane</h2>
+    {{ wmap.html }}
+
+<h2>KML layer</h2>
+    {{ gmap.html }}
+
+</body>
+</html>

flask_googlemaps/__init__.py

@@ -48,6 +48,9 @@ def __init__(
         center_on_user_location=False,
         report_clickpos=False,
         clickpos_uri="",
+        styles="",
+        layer="",
+        bicycle_layer=False,
         **kwargs
     ):
         """Builds the Map properties"""
@@ -88,6 +91,10 @@ def __init__(
         self.cluster_gridsize = cluster_gridsize
 
         self.fit_markers_to_bounds = fit_markers_to_bounds
+        self.styles = styles
+        self.layer = layer
+        self.bicycle_layer = bicycle_layer
+
 
     def build_markers(self, markers):
         if not markers:

flask_googlemaps/templates/googlemaps/gmapjs.html

@@ -13,6 +13,10 @@
 {%  endif %}
 
 
+<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
+
+<script src="https://maps.googleapis.com/maps-api-v3/api/js/42/6/kml.js"></script>
+
 <style type="text/css">
       #{{gmap.identifier}} { {{gmap.style}} }
 </style>
@@ -40,6 +44,7 @@
             rotateControl: {% if gmap.rotate_control %}true{% else %}false{% endif %},
             scrollwheel: {% if gmap.scroll_wheel %}true{% else %}false{% endif %},
             fullscreenControl: {% if gmap.fullscreen_control %}true{% else %}false{% endif %}
+            styles: {{ gmap.styles | tojson  }}
         });
 
         //center map location on user location
@@ -52,6 +57,19 @@
             }
         {% endif %}
 
+        // add kml layer on map
+        const ctaLayer = new google.maps.KmlLayer({
+        url: "{{gmap.layer }}",
+        map: {{gmap.varname}},
+         });
+
+        // add bicycle layer
+        {% if gmap.bicycle_layer %}
+                const bicycleLayer = new google.maps.BicyclingLayer();
+                bicycleLayer.setMap({{gmap.varname}});
+        {% endif %}
+
+
         // add gmap markers
         var raw_markers = {{gmap.markers|tojson|safe}};
         for(i=0; i<{{gmap.markers|length}};i++) {