@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";
.featured-image-content {
.map,
.mapboxgl-map {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.mapboxgl-marker {
background-image: url('/wp-content/themes/heygirls/assets/images/map-pin.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 40px;
height: 40px;
cursor: pointer;
svg {
display: none;
}
}
.mapboxgl-ctrl button,
.mapboxgl-popup-close-button {
min-width: auto;
}
.marker-details {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
padding: 1.5rem 3rem 1.5rem 2rem;
background: rgba($white, 0.7);
justify-content: space-between;
@include media-breakpoint-down(lg) {
flex-direction: column;
}
p {
display: flex;
align-items: center;
@include media-breakpoint-down(lg) {
&:first-child {
margin-bottom: 0.5rem;
}
}
}
.close-marker-details {
position: absolute;
right: 0;
top: 0;
padding: 0.5rem;
}
&.active {
display: flex;
}
}
.featured-image-content .image-side .marker-details p img {
margin: 0;
margin-right: 1rem;
}
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RyYXRlZ2lxIiwiYSI6ImNreXNveWJkZTE1bjcyeG81MmQ3cmVnZ24ifQ.Im8CAJqnk2hSvmeL2gfZtA';
const mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
let map = new mapboxgl.Map({
container: 'js-partners-map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-3.810457, 54.345678],
zoom: 5,
style: 'mapbox://styles/strategiq/ckyswrclq1dph14miqzadhgdd',
});
let items = document.querySelectorAll( '.js-map-marker' );
for ( let i = 0; i < items.length; i++ ) {
let item = items[ i ];
let address = item.getAttribute('data-address');
let count = item.getAttribute('data-count');
let lat = item.getAttribute('data-lat');
let lng = item.getAttribute('data-lng');
let lnglat = [lng, lat];
// mapboxClient.geocoding.forwardGeocode({
// query: address,
// autocomplete: false
// })
// .send()
// .then((response) => {
// const feature = response.body.features[0];
// Create a marker and add it to the map.
let marker = new mapboxgl.Marker().setLngLat(lnglat).addTo(map);
marker.getElement().addEventListener( 'click', (e) => {
// remove active from all
[].forEach.call(document.querySelectorAll('.js-marker-details'), function (el) {
el.classList.remove('active');
});
// show the details for this marker
document.querySelector('.js-marker-details.' + count).classList.add('active');
// zoom into marker
map.flyTo({
zoom: 9,
center: [
marker._lngLat.lng,
marker._lngLat.lat
],
essential: true
});
});
//});
}
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
jQuery(function($){
$('.js-close-marker-details').click(function(e) {
e.preventDefault();
$('.js-marker-details').removeClass('active');
map.flyTo({
zoom: 5,
center: [-3.810457, 54.345678],
essential: true
});
});
});
; ?>/assets/images/pin.svg){kind=small}