Skip to content

Commit c0aa16a

Browse files
RiverfountRiverfount
authored
Merge pull request #136 from bhuveshsharma09/feature_1_custom_styles
Adding three features
2 parents ec534f4 + a21aadd commit c0aa16a

File tree

5 files changed

+278
-0
lines changed

5 files changed

+278
-0
lines changed

‎examples/dark_mode.json‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
[
2+
{
3+
"elementType": "geometry",
4+
"stylers": [
5+
{
6+
"color": "#242f3e"
7+
}
8+
]
9+
},
10+
{
11+
"elementType": "labels.text.fill",
12+
"stylers": [
13+
{
14+
"color": "#746855"
15+
}
16+
]
17+
},
18+
{
19+
"elementType": "labels.text.stroke",
20+
"stylers": [
21+
{
22+
"color": "#242f3e"
23+
}
24+
]
25+
},
26+
{
27+
"featureType": "administrative.locality",
28+
"elementType": "labels.text.fill",
29+
"stylers": [
30+
{
31+
"color": "#d59563"
32+
}
33+
]
34+
},
35+
{
36+
"featureType": "poi",
37+
"elementType": "labels.text.fill",
38+
"stylers": [
39+
{
40+
"color": "#d59563"
41+
}
42+
]
43+
},
44+
{
45+
"featureType": "poi.park",
46+
"elementType": "geometry",
47+
"stylers": [
48+
{
49+
"color": "#263c3f"
50+
}
51+
]
52+
},
53+
{
54+
"featureType": "poi.park",
55+
"elementType": "labels.text.fill",
56+
"stylers": [
57+
{
58+
"color": "#6b9a76"
59+
}
60+
]
61+
},
62+
{
63+
"featureType": "road",
64+
"elementType": "geometry",
65+
"stylers": [
66+
{
67+
"color": "#38414e"
68+
}
69+
]
70+
},
71+
{
72+
"featureType": "road",
73+
"elementType": "geometry.stroke",
74+
"stylers": [
75+
{
76+
"color": "#212a37"
77+
}
78+
]
79+
},
80+
{
81+
"featureType": "road",
82+
"elementType": "labels.text.fill",
83+
"stylers": [
84+
{
85+
"color": "#9ca5b3"
86+
}
87+
]
88+
},
89+
{
90+
"featureType": "road.highway",
91+
"elementType": "geometry",
92+
"stylers": [
93+
{
94+
"color": "#746855"
95+
}
96+
]
97+
},
98+
{
99+
"featureType": "road.highway",
100+
"elementType": "geometry.stroke",
101+
"stylers": [
102+
{
103+
"color": "#1f2835"
104+
}
105+
]
106+
},
107+
{
108+
"featureType": "road.highway",
109+
"elementType": "labels.text.fill",
110+
"stylers": [
111+
{
112+
"color": "#f3d19c"
113+
}
114+
]
115+
},
116+
{
117+
"featureType": "transit",
118+
"elementType": "geometry",
119+
"stylers": [
120+
{
121+
"color": "#2f3948"
122+
}
123+
]
124+
},
125+
{
126+
"featureType": "transit.station",
127+
"elementType": "labels.text.fill",
128+
"stylers": [
129+
{
130+
"color": "#d59563"
131+
}
132+
]
133+
},
134+
{
135+
"featureType": "water",
136+
"elementType": "geometry",
137+
"stylers": [
138+
{
139+
"color": "#17263c"
140+
}
141+
]
142+
},
143+
{
144+
"featureType": "water",
145+
"elementType": "labels.text.fill",
146+
"stylers": [
147+
{
148+
"color": "#515c6d"
149+
}
150+
]
151+
},
152+
{
153+
"featureType": "water",
154+
"elementType": "labels.text.stroke",
155+
"stylers": [
156+
{
157+
"color": "#17263c"
158+
}
159+
]
160+
}
161+
]

‎examples/example_2.py‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
from flask import Flask, render_template
2+
from flask_googlemaps import GoogleMaps, Map, icons
3+
from dynaconf import FlaskDynaconf
4+
#enter the api key below
5+
api = ''
6+
app = Flask(__name__)
7+
GoogleMaps(app, key = api)
8+
FlaskDynaconf(app)
9+
10+
import json
11+
12+
13+
@app.route("/")
14+
def map_created_in_view():
15+
16+
with open('dark_mode.json') as d:
17+
dark_data = json.load(d)
18+
19+
wmap = Map(
20+
identifier="wmap",
21+
varname="wmap",
22+
lat=41.881832,
23+
lng=-87.623177,
24+
markers={
25+
icons.dots.green: [(37.4419, -122.1419), (37.4500, -122.1350)],
26+
icons.dots.blue: [(37.4300, -122.1400, "Hello World")],
27+
},
28+
style="height:400px;width:600px;margin:0;color:#242f3e;",
29+
bicycle_layer = True,
30+
)
31+
32+
33+
gmap = Map(
34+
identifier="gmap",
35+
varname="gmap",
36+
lat=1.351616,
37+
lng=103.808053,
38+
markers={
39+
icons.alpha.A: [(1.351616, 103.808053), (37.4500, -122.1350)],
40+
icons.dots.blue: [(37.4300, -122.1400, "Hello World")],
41+
},
42+
style="height:400px;width:600px;margin:0;color:#242f3e;",
43+
layer = "https://geo.data.gov.sg/dengue-cluster/2020/09/02/kml/dengue-cluster.kml"
44+
)
45+
46+
dmap = Map(
47+
identifier="dmap",
48+
varname="dmap",
49+
lat=1.351616,
50+
lng=103.808053,
51+
markers={
52+
icons.dots.green: [(37.4419, -122.1419), (37.4500, -122.1350)],
53+
icons.dots.blue: [(37.4300, -122.1400, "Hello World")],
54+
},
55+
style="height:400px;width:600px;margin:0;color:#242f3e;",
56+
styles=dark_data,
57+
58+
)
59+
60+
# print(get_address(api, 22.4761596, 88.4149326))
61+
return render_template("example_2.html", dmap=dmap ,gmap = gmap, wmap = wmap,key = api)
62+
63+
64+
65+
66+
67+
if __name__ == "__main__":
68+
app.run(port=5050, debug=True)

‎examples/templates/example_2.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
8+
{{ dmap.js }}
9+
{{ wmap.js }}
10+
{{ gmap.js }}
11+
</head>
12+
<body>
13+
14+
<h2>Custom Style</h2>
15+
{{ dmap.html }}
16+
17+
<h2>Bicycle lane</h2>
18+
{{ wmap.html }}
19+
20+
<h2>KML layer</h2>
21+
{{ gmap.html }}
22+
23+
</body>
24+
</html>

‎flask_googlemaps/__init__.py‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ def __init__(
4848
center_on_user_location=False,
4949
report_clickpos=False,
5050
clickpos_uri="",
51+
styles="",
52+
layer="",
53+
bicycle_layer=False,
5154
**kwargs
5255
):
5356
"""Builds the Map properties"""
@@ -88,6 +91,10 @@ def __init__(
8891
self.cluster_gridsize = cluster_gridsize
8992

9093
self.fit_markers_to_bounds = fit_markers_to_bounds
94+
self.styles = styles
95+
self.layer = layer
96+
self.bicycle_layer = bicycle_layer
97+
9198

9299
def build_markers(self, markers):
93100
if not markers:

‎flask_googlemaps/templates/googlemaps/gmapjs.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
{% endif %}
1414

1515

16+
<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
17+
18+
<script src="https://maps.googleapis.com/maps-api-v3/api/js/42/6/kml.js"></script>
19+
1620
<style type="text/css">
1721
#{{gmap.identifier}} { {{gmap.style}} }
1822
</style>
@@ -40,6 +44,7 @@
4044
rotateControl: {% if gmap.rotate_control %}true{% else %}false{% endif %},
4145
scrollwheel: {% if gmap.scroll_wheel %}true{% else %}false{% endif %},
4246
fullscreenControl: {% if gmap.fullscreen_control %}true{% else %}false{% endif %}
47+
styles: {{ gmap.styles | tojson }}
4348
});
4449

4550
//center map location on user location
@@ -52,6 +57,19 @@
5257
}
5358
{% endif %}
5459

60+
// add kml layer on map
61+
const ctaLayer = new google.maps.KmlLayer({
62+
url: "{{gmap.layer }}",
63+
map: {{gmap.varname}},
64+
});
65+
66+
// add bicycle layer
67+
{% if gmap.bicycle_layer %}
68+
const bicycleLayer = new google.maps.BicyclingLayer();
69+
bicycleLayer.setMap({{gmap.varname}});
70+
{% endif %}
71+
72+
5573
// add gmap markers
5674
var raw_markers = {{gmap.markers|tojson|safe}};
5775
for(i=0; i<{{gmap.markers|length}};i++) {

0 commit comments

Comments
 (0)