Merge pull request #297 from ZeusWPI/about_page_osm
Replaced Google maps embed on about:contact page with openstreetmap
This commit is contained in:
commit
f9a34b0bd7
3 changed files with 72 additions and 63 deletions
|
@ -31,6 +31,13 @@ contact_links:
|
||||||
description: Phone
|
description: Phone
|
||||||
action: Call us
|
action: Call us
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<% content_for :head do %>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
|
||||||
|
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
|
||||||
|
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
<%= render '/partials/_about_sub_navbar.*', selected: 'contact' %>
|
<%= render '/partials/_about_sub_navbar.*', selected: 'contact' %>
|
||||||
<h1 class='title is-1 has-text-centered'>Contact us</h1>
|
<h1 class='title is-1 has-text-centered'>Contact us</h1>
|
||||||
<h2 class='subtitle is-4 has-text-centered has-text-weight-light'>bleep bloop</h1>
|
<h2 class='subtitle is-4 has-text-centered has-text-weight-light'>bleep bloop</h1>
|
||||||
|
@ -122,5 +129,5 @@ contact_links:
|
||||||
|
|
||||||
<!-- Embedded Google Maps -->
|
<!-- Embedded Google Maps -->
|
||||||
<div class="map-wrapper box">
|
<div class="map-wrapper box">
|
||||||
<iframe id='google-maps' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1156.8611760710044!2d3.7102397000000003!3d51.023149499999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c373c271502d9b%3A0x49fd54f81cafeb5f!2sZeus+WPI!5e0!3m2!1sen!2sbe!4v1481415854540' height='450' style='border:0;width:100%' allowfullscreen></iframe>
|
<%= render '/partials/_map.erb', location: "Zeus WPI" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
|
||||||
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
|
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
|
||||||
|
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% if item[:banner] %>
|
<% if item[:banner] %>
|
||||||
|
@ -78,72 +79,11 @@
|
||||||
<div class="content has-text-justified is-medium-responsive">
|
<div class="content has-text-justified is-medium-responsive">
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
</div>
|
</div>
|
||||||
|
<%= render '/partials/_map.erb', location: item[:locationlink] %>
|
||||||
<!-- 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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script>
|
|
||||||
var map = L.map('map');
|
|
||||||
|
|
||||||
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, 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 -->
|
<!-- SPONSORED BY -->
|
||||||
<% if item[:sponsors] %>
|
<% if item[:sponsors] %>
|
||||||
|
|
62
layouts/partials/_map.erb
Normal file
62
layouts/partials/_map.erb
Normal 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: '© <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>
|
Loading…
Reference in a new issue