From 01bdbfcf7ba85cd885e2e808643274df8e290cbc Mon Sep 17 00:00:00 2001 From: Bhuvesh Sharma Date: Wed, 14 Oct 2020 22:10:02 +0800 Subject: [PATCH 1/4] modified code to accomodate custom styles --- flask_googlemaps/__init__.py | 3 +++ flask_googlemaps/templates/googlemaps/gmapjs.html | 1 + 2 files changed, 4 insertions(+) diff --git a/flask_googlemaps/__init__.py b/flask_googlemaps/__init__.py index 7df2318..76e2cac 100644 --- a/flask_googlemaps/__init__.py +++ b/flask_googlemaps/__init__.py @@ -47,6 +47,7 @@ def __init__( center_on_user_location=False, report_clickpos=False, clickpos_uri="", + styles="", **kwargs ): """Builds the Map properties""" @@ -87,6 +88,8 @@ def __init__( self.cluster_gridsize = cluster_gridsize self.fit_markers_to_bounds = fit_markers_to_bounds + self.styles = styles + def build_markers(self, markers): if not markers: diff --git a/flask_googlemaps/templates/googlemaps/gmapjs.html b/flask_googlemaps/templates/googlemaps/gmapjs.html index 3c7b055..0836f39 100644 --- a/flask_googlemaps/templates/googlemaps/gmapjs.html +++ b/flask_googlemaps/templates/googlemaps/gmapjs.html @@ -40,6 +40,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 From 7020ae5cb5833d389771d4ce3650c600428b3a30 Mon Sep 17 00:00:00 2001 From: Bhuvesh Sharma Date: Wed, 14 Oct 2020 22:26:42 +0800 Subject: [PATCH 2/4] added code for feature to show KML layer on google maps --- flask_googlemaps/__init__.py | 2 ++ flask_googlemaps/templates/googlemaps/gmapjs.html | 10 ++++++++++ 2 files changed, 12 insertions(+) diff --git a/flask_googlemaps/__init__.py b/flask_googlemaps/__init__.py index 76e2cac..13487fe 100644 --- a/flask_googlemaps/__init__.py +++ b/flask_googlemaps/__init__.py @@ -48,6 +48,7 @@ def __init__( report_clickpos=False, clickpos_uri="", styles="", + layer="", **kwargs ): """Builds the Map properties""" @@ -89,6 +90,7 @@ def __init__( self.fit_markers_to_bounds = fit_markers_to_bounds self.styles = styles + self.layer = layer def build_markers(self, markers): diff --git a/flask_googlemaps/templates/googlemaps/gmapjs.html b/flask_googlemaps/templates/googlemaps/gmapjs.html index 0836f39..16536bd 100644 --- a/flask_googlemaps/templates/googlemaps/gmapjs.html +++ b/flask_googlemaps/templates/googlemaps/gmapjs.html @@ -13,6 +13,10 @@ {% endif %} + + + + @@ -53,6 +57,12 @@ } {% endif %} + // add kml layer on map + const ctaLayer = new google.maps.KmlLayer({ + url: "{{gmap.layer }}", + map: {{gmap.varname}}, + }); + // add gmap markers var raw_markers = {{gmap.markers|tojson|safe}}; for(i=0; i<{{gmap.markers|length}};i++) { From f755bcd4001446c5f68df4df950b4d76e2874383 Mon Sep 17 00:00:00 2001 From: Bhuvesh Sharma Date: Wed, 14 Oct 2020 22:33:31 +0800 Subject: [PATCH 3/4] added feature 3 code, which helps to turn on and off the bicycle lane --- flask_googlemaps/__init__.py | 2 ++ flask_googlemaps/templates/googlemaps/gmapjs.html | 7 +++++++ 2 files changed, 9 insertions(+) diff --git a/flask_googlemaps/__init__.py b/flask_googlemaps/__init__.py index 13487fe..451369d 100644 --- a/flask_googlemaps/__init__.py +++ b/flask_googlemaps/__init__.py @@ -49,6 +49,7 @@ def __init__( clickpos_uri="", styles="", layer="", + bicycle_layer=False, **kwargs ): """Builds the Map properties""" @@ -91,6 +92,7 @@ def __init__( 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): diff --git a/flask_googlemaps/templates/googlemaps/gmapjs.html b/flask_googlemaps/templates/googlemaps/gmapjs.html index 16536bd..bf9e2eb 100644 --- a/flask_googlemaps/templates/googlemaps/gmapjs.html +++ b/flask_googlemaps/templates/googlemaps/gmapjs.html @@ -63,6 +63,13 @@ 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++) { From a21aadd63a71efb8de0cdf6a85417ea64b6a737c Mon Sep 17 00:00:00 2001 From: Bhuvesh Sharma Date: Wed, 14 Oct 2020 22:47:07 +0800 Subject: [PATCH 4/4] added example code --- examples/dark_mode.json | 161 ++++++++++++++++++++++++++++++ examples/example_2.py | 68 +++++++++++++ examples/templates/example_2.html | 24 +++++ 3 files changed, 253 insertions(+) create mode 100644 examples/dark_mode.json create mode 100644 examples/example_2.py create mode 100644 examples/templates/example_2.html diff --git a/examples/dark_mode.json b/examples/dark_mode.json new file mode 100644 index 0000000..049e213 --- /dev/null +++ b/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" + } + ] + } +] \ No newline at end of file diff --git a/examples/example_2.py b/examples/example_2.py new file mode 100644 index 0000000..d75efa0 --- /dev/null +++ b/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) diff --git a/examples/templates/example_2.html b/examples/templates/example_2.html new file mode 100644 index 0000000..2cdb137 --- /dev/null +++ b/examples/templates/example_2.html @@ -0,0 +1,24 @@ + + + + + + Document + + {{ dmap.js }} + {{ wmap.js }} + {{ gmap.js }} + + + +

Custom Style

+ {{ dmap.html }} + +

Bicycle lane

+ {{ wmap.html }} + +

KML layer

+ {{ gmap.html }} + + +