midgard/zeus.ugent.be
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move leaflet map to partial

Browse source
This commit is contained in:
hannes-kl 2018-11-28 20:26:08 +01:00
parent 515248405a
commit 8b073f7054
2 changed files with 63 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
layouts/eventpost.erb
View file

@ -78,72 +78,11 @@
<div class="content has-text-justified is-medium-responsive">
<%= yield %>
</div>
<!-- MAPS -->
<div class="map-wrapper box">
<div id="map-error" class="is-invisible" style="height:100%;width:100%;position:absolute;left:0;top:0;background-color:#00000066;z-index:1000;color:white;font-size:30px;display:flex;justify-content:center;align-items:center;padding:50px;">
Could not find location. Please create an issue on github.
</div>
<div id="map" style="height:100%;"></div>
</div>
<%= render '/partials/_map.erb', location: item[:locationlink] %>
</div>
</div>
</section>
<script>
var map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function performRequest(url, 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(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();
}
performRequest("https://photon.komoot.de/api/?limit=1&q=<%= URI::encode(item[:locationlink]) %>", function(data) {
var lat, lon;
if(data.features.length < 1) {
lat = 51.0538286;
lon = 3.7250121;
var className = 'is-invisible';
var el = document.getElementById('map-error');
if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
} else {
var place = data.features[0].properties;
lat = data.features[0].geometry.coordinates[1];
lon = data.features[0].geometry.coordinates[0];
L.marker([lat, lon]).addTo(map)
.bindPopup(place.name + ', ' + place.street + ' ' + place.housenumber)
.openPopup();
}
map.setView([lat, lon], 18);
});
</script>
<!-- SPONSORED BY -->
<% if item[:sponsors] %>

62
layouts/partials/_map.erb Normal file
View file

@ -0,0 +1,62 @@
<!-- MAPS -->
<div class="map-wrapper box">
<div id="map-error" class="is-invisible" style="height:100%;width:100%;position:absolute;left:0;top:0;background-color:#00000066;z-index:1000;color:white;font-size:30px;display:flex;justify-content:center;align-items:center;padding:50px;">
Could not find location. Please create an issue on github.
</div>
<div id="map" style="height:100%;"></div>
</div>
<script>
var map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function performRequest(url, 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(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();
}
performRequest("https://photon.komoot.de/api/?limit=1&q=<%= URI::encode(@location) %>", function(data) {
var lat, lon;
if(data.features.length < 1) {
lat = 51.0538286;
lon = 3.7250121;
var className = 'is-invisible';
var el = document.getElementById('map-error');
if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
} else {
var place = data.features[0].properties;
lat = data.features[0].geometry.coordinates[1];
lon = data.features[0].geometry.coordinates[0];
L.marker([lat, lon]).addTo(map)
.bindPopup(place.name + ', ' + place.street + ' ' + place.housenumber)
.openPopup();
}
map.setView([lat, lon], 18);
});
</script>