Utileg

$(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 });
});

@font-face {
font-family: ‘Merriweather-Light’;
src: url(fonts/Merriweather/Merriweather-Light.ttf);
}

body {
margin: 0;
padding: 0;
font-family: ‘Merriweather-Light’;
}

/* welcome popup styling */

h1.welcome-popup {
color: #B0276C;
font-weight: 700;
font-size: 24px;
line-height: 36px;
text-align: center;
margin-bottom: 20px;
}

.welcome-first, .welcome-second, .welcome-third, .welcome-fourth, .welcome-fifth {
display: none;
}

.visible-welcome {
display: block;
position: relative;
border-radius: 7px;
background-color: #E9E0D1;
left: 0px;
z-index: 2001;
width: 50px;
position: absolute;
width: 498px;
height: 548px;
left: 25%;
right: 25%;
top: 10%;
/* transition: left 0.7s ease; */
}

div.welcome-content {
overflow-y: scroll !important;
overflow-x: hidden;
height: 85%;
}

/* div.welcome-content {
overflow-y: scroll !important;
overflow-x: hidden;
height: 522px;
} */

.welcome-first-image {
width: 480px;
}

.welcome-image {
margin-left: 24%;
margin-top: 48px;
width: 256px;
}

button.welcome-button {
display: block;
float: left;
height: 47px;
box-sizing: border-box;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
text-decoration: none;
border-radius: 8px;
width: 186px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
cursor: pointer;
}

.first-welcome-button {
color: #5f6264;
margin-left: 130px;
}

.second-welcome-previous-button, .third-welcome-previous-button, .fourth-welcome-previous-button, .fifth-welcome-previous-button {
color: #5f6264;
margin-left: 30px;
}

.second-welcome-next-button, .third-welcome-next-button, .fourth-welcome-next-button, .fifth-welcome-next-button {
color: #FFF;
background-color: #B0276C;
border-color: #B0276C;
}

.button-start-welcome {
font: bold 12px/20px ‘Helvetica Neue’, Arial, Helvetica, sans-serif;
background-color: #B0276C;
color: #FFFFFF;
position: absolute;
top: 151px;
right: 7px;
z-index: 1;
border: none;
width: 80px;
margin-left: -100px;
display: block;
cursor: pointer;
padding: 9px 18px;
font-size: 16px;
border: 1px solid #fff;
}

.button-start-welcome:hover {
background-color: #fff;
color: #B0276C;
border: 1px solid var(–club-color);
}

/* end welcome popup styling */

/* sidebar styling */

.sidebar {
display: none;
}

.sidebar.visible {
display: block;
position: relative;
border-radius: 7px;
background-color: #E9E0D1;
left: 0px;
z-index: 2001;
width: 50px;
position: absolute;
width: 498px;
height: 558px;
left: 40px;
top: 40px;
/* transition: left 0.7s ease; */
}

span.close-button {
float: right;
right: 13px;
border-radius: 21px;
background-color: #cbbca3;
width: 26px;
height: 26px;
font-size: 14px;
color: #B0276C;
cursor: pointer;
margin-top: 15px;
margin-right: 15px;
padding: 0;
line-height: 26px;
font-weight: bold;
text-align: center;
}

span.close-button:hover {
border-color: #B0276C;
background-color: #B0276C;
color: #FFFFFF;
}

div.sidebar-content {
overflow-y: scroll !important;
overflow-x: hidden;
height: 522px;
}

.sidebar-content-inner {
margin-left: 20px;
margin-right: 20px;
}

.sidebar-content-inner h1 {
font-style: normal;
font-weight: bold;
font-size: 26px;
line-height: 40px;
margin-bottom: 5px;
}

.sidebar-content-inner h2 {
font-size: 20px;
margin-top: 5px;
margin-bottom: 5px;
font-weight: 600;
}

.narrator {
margin-top: 20px;
position: relative;
}

.narrator img {
border-radius: 9999px;
width: 64px;
height: 64px;
display: inline;
float: left;
}

.narrator-info {
display: inline;
float: left;
margin-left: 10px;
}

.narrator-info h5 {
margin: 5px;
font-weight: 300;
font-size: 16px;
padding-top: 0;
}

.narrator-info h4 {
margin: 5px;
font-weight: 600;
color: #B0276C;
font-size: 18px;
}

.narrator-info p {
margin: 5px;
font-size: 14px;
}

div.images-parent {
position: relative;
}

div img.overlay-image {
margin-top: 10px;
}

div img.under-image {
z-index: 1;
position: relative;
width: 100%;
}

div.sidebar-content-inner h3 {
font-size: 16px;
}

div.sidebar-content-inner p.description {
font-size: 14px;
}

div.buildings {
background-image: url(‘svg/buildings.svg’);
height: 100px;
}

div.sidebar-audio-player {
margin: 0;
}

/* end sidebar styling */

/*
audio {
width: 100%;
background-color: #EF7FC2;
color: #EF7FC2;
}

audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel {
background-color: #EF7FC2;
color: #EF7FC2;
border-radius: 0;
} */

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}

.marker {
background-image: url(‘svg/marker-logo.svg’);
background-size: cover;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}

.marker-icon, .marker-text {
vertical-align: middle;
display: inline-block;
margin-left: 2px;
}

.marker-icon {
border-color: aquamarine;
border-width: 120px;
margin-top: 2px;
}

.marker-text {
font-size: 20px;
font-weight: bold;
margin-right: 8px;
}

div.custom-popup {
display: none;
position: relative;
width: 360px;
height: 76px;
border-radius: 7px;
color: #B0276C;
padding: 0;
cursor: pointer;
z-index: 2000;
/* float: inline; */
}

div.custom-popup.visible {
display: block;
position: relative;
width: 392px;
height: 76px;
border-radius: 7px;
background-color: #FFFFFF;
color: #B0276C;
padding: 0;
cursor: pointer;
z-index: 2000;
}

div.popup-image {
display: inline;
width: 70px;
float: left;
}

div.popup-image>img {
width: 76px;
min-height: 76px;
height: 100%;
}

div.popup-details {
display: inline;
float: left;
width: 67%;
margin-top: 15px;
z-index: 2000;
}

div.popup-details>h2 {
display: inline;
color: #B0276C;
margin-left: 50px;
font-size: 1.2em;
}

div.popup-details>p {
display: inline;
margin-left: 50px;
}

div.arrow-link {
display: inline;
width: 30px;
height: 20px;
float: right;
background-image: url(‘svg/popup-arrow.svg’);
background-repeat: no-repeat;
background-position: 50%;
padding-top: 56px;
}

/* Styling of the audio player */

.audiojsZ audio {
position: absolute;
left: -1px;
}

.audiojsZ {
width: 100%;
height: 36px;
background: #EF7FC2;
overflow: hidden;
font-family: monospace;
font-size: 12px;
/* -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); */
}

.audiojsZ .play-pauseZ {
width: 25px;
height: 40px;
padding: 4px 6px;
margin: 0px;
float: left;
overflow: hidden;
border-right: 1px solid #EF7FC2;
}

.audiojsZ p {
display: none;
width: 25px;
height: 40px;
margin: 0px;
cursor: pointer;
}

.audiojsZ .playZ {
display: block;
}

.audiojsZ .scrubberZ {
position: relative;
float: left;
width: 310px;
background: #B0276C;
height: 14px;
margin: 10px;
border-left: 0px;
border-bottom: 0px;
overflow: hidden;
}

.audiojsZ .progressZ {
position: absolute;
top: 0px;
left: 0px;
height: 14px;
width: 0px;
background: #600;
z-index: 1;
}

.audiojsZ .loadedZ {
position: absolute;
top: 0px;
left: 0px;
height: 14px;
background: #FFFFFF;
}

.audiojsZ .timeZ {
float: left;
height: 36px;
line-height: 36px;
margin: 0px 0px 0px 6px;
padding: 0px 6px 0px 12px;
border-left: 1px solid #EF7FC2;
color: #B0276C;
/* text-shadow: 1px 1px 0px #B0276C; */
}

.audiojsZ .timeZ em {
padding: 0px 2px 0px 0px;
color: #FFFFFF;
font-style: normal;
}

.audiojsZ .timeZ strong {
padding: 0px 0px 0px 2px;
font-weight: normal;
}

.audiojsZ .error-messageZ {
float: left;
display: none;
margin: 0px 10px;
height: 36px;
width: 500px;
overflow: hidden;
line-height: 36px;
white-space: nowrap;
color: #fff;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}

.audiojsZ .error-messageZ a {
color: #eee;
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #999;
white-space: wrap;
}

.audiojsZ .playZ {
background: url(‘audiojs/player-graphics.gif’) -2px -1px no-repeat;
}

.audiojsZ .loadingZ {
background: url(‘audiojs/player-graphics.gif’) -2px -31px no-repeat;
}

.audiojsZ .errorZ {
background: url(‘audiojs/player-graphics.gif’) -2px -61px no-repeat;
}

.audiojsZ .pauseZ {
background: url(‘audiojs/player-graphics.gif’) -2px -91px no-repeat;
}

.playingZ .playZ, .playingZ .loadingZ, .playingZ .errorZ {
display: none;
}

.playingZ .pauseZ {
display: block;
}

.loadingZ .playZ, .loadingZ .pauseZ, .loadingZ .errorZ {
display: none;
}

.loadingZ .loadingZ {
display: block;
}

.errorZ .timeZ, .errorZ .playZ, .errorZ .pauseZ, .errorZ .scrubberZ, .errorZ .loadingZ {
display: none;
}

.errorZ .errorZ {
display: block;
}

.errorZ .play-pauseZ p {
cursor: auto;
}

.errorZ .error-messageZ {
display: block;
}

/* responsiveness */

@media (max-width: 600px) {
.visible-welcome {
width: 100%;
height: 100%;
display: block;
border-radius: 7px;
background-color: #E9E0D1;
left: 0px;
z-index: 2001;
left: 0;
top: 0;
/* transition: left 0.7s ease; */
}
.welcome-content {
height: 80%;
}
div.previous-next-button {
margin-left: 20%;
}
button.welcome-button {
margin-left: 5%;
font-size: 0.8em;
width: 50%;
}
button.second-welcome-previous-button, button.third-welcome-previous-button, button.fourth-welcome-previous-button, button.fifth-welcome-previous-button {
font-size: 0.8em;
width: 25%;
left: 25%
}
button.second-welcome-next-button, button.third-welcome-next-button, button.fourth-welcome-next-button, button.fifth-welcome-next-button {
font-size: 0.8em;
width: 25%;
}
div.custom-popup.visible {
display: block;
position: fixed;
width: 303px;
height: 76px;
border-radius: 7px;
background-color: #FFFFFF;
color: #B0276C;
padding: 0;
cursor: pointer;
z-index: 2000;
left: 20px;
right: 20px;
font-size: 0.8em;
}
div.popup-image {
display: inline;
width: 70px;
float: left;
}
div.popup-image>img {
width: 76px;
min-height: 76px;
height: 100%;
}
div.popup-details {
display: inline;
float: left;
width: 60%;
margin-top: 10px;
padding: 0;
z-index: 2000;
margin-left: 10px;
text-align: left;
}
div.popup-details>h2 {
display: inline;
color: #B0276C;
margin-left: 10px;
font-size: 0.9em;
width: 100%;
}
div.popup-details>p {
display: inline;
margin-left: 10px;
}
div.arrow-link {
display: inline;
width: 30px;
height: 20px;
float: right;
background-image: url(‘svg/popup-arrow.svg’);
background-repeat: no-repeat;
background-position: 50%;
padding-top: 56px;
}
.sidebar.visible {
width: 100%;
height: 100%;
display: block;
/* position: absolute; */
border-radius: 7px;
background-color: #E9E0D1;
z-index: 2001;
top: 0;
left: 0;
}
div.sidebar-content {
overflow-y: scroll !important;
overflow-x: hidden;
height: 100%;
width: 100%;
}
.sidebar-audio-player {
position: fixed;
width: 100%;
bottom: 0;
}
.audiojsZ .scrubberZ {
position: relative;
float: left;
width: 50%;
background: #B0276C;
height: 16px;
margin: 10px;
border-left: 0px;
border-bottom: 0px;
overflow: hidden;
}
.audiojsZ .progressZ {
position: absolute;
top: 0px;
left: 0px;
height: 16px;
width: 0px;
background: #600;
z-index: 1;
}
.audiojsZ .loadedZ {
position: absolute;
float: left;
top: 0px;
left: 0px;
height: 16px;
background: #FFFFFF;
width: 50%;
}
.audiojsZ .timeZ {
float: left;
height: 36px;
line-height: 36px;
margin: 0px 0px 0px 6px;
padding: 0px 6px 0px 12px;
border-left: 1px solid #EF7FC2;
color: #B0276C;
/* text-shadow: 1px 1px 0px #B0276C; */
}
}