$(document).ready(function () {
// first modal
$('div.welcome-first').addClass("visible-welcome");
$('div.welcome-first').html('
');
$(".first-welcome-button").on('click', function () {
$('div.welcome-first').removeClass("visible-welcome");
$('div.welcome-second').addClass("visible-welcome");
})
// second modal
$('div.welcome-second').html('
');
$(".second-welcome-previous-button").on('click', function () {
$('div.welcome-second').removeClass("visible-welcome");
$('div.welcome-first').addClass("visible-welcome");
})
$(".second-welcome-next-button").on('click', function () {
$('div.welcome-second').removeClass("visible-welcome");
$('div.welcome-third').addClass("visible-welcome");
})
$('div.welcome-third').html('
');
$(".third-welcome-previous-button").on('click', function () {
$('div.welcome-third').removeClass("visible-welcome");
$('div.welcome-second').addClass("visible-welcome");
})
$(".third-welcome-next-button").on('click', function () {
$('div.welcome-third').removeClass("visible-welcome");
$('div.welcome-fourth').addClass("visible-welcome");
})
$('div.welcome-fourth').html('
');
$(".fourth-welcome-previous-button").on('click', function () {
$('div.welcome-fourth').removeClass("visible-welcome");
$('div.welcome-third').addClass("visible-welcome");
})
$(".fourth-welcome-next-button").on('click', function () {
$('div.welcome-fourth').removeClass("visible-welcome");
$('div.welcome-fifth').addClass("visible-welcome");
})
$('div.welcome-fifth').html('
');
$(".fifth-welcome-previous-button").on('click', function () {
$('div.welcome-fifth').removeClass("visible-welcome");
$('div.welcome-fourth').addClass("visible-welcome");
})
$(".fifth-welcome-next-button").on('click', function () {
$('div.welcome-fifth').removeClass("visible-welcome");
})
$(".close-button").on("click", function () {
$("div.visible-welcome").removeClass("visible-welcome")
})
$(".button-start-welcome").on("click", function () {
$('div.welcome-first').addClass("visible-welcome");
})
});
mapboxgl.accessToken = 'pk.eyJ1Ijoia29uaW5ndGltIiwiYSI6ImNramxrOXBjeDBicW4zMHFldW11NXBrbWwifQ.0OH9S0-_0c80vJGDqh2ONg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/koningtim/ckkqrx33e132r17pm0pd0up2h',
center: [4.897899, 52.374143],
zoom: 17,
customAttribution: 'geocadder'
});
// Add zoom controls
map.addControl(new mapboxgl.NavigationControl());
// Add geolocate control
map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);
var bounds = new mapboxgl.LngLatBounds();
$.getJSON('data.json', function (geojson) {
// add markers to map
geojson.features.forEach(function (marker) {
bounds.extend(marker.geometry.coordinates);
var popup = new mapboxgl.Popup()
.setHTML('
');
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// create a custom popup
$(el).on('click', function (e) {
// Prevent the `map.on('click')` from being triggered
e.stopPropagation();
$('div.custom-popup').addClass("visible");
$('div.custom-popup').html('');
// check windowSize
var windowSize = $(window).width();
/////////////////
var topOffset = $(el).offset().top - 80;
if (topOffset < 5) {
topOffset = 10;
$('div.custom-popup').css('top', topOffset);
} else {
$('div.custom-popup').css('top', topOffset);
}
var leftOffset = $(el).offset().left - 160;
if (leftOffset < 5) {
leftOffset = 10;
$('div.custom-popup').css('left', leftOffset);
} else {
$('div.custom-popup').css('left', leftOffset);
}
var bottomOffset = $(el).offset().bottom;
if (bottomOffset < 5) {
bottomOffset = 10;
$('div.custom-popup').css('bottom', bottomOffset);
}
var rightOffset = $(el).offset().right;
if (rightOffset < 5) {
rightOffset = 10;
$('div.custom-popup').css('right', rightOffset);
}
$('div.custom-popup').on('click', function () {
console.log("clicked popup");
$('div.sidebar').addClass("visible");
$('div.sidebar').html('
' + '' + '
');
$(".close-button").on("click", function () {
$("div.sidebar").removeClass("visible")
})
// close popup on map click
map.on('click', function () {
$('div.custom-popup').removeClass("visible")
});
// close popup on map move
map.on('mouseup', function () {
$('div.custom-popup').removeClass("visible")
});
// close popup on map touch
map.on('touchmove', function () {
$('div.custom-popup').removeClass("visible")
});
var audios = document.getElementsByTagName('audio');
var a1 = audiojs.create(audios[0], {
css: false,
createPlayer: {
markup: false,
playPauseClass: 'play-pauseZ',
scrubberClass: 'scrubberZ',
progressClass: 'progressZ',
loaderClass: 'loadedZ',
timeClass: 'timeZ',
durationClass: 'durationZ',
playedClass: 'playedZ',
errorMessageClass: 'error-messageZ',
playingClass: 'playingZ',
loadingClass: 'loadingZ',
errorClass: 'errorZ'
}
});
})
});
// web - move popup when map is moved, so the popup will remain atthe same distance from the marker
// map.on('mouseup', function () {
// console.log('A mouseup event has occurred.');
// var topOffset = $(el).offset().top - 80;
// $('div.custom-popup').css('top', topOffset);
// var leftOffset = $(el).offset().left - 160;
// $('div.custom-popup').css('left', leftOffset);
// });
// mobile - move popup when map is moved, so the popup will remain atthe same distance from the marker
// map.on('touchmove', function () {
// console.log('A mouseup event has occurred.');
// var topOffset = $(el).offset().top - 80;
// $('div.custom-popup').css('top', topOffset);
// var leftOffset = $(el).offset().left - 160;
// $('div.custom-popup').css('left', leftOffset);
// });
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
// .setPopup(popup)
.addTo(map);
});
map.fitBounds(bounds, { padding: 20 });
});
Welkom bij de stadswandeling ‘Het echte Amsterdam’
Het echte Amsterdam is een digitale audiotour die het verhaal vertelt van de Amsterdamse binnenstad, door de ogen van verschillende Amsterdammers.
Cadeau aan de stad
Deze wandeling wordt je aangeboden door NV Zeedijk: een kleine, actieve organisatie die bijdraagt aan de positieve transformatie van de Zeedijk. Dit jaar bestaan we 35 jaar en dat vieren we met een cadeau aan de stad.
Als we één ding geleerd hebben, dan is het: Amsterdam maken we samen. Daarom delen tien bijzondere sprekers hun liefde voor onze mooie binnenstad.
Wij wensen je veel plezier bij de wandeling!
Het echte Amsterdam is een digitale audiotour die het verhaal vertelt van de Amsterdamse binnenstad, door de ogen van verschillende Amsterdammers.
Janny Alberts
Directeur NV Zeedijk
' + marker.properties.name + '
' + '' + marker.properties.address + '
' + marker.properties.name + '
' + '' + marker.properties.address + '
' + marker.properties.name + '
' + marker.properties.address + '
' + marker.properties.zip + ' ' + marker.properties.city + '
Verteller
' + marker.properties.narrator + '
' + marker.properties.aboutNarrator + '