Merge pull request #102 from ZeusWPI/fix_map
move script to separate js file, add logging for bad adresses
This commit is contained in:
commit
173b367b8e
2 changed files with 72 additions and 66 deletions
61
app/static/js/map.js
Normal file
61
app/static/js/map.js
Normal file
|
@ -0,0 +1,61 @@
|
||||||
|
var map = L.map('mapid').setView([
|
||||||
|
51.0231119, 3.7102741
|
||||||
|
], 14);
|
||||||
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
|
||||||
|
function performRequest(url, location, success_callback) {
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.open('GET', url, true);
|
||||||
|
request.onload = function() {
|
||||||
|
if (this.status >= 200 && this.status < 400) {
|
||||||
|
// Success!
|
||||||
|
var data = JSON.parse(this.response);
|
||||||
|
success_callback(location, data);
|
||||||
|
} else {
|
||||||
|
// We reached our target server, but it returned an error
|
||||||
|
}
|
||||||
|
};
|
||||||
|
request.onerror = function() {
|
||||||
|
console.log("Error requestion location coordinates");
|
||||||
|
// There was a connection error of some sort
|
||||||
|
};
|
||||||
|
request.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
let marker_icon = L.icon({
|
||||||
|
iconUrl: "/static/images/marker-icon.png",
|
||||||
|
shadowUrl: "/static/images/marker-shadow.png"
|
||||||
|
});
|
||||||
|
|
||||||
|
let callback = function OSMCallBack(location, data) {
|
||||||
|
var lat, lon;
|
||||||
|
if (data.features.length >= 1) {
|
||||||
|
var place = data.features[0].properties;
|
||||||
|
lat = data.features[0].geometry.coordinates[1];
|
||||||
|
lon = data.features[0].geometry.coordinates[0];
|
||||||
|
|
||||||
|
let marker = L.marker([lat, lon], {
|
||||||
|
icon: marker_icon
|
||||||
|
}).addTo(map)
|
||||||
|
.bindPopup(location.name + ', ' + location.address);
|
||||||
|
|
||||||
|
marker.on('mouseover', function(env) {
|
||||||
|
marker.openPopup();
|
||||||
|
});
|
||||||
|
marker.on('mouseout', function(env) {
|
||||||
|
marker.closePopup();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log(`Location ${JSON.stringify(location, null, 2)} returned no features, are you sure this is a valid address?`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function loadmap(locations) {
|
||||||
|
for (let loc of locations) {
|
||||||
|
let request_uri = "https://photon.komoot.de/api/?limit=1&q=" + loc.address;
|
||||||
|
performRequest(request_uri, loc, callback);
|
||||||
|
};
|
||||||
|
}
|
|
@ -18,74 +18,19 @@
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
{{super()}}
|
{{super()}}
|
||||||
<script src="{{ url_for('static', filename='js/leaflet.js')}}"></script>
|
<script src="{{ url_for('static', filename='js/leaflet.js')}}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/map.js' ) }}"></script>
|
||||||
<script>
|
<script>
|
||||||
var map = L.map('mapid').setView([
|
let locations = [];
|
||||||
51.0231119,3.7102741], 14);
|
let loc = {};
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
||||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
||||||
}).addTo(map);
|
|
||||||
|
|
||||||
|
{% for loc in locations -%}
|
||||||
function performRequest(url, location, success_callback) {
|
loc = {
|
||||||
var request = new XMLHttpRequest();
|
"address": "{{loc.address}}",
|
||||||
request.open('GET', url, true);
|
"name": "{{loc.name}}"
|
||||||
request.onload = function () {
|
|
||||||
if (this.status >= 200 && this.status < 400) {
|
|
||||||
// Success!
|
|
||||||
var data = JSON.parse(this.response);
|
|
||||||
success_callback(location, data);
|
|
||||||
} else {
|
|
||||||
// We reached our target server, but it returned an error
|
|
||||||
}
|
|
||||||
};
|
|
||||||
request.onerror = function () {
|
|
||||||
// There was a connection error of some sort
|
|
||||||
};
|
|
||||||
request.send();
|
|
||||||
}
|
|
||||||
|
|
||||||
let marker_icon = L.icon({
|
|
||||||
iconUrl: "{{url_for('static', filename='images/marker-icon.png')}}",
|
|
||||||
shadowUrl: "{{url_for('static', filename='images/marker-shadow.png')}}"
|
|
||||||
});
|
|
||||||
|
|
||||||
let callback = function OSMCallBack(location, data){
|
|
||||||
var lat, lon;
|
|
||||||
if (data.features.length >= 1 ) {
|
|
||||||
var place = data.features[0].properties;
|
|
||||||
lat = data.features[0].geometry.coordinates[1];
|
|
||||||
lon = data.features[0].geometry.coordinates[0];
|
|
||||||
|
|
||||||
let marker = L.marker([lat, lon], {icon: marker_icon}).addTo(map)
|
|
||||||
.bindPopup(location.name + ', ' + location.address);
|
|
||||||
|
|
||||||
marker.on('mouseover', function(env) {
|
|
||||||
marker.openPopup();
|
|
||||||
});
|
|
||||||
marker.on('mouseout', function(env){
|
|
||||||
marker.closePopup();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
locations.push(loc);
|
||||||
|
{%- endfor %}
|
||||||
|
|
||||||
|
loadmap(locations);
|
||||||
let locations = [];
|
|
||||||
let loc = {};
|
|
||||||
{% for loc in locations -%}
|
|
||||||
|
|
||||||
loc = { "address" : "{{loc.address}}",
|
|
||||||
"name" : "{{loc.name}}"
|
|
||||||
};
|
|
||||||
|
|
||||||
locations.push(loc);
|
|
||||||
|
|
||||||
{%- endfor %}
|
|
||||||
|
|
||||||
for (let loc of locations) {
|
|
||||||
performRequest("https://photon.komoot.de/api/?limit=1&q=" + loc.address, loc, callback)
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue