Commit 801a0ef2 authored by Jonas Heinrich's avatar Jonas Heinrich

animated marker blip

parent 32ec43a3
......@@ -1319,4 +1319,4 @@
}
],
"type": "FeatureCollection"
}
\ No newline at end of file
}
......@@ -6,9 +6,9 @@ var bounds = [
var framesPerSecond = 15;
var initialOpacity = 1
var opacity = initialOpacity;
var initialRadius = 8;
var initialRadius = 8.7;
var radius = initialRadius;
var maxRadius = 18;
var maxRadius = 27;
mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
var map = new mapboxgl.Map({
......@@ -50,12 +50,24 @@ map.on('load', function() {
15, 0,
15.05, ["get", "min_height"]
],
'fill-extrusion-opacity': .6
'fill-extrusion-opacity': 0.6
}
}, labelLayerId);
map.addSource('museum', { type: 'geojson', data: '/geojson/museum.geojson' });
map.addLayer({
'id': 'museum-building',
'type': 'fill-extrusion',
'source': 'museum',
'paint': {
'fill-extrusion-color': ['get', 'color'],
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'base_height'],
'fill-extrusion-opacity': 0.7
}
});
map.addLayer({
"id": "exhibits",
"type": "circle",
......@@ -66,6 +78,18 @@ map.on('load', function() {
"circle-opacity-transition": {duration: 0},
"circle-color": "#007cbf"
},
"filter": ["==", "slug", window.location.pathname],
'minzoom': 19
});
map.addLayer({
"id": "exhibits2",
"source": "museum",
"type": "circle",
"paint": {
"circle-radius":8.7,
"circle-color": "white"
},
"filter": ["==", "$type", "Point"],
'minzoom': 19
});
......@@ -75,7 +99,7 @@ map.on('load', function() {
"source": "museum",
"type": "circle",
"paint": {
"circle-radius": initialRadius,
"circle-radius": 6.8,
"circle-color": "#1da1f2"
},
"filter": ["==", "$type", "Point"],
......@@ -104,18 +128,6 @@ map.on('load', function() {
// Start the animation.
animateMarker(0);
map.addLayer({
'id': 'museum-building',
'type': 'fill-extrusion',
'source': 'museum',
'paint': {
'fill-extrusion-color': ['get', 'color'],
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'base_height'],
'fill-extrusion-opacity': 0.5
}
});
if (window.location.pathname === "/" ||
window.location.pathname === "/about" ||
window.location.pathname === "/overview") {
......@@ -151,22 +163,25 @@ map.on('load', function() {
closeOnClick: false
});
map.on('mouseenter', 'exhibits', function(e) {
map.on('mouseenter', 'exhibits2', function(e) {
map.getCanvas().style.cursor = 'pointer';
popup.setLngLat(e.features[0].geometry.coordinates)
.setHTML(e.features[0].properties.description)
.addTo(map);
});
map.on('mouseleave', 'exhibits', function() {
map.on('mouseleave', 'exhibits2', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
map.on('moveend', function(e){
console.log('zoom: ' + map.getZoom() + ' , bearing: ' + map.getBearing() + ' , pitch: ' + map.getPitch() + ' , center: ' + map.getCenter());
})
map.on('click', 'exhibits', function (e) {
map.on('movestart', function(e){
// In case a new exhibit object is selected, enable highlighting on its blink marker
var new_filter = ["==", 'slug', window.location.pathname];
map.setFilter('exhibits', new_filter);
});
map.on('click', 'exhibits2', function (e) {
var url = e.features[0].properties.url;
var title = e.features[0].properties.title;
var slug = e.features[0].properties.slug;
......
......@@ -128,8 +128,8 @@
<p>
<b>Anmerkungen:</b>
<br>
<a href="http://www.ernst-von-siemens-kunststiftung.de" target=new><img src="/images/logo_ernst_von_siemens_kunststiftung.png" style="max-width: 200px; max-height: 70px; margin: 15px 10px 10px 0px;"></a>
<a href="http://www.kunst-auf-lager.de" target=new><img src="/images/logo_kunst_auf_lager.png" style="max-width: 200px; max-height: 70px; margin: 15px 10px 10px 0px;"></a>
<a href="http://www.ernst-von-siemens-kunststiftung.de" target=new><img src="/images/logos/ernst_von_siemens_kunststiftung.png" style="max-width: 200px; max-height: 70px; margin: 15px 10px 10px 0px;"></a>
<a href="http://www.kunst-auf-lager.de" target=new><img src="/images/logos/kunst_auf_lager.png" style="max-width: 200px; max-height: 70px; margin: 15px 10px 10px 0px;"></a>
<br>
Restauriert mit Unterstützung der Ernst von Siemens Kunststiftung
</p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment