');
infowindow.open(map, this);
});
map.fitBounds(bounds);
var boundsListener = google.maps.event.addListener((map), 'idle', function (event) {
this.setZoom(12);
google.maps.event.removeListener(boundsListener);
});
}
} else if( maptype == 'openstreetmap' ) {
var element = document.getElementById('openstreetmap_map');
if ( element != null ) {
var osm_api = jQuery( '#openstreetmap_map' ).data( 'key' );
var stores = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
49.323724927512444,
-123.10366058280336 ]
},
"properties": {
"iconSize": [40, 40],
"icon": "https://vip-vancouver.com/wp-content/plugins/golo-framework/assets/images/map-marker-icon.png",
"title": "Royal Canyon HOME INSPECTION",
"url": "https://vip-vancouver.com/?post_type=place&p=6784",
"cate": "VIP Business Directory",
"rating": "0",
"review": "0",
"price": "",
}
}
]
};
stores.features.forEach(function(store, i){
store.properties.id = i;
});
var container = L.DomUtil.get('openstreetmap_map'); if(container != null){ container._leaflet_id = null; }
var osm_map = new L.map('openstreetmap_map');
osm_map.on('load', onMapLoad);
osm_map.setView([49.323724927512444, -123.10366058280336], 12);
function onMapLoad(){
var titleLayer_id = 'mapbox/streets-v11';
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + osm_api, {
attribution: 'Map data ©
OpenStreetMap',
id: titleLayer_id,
tileSize: 512,
zoomOffset: -1,
accessToken: osm_api
}).addTo(osm_map);
/**
* Add all the things to the page:
* - The location listings on the side of the page
* - The markers onto the map
*/
addMarkers();
};
function flyToStore(currentFeature) {
osm_map.flyTo(currentFeature.geometry.coordinates, osm_level);
}
/* This will let you use the .remove() function later on */
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}
function addMarkers() {
/* For each feature in the GeoJSON object above: */
stores.features.forEach(function(marker) {
/* Create a div element for the marker. */
var el = document.createElement('div');
/* Assign a unique `id` to the marker. */
el.id = "marker-" + marker.properties.id;
/* Assign the `marker` class to each marker for styling. */
el.className = 'marker';
el.style.backgroundImage = 'url("https://vip-vancouver.com/wp-content/plugins/golo-framework/assets/images/map-marker-icon.png")';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
/**
* Create a marker using the div element
* defined above and add it to the map.
**/
var PlaceIcon = L.Icon.extend({
options: {
className: 'marker-' + marker.properties.id,
iconSize: [40, 40],
shadowSize: [50, 64],
iconAnchor: [20, 20],
shadowAnchor: [4, 62],
popupAnchor: [0, -12]
}
});
var icon = new PlaceIcon({iconUrl: "https://vip-vancouver.com/wp-content/plugins/golo-framework/assets/images/map-marker-icon.png"});
var rating_html = '';
if( marker.properties.rating ) {
rating_html =
'
' +
'' + marker.properties.rating + '' +
'' +
'
';
}
var cate = "";
if (marker.properties.cate != null) {
cate = marker.properties.cate;
}
new L.marker([marker.geometry.coordinates[0], marker.geometry.coordinates[1]], {icon: icon}).addTo(osm_map).bindPopup( '
' +
'
' +
'
' +
'
' +
cate +
'
' +
'
' +
'
' +
'
' +
'
' +
rating_html +
'(' + marker.properties.review + ' reviews)' +
'
' +
'
' +
'' + marker.properties.price + '' +
'
' +
'
' +
'
' +
'
', { maxWidth : 325 } );
el.addEventListener('click', function(e){
/* Fly to the point */
flyToStore(marker);
/* Highlight listing in sidebar */
var activeItem = document.getElementsByClassName('active');
e.stopPropagation();
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
});
});
}
}
} else {
var element = document.getElementById('mapbox_map');
if ( element != null ) {
var mapbox_api = jQuery( '#mapbox_map' ).data( 'key' );
mapboxgl.accessToken = mapbox_api;
var mapbox_maps = new mapboxgl.Map({
container: 'mapbox_map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 12,
center: [-123.10366058280336, 49.323724927512444],
});
mapbox_maps.addControl(new mapboxgl.NavigationControl());
var stores = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-123.10366058280336,
49.323724927512444 ]
},
"properties": {
"iconSize": [40, 40],
"icon": "https://vip-vancouver.com/wp-content/plugins/golo-framework/assets/images/map-marker-icon.png",
"url": "https://vip-vancouver.com/?post_type=place&p=6784",
"title": "Royal Canyon HOME INSPECTION",
"cate": "VIP Business Directory",
"rating": "0",
"review": "0",
"price": "",
}
}
]
};
stores.features.forEach(function(store, i){
store.properties.id = i;
});
/**
* Wait until the map loads to make changes to the map.
*/
mapbox_maps.on('load', function (e) {
/**
* This is where your '.addLayer()' used to be, instead
* add only the source without styling a layer
*/
mapbox_maps.addLayer({
"id": "locations",
"type": "symbol",
/* Add a GeoJSON source containing place coordinates and information. */
"source": {
"type": "geojson",
"data": stores
},
"layout": {
"icon-image": "",
"icon-allow-overlap": true,
}
});
/**
* Add all the things to the page:
* - The location listings on the side of the page
* - The markers onto the map
*/
addMarkers();
});
function flyToStore(currentFeature) {
mapbox_maps.flyTo({
center: currentFeature.geometry.coordinates,
zoom: 12 });
}
function createPopUp(currentFeature) {
var popUps = document.getElementsByClassName('mapboxgl-popup');
/** Check if there is already a popup on the map and if so, remove it */
if (popUps[0]) popUps[0].remove();
var rating_html = '';
if( currentFeature.properties.rating ) {
rating_html =
'
' +
'' + currentFeature.properties.rating + '' +
'' +
'
';
}
var cate = "";
if (currentFeature.properties.cate != null) {
cate = currentFeature.properties.cate;
}
var popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat(currentFeature.geometry.coordinates)
.setHTML('
' +
'
' +
'
' +
'
' +
cate +
'
' +
'
' +
'
' +
'
' +
'
' +
rating_html +
'(' + currentFeature.properties.review + ' reviews)' +
'
' +
'
' +
'' + currentFeature.properties.price + '' +
'
' +
'
' +
'
' +
'
')
.addTo(mapbox_maps);
}
/* This will let you use the .remove() function later on */
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}
mapbox_maps.on('click', function(e) {
/* Determine if a feature in the "locations" layer exists at that point. */
var features = map.queryRenderedFeatures(e.point, {
layers: ['locations']
});
/* If yes, then: */
if (features.length) {
var clickedPoint = features[0];
/* Fly to the point */
flyToStore(clickedPoint);
/* Close all other popups and display popup for clicked store */
createPopUp(clickedPoint);
}
});
function addMarkers() {
/* For each feature in the GeoJSON object above: */
stores.features.forEach(function(marker) {
/* Create a div element for the marker. */
var el = document.createElement('div');
/* Assign a unique `id` to the marker. */
el.id = "marker-" + marker.properties.id;
/* Assign the `marker` class to each marker for styling. */
el.className = 'marker';
el.style.backgroundImage = 'url(' + marker.properties.icon + ')';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
/**
* Create a marker using the div element
* defined above and add it to the map.
**/
new mapboxgl.Marker(el, { offset: [0, -50/2] })
.setLngLat(marker.geometry.coordinates)
.addTo(mapbox_maps);
el.addEventListener('click', function(e){
/* Fly to the point */
flyToStore(marker);
/* Close all other popups and display popup for clicked store */
createPopUp(marker);
/* Highlight listing in sidebar */
var activeItem = document.getElementsByClassName('active');
e.stopPropagation();
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
});
});
}
}
}
} else {
setTimeout(checkGoogleMapsReadyLoad, 100);
}
}
checkGoogleMapsReadyLoad();
});
