Merge pull request #125 from ZeusWPI/feature/104/show-map-on-location-page

#104 adds a map to the locations
This commit is contained in:
Maxime 2019-05-31 17:15:47 +00:00 committed by GitHub
commit 0cce93b576
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 14 deletions

View file

@ -22,7 +22,8 @@ This will create a virtual environment, install the necessary dependencies and w
If you are using a database other then sqlite you will first need to configure the correct uri to the database in the generated 'config.py' file. If you are using a database other then sqlite you will first need to configure the correct uri to the database in the generated 'config.py' file.
Afterwards upgrade the database to the latest version using Afterwards upgrade the database to the latest version using
python app/haldis.py db upgrade cd app
python haldis.py db upgrade
You can now still seed the database by running You can now still seed the database by running

View file

@ -3,6 +3,10 @@ body {
padding-top: 70px; padding-top: 70px;
} }
.padding-top {
padding-top: 10px;
}
.darker { .darker {
background-color: #fafafa; background-color: #fafafa;
margin-top: 10px; margin-top: 10px;
@ -23,6 +27,21 @@ body {
padding-left: 20px; padding-left: 20px;
} }
@media(min-width: 768px) and (max-width: 991px){
/* Make sure the small map in the location page has the same with as the block above */
.sm-no-side-padding {
padding-left: 0px;
padding-right: 0px;
}
}
@media(min-width: 992px){
.md-no-right-padding {
padding-right: 0px;
}
}
.showcase .product { .showcase .product {
font-size: 16px; font-size: 16px;
} }

View file

@ -1,4 +1,9 @@
#mapid { .large-map {
min-height: 400px; min-height: 400px;
height: 600px; height: 600px;
} }
.small-map {
min-height: 150px;
height: 250px;
}

View file

@ -1,11 +1,11 @@
var map = L.map('mapid').setView([ var map = L.map('mapid');
51.0231119, 3.7102741
], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); }).addTo(map);
let base_request_uri = "https://photon.komoot.de/api/?limit=1&q=";
function performRequest(url, location, success_callback) { function performRequest(url, location, success_callback) {
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open('GET', url, true); request.open('GET', url, true);
@ -52,6 +52,10 @@ let callback = function OSMCallBack(location, data) {
marker.on('mouseout', function(env) { marker.on('mouseout', function(env) {
marker.closePopup(); marker.closePopup();
}); });
if (location.center) {
map.setView([lat, lon], 14);
}
} else { } else {
console.log(`Location ${JSON.stringify(location, null, 2)} returned no features, are you sure this is a valid address?`); console.log(`Location ${JSON.stringify(location, null, 2)} returned no features, are you sure this is a valid address?`);
} }
@ -59,7 +63,7 @@ let callback = function OSMCallBack(location, data) {
function loadmap(locations) { function loadmap(locations) {
for (let loc of locations) { for (let loc of locations) {
let request_uri = "https://photon.komoot.de/api/?limit=1&q=" + loc.address; let request_uri = base_request_uri + loc.address;
performRequest(request_uri, loc, callback); performRequest(request_uri, loc, callback);
} }
} }

View file

@ -5,15 +5,20 @@
{% block container %} {% block container %}
<div class="row" xmlns="http://www.w3.org/1999/html"> <div class="row" xmlns="http://www.w3.org/1999/html">
<div class="col-md-push-1 col-md-10 darker"> <div class="col-md-push-1 col-md-5 darker">
<h3>Location: {{ location.name }}</h3> <h3>{{ location.name }}</h3>
<span class="glyphicon glyphicon-home"></span>: {{ location.address }} <br/> <span class="glyphicon glyphicon-home"></span> {{ location.address }} <br/>
<span class="glyphicon glyphicon-phone"></span>: {{ location.telephone }} <br/> <span class="glyphicon glyphicon-phone"></span> {{ location.telephone }} <br/>
<span class="glyphicon glyphicon-link"></span>: <a href="{{ location.website}}">{{ location.website }}</a> <br/> <span class="glyphicon glyphicon-link"></span> <a href="{{ location.website}}">{{ location.website }}</a>
{% if not current_user.is_anonymous() %} {% if not current_user.is_anonymous() %}
<a href="{{ url_for("order_bp.orders", location_id=location.id) }}" class="btn btn-primary btn-sm">Create order</a> <a href="{{ url_for("order_bp.orders", location_id=location.id) }}" class="btn btn-primary btn-sm">Create order</a>
{% endif %} {% endif %}
</div> </div>
<div class="col-md-push-1 col-md-5 padding-top sm-no-side-padding md-no-right-padding">
{% if location.address %}
<div class="small-map" id="mapid"></div>
{% endif %}
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-push-1 col-md-10 darker"> <div class="col-md-push-1 col-md-10 darker">
@ -34,3 +39,31 @@
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.css') }}">
<link rel="stylesheet" href="{{url_for('static', filename='css/map.css')}}">
{% endblock %}
{% block scripts %}
{{super()}}
{% if location.address %}
<script src="{{ url_for('static', filename='js/leaflet.js')}}"></script>
<script src="{{ url_for('static', filename='js/map.js' ) }}"></script>
<script>
let locations = [];
loc = {
"address": "{{location.address}}",
"name": "{{location.name}}",
"url": "{{location.website}}",
"center": true,
};
locations.push(loc);
loadmap(locations);
</script>
{% endif %}
{% endblock %}

View file

@ -4,7 +4,7 @@
{% import "utils.html" as util %} {% import "utils.html" as util %}
{% block container %} {% block container %}
<div id="mapid"></div> <div id="mapid" class="large-map"></div>
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
@ -28,13 +28,15 @@
loc = { loc = {
"address": "{{loc.address}}", "address": "{{loc.address}}",
"name": "{{loc.name}}", "name": "{{loc.name}}",
"url": "{{ url_for('location', id=loc.id) }}" "url": "{{ url_for('location', id=loc.id) }}"
}; };
locations.push(loc); locations.push(loc);
{% endif %} {% endif %}
{%- endfor %} {%- endfor %}
map.setView([51.0231119, 3.7102741], 14);
loadmap(locations); loadmap(locations);
</script> </script>
{% endblock %} {% endblock %}