set map bounds

app/static/assets/leaflet/utils.js

@@ -44,4 +44,20 @@ function addPlayerMarker(map, player){
     var timestamp_local = moment(timestamp_utc).local().format('YYYY-MM-DD HH:mm');
     playerMarker.bindTooltip(`<b>${player['username']}</b><br>
                                 ${timestamp_local}`).openPopup();
-}
+}
+
+function getMap(){
+    var map = L.map( 'map', {
+        center: [52.2, 5.3],
+        minZoom: 6,
+        maxZoom: 18,
+        bounds: [[50.5, 3.25], [54, 7.6]],
+        zoom: 8
+    });
+    L.control.scale().addTo(map);
+    
+    L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
+        attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
+    }).addTo( map );
+    return map
+}

app/templates/auth/login.html

@@ -2,14 +2,20 @@
 {% import 'bootstrap/wtf.html' as wtf %}
 
 {% block app_content %}
-    <div class="row">
+<div class="row">
-      <div class="col-xs-0 col-md-1"></div>
+    <div class="col-xs-0 col-md-1"></div>
         <div class="col-xs-8 col-md-4">
-          <h1>Sign In</h1>
+            <h1>Sign In</h1>
-          {{ wtf.quick_form(form, button_map={'submit': 'primary'}) }}
+            <form action="" method="post" class="form" role="form">
-          <br>
+                {{ form.hidden_tag() }}
-          <p>New User? <a href="{{ url_for('auth.register') }}">Click to Register!</a></p>
+                {{ wtf.form_field(form.username) }}
+                {{ wtf.form_field(form.password) }}
+                {{ wtf.form_field(form.remember_me) }}
+                {{ wtf.form_field(form.submit, class='btn btn-primary') }}
+            </form>
+            <br>
+            <p>New User? <a href="{{ url_for('auth.register') }}">Click to Register!</a></p>
         </div>
-      <div class="col-xs-0 col-md-7"></div>
+    <div class="col-xs-0 col-md-7"></div>
-    </div>
+</div>
 {% endblock %}

app/templates/game_bunny_dashboard.html

@@ -60,18 +60,7 @@
 {{ moment.include_moment() }}
 <script type="text/javascript", crossorigin="anonymous">
     // Leaflet Map
-    var map = L.map( 'map', {
+    map = getMap()
-        center: [52.2, 5.3],
-        minZoom: 6,
-        maxZoom: 18,
-        bounds: [[50.5, 3.25], [54, 7.6]],
-        zoom: 8
-    });
-    L.control.scale().addTo(map);
-
-    L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
-        attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
-    }).addTo( map );
 
     var string = '{{ current_user.player_in(game).encode_objectives() |safe }}'
     var objectives = JSON.parse(string)
@@ -84,5 +73,9 @@
         addPlayerMarker(map, self)
     }
 
+    map.fitBounds(
+        objectives.map(o => [o.latitude, o.longitude]).concat([self].map(p => [p.latitude, p.longitude]))
+    );
+
 </script>
 {% endblock %}

app/templates/game_hunter_dashboard.html

@@ -68,18 +68,7 @@
 {{ moment.include_moment() }}
 <script type="text/javascript", crossorigin="anonymous">
     // Leaflet Map
-    var map = L.map( 'map', {
+    map = getMap()
-        center: [52.2, 5.3],
-        minZoom: 6,
-        maxZoom: 18,
-        bounds: [[50.5, 3.25], [54, 7.6]],
-        zoom: 8
-    });
-    L.control.scale().addTo(map);
-
-    L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
-        attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
-    }).addTo( map );
 
     var bunnies = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies(), offset=hunter_delay), cls=location_encoder)|safe }}')
     for (var i = 0; i < bunnies.length; i++){
@@ -91,5 +80,9 @@
         addPlayerMarker(map, self)
     }
 
+    map.fitBounds(
+        bunnies.map(o => [o.latitude, o.longitude]).concat([self].map(p => [p.latitude, p.longitude]))
+    );
+
 </script>
 {% endblock %}

app/templates/game_owner_dashboard.html

@@ -92,18 +92,7 @@
 {{ moment.include_moment() }}
 <script type="text/javascript", crossorigin="anonymous">
     // Leaflet Map
-    var map = L.map( 'map', {
+    map = getMap()
-        center: [52.2, 5.3],
-        minZoom: 6,
-        maxZoom: 18,
-        bounds: [[50.5, 3.25], [54, 7.6]],
-        zoom: 8
-    });
-    L.control.scale().addTo(map);
-
-    L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
-        attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
-    }).addTo( map );
 
     var objectives = JSON.parse('{{ json.dumps(game.objectives, cls=objective_encoder)|safe }}')
 
@@ -116,6 +105,10 @@
         addPlayerMarker(map, players[i])
     }
 
+    map.fitBounds(
+        objectives.map(o => [o.latitude, o.longitude]).concat(players.map(p => [p.latitude, p.longitude]))
+    );
+
     //Delete Game button
     function deleteGame() {
         if (confirm("Are you sure you want to delete this game?")) {

app/templates/game_player.html

@@ -5,6 +5,7 @@
 {{ super() }}
 <link rel="stylesheet" href="{{ url_for('static', filename='assets/leaflet/leaflet.css') }}" />
 <script src="{{ url_for('static', filename='assets/leaflet/leaflet.js') }}"></script>
+<script src="{{ url_for('static', filename='assets/leaflet/utils.js') }}"></script>
 {% endblock %}
 
 {% block app_content %}
@@ -76,47 +77,15 @@
 <script type="text/javascript" , crossorigin="anonymous">
     // Leaflet Map
     '{% set last_location = player.last_location() %}'
-    var map = L.map('map', {
+    map = getMap()
-        center: ['{{ last_location.latitude or 52.2 }}', '{{ last_location.longitude or 5.3 }}'],
-        minZoom: 6,
-        maxZoom: 18,
-        bounds: [
-            [50.5, 3.25],
-            [54, 7.6]
-        ],
-        zoom: 9
-    });
-    L.control.scale().addTo(map);
-
-    L.tileLayer(
-        'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
-            attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
-        }).addTo(map);
-
-    var greenIcon = new L.Icon({
-        iconUrl: "{{ url_for('static', filename='assets/leaflet/images/marker-icon-2x-green.png') }}",
-        shadowUrl: "{{ url_for('static', filename='assets/leaflet/images/marker-shadow.png') }}",
-        iconSize: [25, 41],
-        iconAnchor: [12, 41],
-        popupAnchor: [1, -34],
-        shadowSize: [41, 41]
-    });
 
     var locations = JSON.parse('{{ json.dumps(player.locations_during_game(), cls=location_encoder)|safe }}')
     if (locations == null) {
         locations = []
     }
+    
     for (var i = 0; i < locations.length; i++) {
-        var playerMarker = L.marker([
+        addPlayerMarker(map, locations[i])
-            locations[i]['latitude'],
-            locations[i]['longitude']
-        ], {
-            icon: greenIcon
-        }).addTo(map);
-        var timestamp_utc = moment.utc(locations[i]['timestamp_utc']).toDate()
-        var timestamp_local = moment(timestamp_utc).local().format('YYYY-MM-DD HH:mm');
-        playerMarker.bindTooltip(`<b>${locations[i]['username']}</b><br>
-                                    ${timestamp_local}`).openPopup();
     }
 
     if (locations.length > 0) {
@@ -124,7 +93,9 @@
             color: 'red'
         }).addTo(map);
         // zoom the map to the polyline
-        map.fitBounds(polyline.getBounds());
+        map.fitBounds(polyline.getBounds(), {
+            maxZoom : 13
+        });
     }
 
     //Ajax for Generate Code button

app/templates/objective.html

@@ -5,6 +5,7 @@
 {{ super() }}
 <link rel="stylesheet" href="{{ url_for('static', filename='assets/leaflet/leaflet.css') }}" />
 <script src="{{ url_for('static', filename='assets/leaflet/leaflet.js') }}"></script>
+<script src="{{ url_for('static', filename='assets/leaflet/utils.js') }}"></script>
 {% endblock %}
 
 {% block app_content %}
@@ -63,18 +64,7 @@
 {{ super() }}
 <script type="text/javascript", crossorigin="anonymous">
     // Leaflet Map
-    var map = L.map( 'map', {
+    map = getMap()
-        center: ['{{ objective.latitude }}', '{{ objective.longitude }}'],
-        minZoom: 6,
-        maxZoom: 18,
-        bounds: [[50.5, 3.25], [54, 7.6]],
-        zoom: 10
-    });
-    L.control.scale().addTo(map);
-
-    L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
-        attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
-    }).addTo( map );
 
     if ('{{ owner }}' == 'True'){
         var objectiveMarker = L.marker([
@@ -91,6 +81,9 @@
     }
     objectiveMarker.addTo(map);
 
+    map.setView(objectiveMarker._latlng, 10);
+    
+
     var round = function(value){
         return (Math.round(value * 100000) / 100000).toFixed(5);
     };
@@ -111,5 +104,6 @@
         objectiveMarker.setLatLng(newLatLng);
     });
 
+
 </script>
 {% endblock %}

app/templates/player_base.html

@@ -19,7 +19,7 @@ function sendLocation(){
     }
 }
 
-setInterval(function() {sendLocation()}, 10 * 1000);
+setInterval(function() {sendLocation()}, 65 * 1000);
 
 function postCoordinates(position) {
     $.ajax({