Browse Source

set map bounds

testing
Burathar 4 years ago
parent
commit
6121584d2f
  1. 16
      app/static/assets/leaflet/utils.js
  2. 12
      app/templates/auth/login.html
  3. 17
      app/templates/game_bunny_dashboard.html
  4. 17
      app/templates/game_hunter_dashboard.html
  5. 17
      app/templates/game_owner_dashboard.html
  6. 43
      app/templates/game_player.html
  7. 18
      app/templates/objective.html
  8. 2
      app/templates/player_base.html

16
app/static/assets/leaflet/utils.js

@ -45,3 +45,19 @@ function addPlayerMarker(map, player){ @@ -45,3 +45,19 @@ function addPlayerMarker(map, player){
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
}

12
app/templates/auth/login.html

@ -2,14 +2,20 @@ @@ -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-8 col-md-4">
<h1>Sign In</h1>
{{ wtf.quick_form(form, button_map={'submit': 'primary'}) }}
<form action="" method="post" class="form" role="form">
{{ form.hidden_tag() }}
{{ 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>
</div>
{% endblock %}

17
app/templates/game_bunny_dashboard.html

@ -60,18 +60,7 @@ @@ -60,18 +60,7 @@
{{ moment.include_moment() }}
<script type="text/javascript", crossorigin="anonymous">
// Leaflet Map
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 );
map = getMap()
var string = '{{ current_user.player_in(game).encode_objectives() |safe }}'
var objectives = JSON.parse(string)
@ -84,5 +73,9 @@ @@ -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 %}

17
app/templates/game_hunter_dashboard.html

@ -68,18 +68,7 @@ @@ -68,18 +68,7 @@
{{ moment.include_moment() }}
<script type="text/javascript", crossorigin="anonymous">
// Leaflet Map
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 );
map = getMap()
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 @@ @@ -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 %}

17
app/templates/game_owner_dashboard.html

@ -92,18 +92,7 @@ @@ -92,18 +92,7 @@
{{ moment.include_moment() }}
<script type="text/javascript", crossorigin="anonymous">
// Leaflet Map
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 );
map = getMap()
var objectives = JSON.parse('{{ json.dumps(game.objectives, cls=objective_encoder)|safe }}')
@ -116,6 +105,10 @@ @@ -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?")) {

43
app/templates/game_player.html

@ -5,6 +5,7 @@ @@ -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 @@ @@ -76,47 +77,15 @@
<script type="text/javascript" , crossorigin="anonymous">
// Leaflet Map
'{% set last_location = player.last_location() %}'
var map = L.map('map', {
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]
});
map = getMap()
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([
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();
addPlayerMarker(map, locations[i])
}
if (locations.length > 0) {
@ -124,7 +93,9 @@ @@ -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

18
app/templates/objective.html

@ -5,6 +5,7 @@ @@ -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 @@ @@ -63,18 +64,7 @@
{{ super() }}
<script type="text/javascript", crossorigin="anonymous">
// Leaflet Map
var map = L.map( 'map', {
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 );
map = getMap()
if ('{{ owner }}' == 'True'){
var objectiveMarker = L.marker([
@ -91,6 +81,9 @@ @@ -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 @@ @@ -111,5 +104,6 @@
objectiveMarker.setLatLng(newLatLng);
});
</script>
{% endblock %}

2
app/templates/player_base.html

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

Loading…
Cancel
Save