Skip to content

Commit 262702f

Browse files
chicaorochacbruno
chicao
authored and
rochacbruno
committed
Serialize maps as json when passed to jsonify to allow API based frontend (#30)
* #30 Early decode from class to JSON dict * Fixed some map names and set the dict return instead of json dump * Added collapsible attr to as_json func * Removed live loading of Google Maps example code through Jquery * JSON dumped the Markup file for more encoding/decoding freedom for user * Moved import to file top
1 parent 1d5cd44 commit 262702f

File tree

2 files changed

+291
-1
lines changed

2 files changed

+291
-1
lines changed

‎examples/jsonify_examples.py‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
from flask import Flask, jsonify
2+
from flask_googlemaps import Map, GoogleMaps, icons, render_template
3+
4+
app = Flask(__name__, template_folder="templates")
5+
app.config['GOOGLEMAPS_KEY'] = "AIzaSyAZzeHhs-8JZ7i18MjFuM35dJHq70n3Hx4"
6+
GoogleMaps(app, key="AIzaSyAZzeHhs-8JZ7i18MjFuM35dJHq70n3Hx4")
7+
8+
9+
@app.route('/')
10+
def tst_jsonify():
11+
mymap = Map(
12+
identifier="view-side", # for DOM element
13+
varname="mymap", # for JS object name
14+
lat=37.4419,
15+
lng=-122.1419,
16+
markers=[(37.4419, -122.1419)]
17+
)
18+
19+
return jsonify(mymap.as_json())
20+
21+
22+
@app.route("/simplemap")
23+
def simple_view_one():
24+
mymap = Map(
25+
identifier="view-side", # for DOM element
26+
varname="mymap", # for JS object name
27+
lat=37.4419,
28+
lng=-122.1419,
29+
markers=[(37.4419, -122.1419)]
30+
)
31+
return jsonify(mymap.as_json())
32+
33+
34+
@app.route("/simplemap2")
35+
def simple_view_two():
36+
sndmap = Map(
37+
identifier="sndmap",
38+
varname="sndmap",
39+
lat=37.4419,
40+
lng=-122.1419,
41+
markers={
42+
icons.dots.green: [(37.4419, -122.1419), (37.4500, -122.1350)],
43+
icons.dots.blue: [(37.4300, -122.1400, "Hello World")]
44+
}
45+
)
46+
return jsonify(sndmap.as_json())
47+
48+
49+
@app.route('/simplemap3')
50+
def simple_view_three():
51+
trdmap = Map(
52+
identifier="trdmap",
53+
varname="trdmap",
54+
lat=37.4419,
55+
lng=-122.1419,
56+
markers=[
57+
{
58+
'icon': icons.alpha.B,
59+
'lat': 37.4419,
60+
'lng': -122.1419,
61+
'infobox': "Hello I am <b style='color:green;'>GREEN</b>!"
62+
},
63+
{
64+
'icon': icons.dots.blue,
65+
'lat': 37.4300,
66+
'lng': -122.1400,
67+
'infobox': "Hello I am <b style='color:blue;'>BLUE</b>!"
68+
},
69+
{
70+
'icon': '//maps.google.com/mapfiles/ms/icons/yellow-dot.png',
71+
'lat': 37.4500,
72+
'lng': -122.1350,
73+
'infobox': (
74+
"Hello I am <b style='color:#ffcc00;'>YELLOW</b>!"
75+
"<h2>It is HTML title</h2>"
76+
"<img src='//placehold.it/50'>"
77+
"<br>Images allowed!"
78+
)
79+
}
80+
]
81+
)
82+
83+
return jsonify(trdmap.as_json())
84+
85+
86+
@app.route('/clustered')
87+
def cluster_view():
88+
clustermap = Map(
89+
identifier="clustermap",
90+
varname="clustermap",
91+
lat=37.4419,
92+
lng=-122.1419,
93+
markers=[
94+
{
95+
'lat': 37.4500,
96+
'lng': -122.1350
97+
},
98+
{
99+
'lat': 37.4400,
100+
'lng': -122.1350
101+
},
102+
{
103+
'lat': 37.4300,
104+
'lng': -122.1350
105+
},
106+
{
107+
'lat': 36.4200,
108+
'lng': -122.1350
109+
},
110+
{
111+
'lat': 36.4100,
112+
'lng': -121.1350
113+
}
114+
],
115+
zoom=12,
116+
cluster=True
117+
)
118+
119+
return jsonify(clustermap.as_json())
120+
121+
122+
@app.route('/rectangle')
123+
def rectangle_view():
124+
rectangle = {
125+
'stroke_color': '#0000FF',
126+
'stroke_opacity': .8,
127+
'stroke_weight': 5,
128+
'fill_color': '#FFFFFF',
129+
'fill_opacity': .1,
130+
'bounds': {
131+
'north': 33.685,
132+
'south': 33.671,
133+
'east': -116.234,
134+
'west': -116.251
135+
}
136+
}
137+
138+
rectmap = Map(
139+
identifier="rectmap",
140+
varname="rectmap",
141+
lat=33.678,
142+
lng=-116.243,
143+
rectangles=[
144+
rectangle,
145+
[33.678, -116.243, 33.671, -116.234],
146+
(33.685, -116.251, 33.678, -116.243),
147+
[(33.679, -116.254), (33.678, -116.243)],
148+
([33.689, -116.260], [33.685, -116.250]),
149+
]
150+
)
151+
152+
return jsonify(rectmap.as_json())
153+
154+
155+
@app.route('/circle')
156+
def circle_view():
157+
circle = {
158+
'stroke_color': '#FF00FF',
159+
'stroke_opacity': 1.0,
160+
'stroke_weight': 7,
161+
'fill_color': '#FFFFFF',
162+
'fill_opacity': .8,
163+
'center': {
164+
'lat': 33.685,
165+
'lng': -116.251
166+
},
167+
'radius': 2000,
168+
}
169+
170+
circlemap = Map(
171+
identifier="circlemap",
172+
varname="circlemap",
173+
lat=33.678,
174+
lng=-116.243,
175+
circles=[
176+
circle,
177+
[33.685, -116.251, 1000],
178+
(33.685, -116.251, 1500),
179+
]
180+
)
181+
182+
return jsonify(circlemap.as_json())
183+
184+
185+
@app.route('/polyline')
186+
def polyline_view():
187+
polyline = {
188+
'stroke_color': '#0AB0DE',
189+
'stroke_opacity': 1.0,
190+
'stroke_weight': 3,
191+
'path': [{'lat': 33.678, 'lng': -116.243},
192+
{'lat': 33.679, 'lng': -116.244},
193+
{'lat': 33.680, 'lng': -116.250},
194+
{'lat': 33.681, 'lng': -116.239},
195+
{'lat': 33.678, 'lng': -116.243}]
196+
}
197+
198+
path1 = [(33.665, -116.235), (33.666, -116.256),
199+
(33.667, -116.250), (33.668, -116.229)]
200+
201+
path2 = ((33.659, -116.243), (33.660, -116.244),
202+
(33.649, -116.250), (33.644, -116.239))
203+
204+
path3 = ([33.688, -116.243], [33.680, -116.244],
205+
[33.682, -116.250], [33.690, -116.239])
206+
207+
path4 = [[33.690, -116.243], [33.691, -116.244],
208+
[33.692, -116.250], [33.693, -116.239]]
209+
210+
plinemap = Map(
211+
identifier="plinemap",
212+
varname="plinemap",
213+
lat=33.678,
214+
lng=-116.243,
215+
polylines=[polyline, path1, path2, path3, path4]
216+
)
217+
218+
return jsonify(plinemap.as_json())
219+
220+
221+
@app.route('/polygon')
222+
def polygon_view():
223+
polygon = {
224+
'stroke_color': '#0AB0DE',
225+
'stroke_opacity': 1.0,
226+
'stroke_weight': 3,
227+
'fill_color': '#ABC321',
228+
'fill_opacity': .5,
229+
'path': [{'lat': 33.678, 'lng': -116.243},
230+
{'lat': 33.679, 'lng': -116.244},
231+
{'lat': 33.680, 'lng': -116.250},
232+
{'lat': 33.681, 'lng': -116.239},
233+
{'lat': 33.678, 'lng': -116.243}]
234+
}
235+
236+
path1 = [(33.665, -116.235), (33.666, -116.256),
237+
(33.667, -116.250), (33.668, -116.229)]
238+
239+
path2 = ((33.659, -116.243), (33.660, -116.244),
240+
(33.649, -116.250), (33.644, -116.239))
241+
242+
path3 = ([33.688, -116.243], [33.680, -116.244],
243+
[33.682, -116.250], [33.690, -116.239])
244+
245+
path4 = [[33.690, -116.243], [33.691, -116.244],
246+
[33.692, -116.250], [33.693, -116.239]]
247+
248+
pgonmap = Map(
249+
identifier="pgonmap",
250+
varname="pgonmap",
251+
lat=33.678,
252+
lng=-116.243,
253+
polygons=[polygon, path1, path2, path3, path4]
254+
)
255+
256+
return jsonify(pgonmap.as_json())
257+
258+
259+
if __name__ == "__main__":
260+
app.run(debug=True, use_reloader=True)

‎flask_googlemaps/__init__.py‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
from flask import render_template, Blueprint, Markup, g
44
from flask_googlemaps.icons import dots
5+
from json import dumps
56

67
DEFAULT_ICON = dots.red
78
DEFAULT_CLUSTER_IMAGE_PATH = "static/images/m"
@@ -43,7 +44,6 @@ def __init__(self,
4344
self.maptype = maptype
4445
self.markers = []
4546
self.build_markers(markers)
46-
# Following the same pattern of building markers for rectangles objs
4747
self.rectangles = []
4848
self.build_rectangles(rectangles)
4949
self.circles = []
@@ -691,6 +691,36 @@ def add_polygon(self, path=None, **kwargs):
691691
def render(self, *args, **kwargs):
692692
return render_template(*args, **kwargs)
693693

694+
def as_json(self):
695+
json_dict = {
696+
'identifier': self.identifier,
697+
'center': self.center,
698+
'zoom': self.zoom,
699+
'maptype': self.maptype,
700+
'markers': self.markers,
701+
'varname': self.varname,
702+
'style': self.style,
703+
'cls': self.cls,
704+
'rectangles': self.rectangles,
705+
'circles': self.circles,
706+
'polylines': self.polylines,
707+
'polygons': self.polygons,
708+
'zoom_control': self.zoom_control,
709+
'maptype_control': self.maptype_control,
710+
'scale_control': self.scale_control,
711+
'streetview_controle': self.streetview_control,
712+
'rotate_control': self.rotate_control,
713+
'fullscreen_control': self.fullscreen_control,
714+
'cluster': self.cluster,
715+
'cluster_imagepath': self.cluster_imagepath,
716+
'cluster_gridsize': self.cluster_gridsize,
717+
'collapsible': self.collapsible,
718+
'js': dumps(self.js),
719+
'html': dumps(self.html),
720+
}
721+
722+
return json_dict
723+
694724
@property
695725
def js(self):
696726
return Markup(

0 commit comments

Comments
 (0)