Optional 'zoom' parameter added to the map page to override Google Maps auto-zoom (needed if the page is embedded in an iframe)

platypush/backend/http/__init__.py

@@ -147,6 +147,13 @@ class HttpBackend(Backend):
         @app.route('/map', methods=['GET'])
         def map():
             """
+            Query parameters:
+                start -- Map timeline start timestamp
+                end   -- Map timeline end timestamp
+                zoom  -- Between 1-20. Set it if you want to override the
+                    Google's API auto-zoom. You may have to set it if you are
+                    trying to embed the map into an iframe
+
             Supported values for `start` and `end`:
                 - now
                 - yesterday
@@ -158,6 +165,7 @@ class HttpBackend(Backend):
 
             Default: start=yesterday, end=now
             """
+
             def parse_time(time_string):
                 if not time_string:
                     return None
@@ -200,9 +208,11 @@ class HttpBackend(Backend):
 
             start = parse_time(http_request.args.get('start', default='yesterday'))
             end = parse_time(http_request.args.get('end', default='now'))
+            zoom = http_request.args.get('zoom', default=None)
+
             return render_template('map.html', config=self.maps,
                                    utils=HttpUtils, start=start, end=end,
-                                   token=self.token, api_key=api_key,
+                                   zoom=zoom, token=self.token, api_key=api_key,
                                    websocket_port=self.websocket_port)
 
         return app

platypush/backend/http/static/js/map.js

@@ -48,7 +48,11 @@ function initMapFromGeopoints(points) {
         // Now fit the map to the newly inclusive bounds
         map.fitBounds(bounds);
         setTimeout(function() {
+            if (window.zoom) {
+                map.setZoom(window.zoom);
+            } else {
                 map.setZoom(getBoundsZoomLevel(bounds, $map.children().width(), $map.children().height()));
+            }
         }, 1000);
 
         google.maps.event.removeListener(listener);

platypush/backend/http/templates/map.html

@@ -21,6 +21,12 @@
         window.map_start = "{{ start }}";
         window.map_end = "{{ end }}";
 
+        {% if zoom %}
+            window.zoom = {{ zoom }};
+        {% else %}
+            window.zoom = undefined;
+        {% endif %}
+
         {% if token %}
             window.token = '{{ token }}'
         {% else %}