/**
* Global Declarations/Initializations
*/
let _lat = $('#map_setup-info').data('_lat'), //39.8283
_lng = $("#map_setup-info").data('_lng'), //-98.5795
_zoom = $("#map_setup-info").data('_zoom'), //2
_q = $("#map_setup-info").data("_q"),
_cronNumber = $("#map_setup-info").data("_cron_number"),
_pid = $("#map_setup-info").data("_pid"),
mapLoad_ = true,
device_markers = {},
map,
singlePointer,
markerClusterer;
let icons = { parking: { icon: 'https://tarantelleromane.files.wordpress.com/2016/10/map-marker.png?w=50' } };
let cluster_styles = [
{
url: "/2.0/images/markerpackage/clusters/dashMap/sm-cluster1.svg",
height: 45,
width: 45,
textColor: 'white'
},
{
url: "/2.0/images/markerpackage/clusters/dashMap/sm-cluster2.svg",
height: 35,
width: 35,
textColor: 'white'
}
];
let cluster_options = {
gridSize: 50,
//enableRetinaIcons: false,
maxZoom: 17,
minimumClusterSize: 10,
styles: cluster_styles
//zoomOnClick: false
};
if (_q != "") _zoom = 7;
if (_lat == "") _lat = 39.8283;
if (_lng == "") _lng = -98.5795;
if (_zoom == "") _zoom = 3;
// Instatiate Custom Cluster
let customClusters = new CustomClusters();
function customizeMarker(color, pointer = true) {
content = window.singlePointer;
var regex = new RegExp('fill="[^"]*"' + (pointer ? '(\\s*\\/>)' : ''), 'g');
let modifiedContent = content.replace(regex, 'fill="' + color + '"' + (pointer ? '$1' : ''));
return 'data:image/svg+xml,' + encodeURIComponent(modifiedContent);
}
async function fetchSvg(path, property) {
const res = await fetch(path);
window[property] = await res.text();
}
function infowindow_closeout() {
document.getElementById("content").innerHTML = "";
var popup_conts = document.querySelectorAll('.popup-container');
popup_conts.forEach(function (element) {
element.style.opacity = '0';
});
}
function showDeviceData(orgid, stype, audienceHash, targetradius) {
let isSearch = stype || $('#vtype').selectize()[0].selectize.getValue().length;
if (!isSearch) {
if (!customClusters.isNeedRefresh()) {
customClusters.display();
return
};
}
if (!mapLoad_) return;
if (markerClusterer) {
markerClusterer.clearMarkers();
}
customClusters.clearClusters();
customClusters.setType();
$('.map-overlay--ooh-placeholder').css('display', 'block');
var latlon = '&latne=' + map.getBounds().getNorthEast().lat() + '&latsw=' + map.getBounds().getSouthWest().lat() + '&lonne=' + map.getBounds().getNorthEast().lng() + '&lonsw=' + map.getBounds().getSouthWest().lng() + "&zoom=" + map.getZoom();
var urlprint = '../../buyandplace/bp_data_v2.php?pid=' + _pid + latlon + "&dataType=" + (isSearch ? '' : customClusters.getType());
var vtypee = [];
vtypee = $('#vtype').selectize()[0].selectize.getValue();
$.ajax({
url: urlprint,
type: 'GET',
dataType: 'json',
data: {
action: 'get_all_devices_for_map',
bsorg: document.getElementById('bsorg').value,
lats: [map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lat()],
lons: [map.getBounds().getNorthEast().lng(), map.getBounds().getSouthWest().lng()],
vt: vtypee,
orgid: orgid,
stype: stype
}
}).done(function (response) {
if (response.status) {
device_markers = {};
if ((map.getZoom() >= 1 && map.getZoom() <= 8) && !isSearch) {
customClusters.setType();
customClusters.setClusters(response.data);
customClusters.display();
document.getElementById('loadingring').style.display = 'none';
}
else {
addDeviceMarkers(response.data, audienceHash, targetradius);
customClusters.clearClusters();
}
}
});
}
function formatNumber(number) {
const absNumber = Math.abs(number);
if (absNumber >= 1e9) {
return (number / 1e9).toFixed(0) + 'B';
} else if (absNumber >= 1e6) {
return (number / 1e6).toFixed(0) + 'M';
} else if (absNumber >= 1e3) {
return (number / 1e3).toFixed(0) + 'K';
} else {
return number.toString();
}
}
function addDeviceMarkers(devices, audienceHash, targetradius) {
$('.map-overlay--ooh-placeholder').css('display', 'none');
var infoWindow = new google.maps.InfoWindow;
var radius = targetradius;
var audience_hash = audienceHash;
if (audience_hash) {
$.when(
$.ajax({
url: "ajax/bp-load-locations.php",
method: "POST",
data: { audience_hash: audience_hash },
dataType: "JSON",
success: function (data) {
$.each(data, function (index, value) {
var _lat = parseFloat(value.lat);
var _lng = parseFloat(value.lon);
var marker = new google.maps.Marker({
position: { lat: _lat, lng: _lng },
map: map,
name: value.locname,
city: value.city,
state: value.state,
address: value.address,
icon: "https://maps.google.com/mapfiles/ms/icons/green-dot.png"
});
marker.addListener('click', function () {
if ($('#user_loc_styles').length) {
$('#user_loc_styles').remove();
}
var this_m = $(this);
var name = this_m[0].name;
var addr = this_m[0].address;
var state = this_m[0].state;
var city = this_m[0].city;
var infowincontent = document.createElement('div');
infowincontent.setAttribute('id', 'infowinmarkup');
infowincontent.innerHTML = '
' + name + '
Address: ' + addr + ' ' + city + ', ' + state + '
';
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
var fillColor = '#69e063';
var strokeColor = '#69e063';
if (radius !== "" && radius !== 0 && !isNaN(radius)) {
}
});
}
})).done(function () {
});
}
$.each(devices, function (index, device) {
device_markers[device.id] = new google.maps.Marker({
position: new google.maps.LatLng(device.latitude, device.longitude),
//icon: "/2.0/images/markerpackage/red-marker.svg"
icon: customizeMarker(device.color || '#FF1325')
});
//binding click event to marker, so popup could be opened.
device_markers[device.id].addListener('click', function () {
postData(`../../buyandplace/bp_data_v2.php?campaignLocationDetail=yes&id=${device.id}`).then((response) => {
let device = response.data;
var str = device.partnerscreenname;
var name = str.replace(/\s+/g, '');
var str2 = device.partneradtypes;
var str3 = device.prem;
var str4 = device.partneradslotduration;
var ventype = device.partnervenuetype;
var martype = "https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red.png";
if (ventype == "Ad Agency") {
martype = "https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_greenA.png";
}
var partnerat = str2.replace(/\s+/g, '');
$('body').addClass('modal-open');
$('#map_modal').addClass('open');
var svw;
var pv;
if (device.prem == 1) {
svw = device.mod_streetview;
pv = device.mod_pic;
} else {
svw = 'http://maps.google.com/maps?q=&layer=c&cbll=' + device.latitude + ',' + device.longitude + '&cbp=11,0,0,0,0 target=_blank';
pv = 'https://maps.googleapis.com/maps/api/streetview?size=200x150&location=' + device.latitude + ',' + device.longitude + '&fov=90&heading=235&pitch=10&key=AIzaSyDlUazOU0SdoHPmEykI-24fcj8g2cuZ0nY';
}
var name2 = name.substring(0, 20);
var device_id = device.id;
$('#map_modal').attr('data-id', device_id);
//function to query data from map point - see ooh-partials/activity-ajax.php
//get_point_data(device_id);
var $id_check = $('.campaign-single#lr' + device_id);
if ($id_check.length) {
$('#add_to_plan_btn').addClass('hide-this');
$('#rmv_from_plan_btn').removeClass('hide-this');
}
$('.map-modal__title').text(name2);
$('#map_location').text(device.country + " - " + device.region + ", " + device.city);
$('#owned_by').text(device.partnerpubname);
$('#type_of_media').text(device.partnervenuetype);
showHide($('#type_of_media'), !device.partnervenuetype)
showHide($('#owned_by'), !device.partnerpubname)
showHide($('#accepted_type'), !device.partneradtypes)
showHide($('#type_duration'), !device.partneradslotduration)
showHide($('#aspect_ration'), !device.partneraspectratio)
showHide($('#screen_resol'), !device.partnerscreenresolution)
showHide($('#orientation'), !device.orientation)
showHide($('#vitals'), !device.last24Updated)
showHide($('#vitalsCPP'), !device.last24avgCPP)
showHide($('#vitalsCPP2'), !device.last24avgCPP)
showHide($('#vitalsCPP3'), !device.last24avgCPP)
showHide($('#vitalsReq'), !device.last24totalReq)
showHide($('#vitalsImp'), !device.last24avgImp)
$('#accepted_type').text(device.partneradtypes);
$('#type_duration').text(device.partneradslotduration);
$('#aspect_ration').text(device.partneraspectratio);
$('#screen_resol').text(device.partnerscreenresolution);
$('#orientation').text(device.orientation);
var cpp = device.last24avgCPP * 2;
cpp = cpp.toFixed(2);
var cpp2 = device.last24avgCPP * 4;
cpp2 = cpp2.toFixed(2);
var cpp3 = device.last24avgCPP * 10;
cpp3 = cpp3.toFixed(2);
$('#vitals').text(device.last24Updated);
$('#vitalsCPP').text("$" + cpp);
$('#vitalsCPP2').text("$" + cpp2);
$('#vitalsCPP3').text("$" + cpp3);
$('#vitalsReq').text(device.last24totalReq);
$('#vitalsImp').text(device.last24avgImp);
function showHide($el, hide = true) {
if (hide) {
$el.closest('p').hide();
}
else {
$el.closest('p').show();
}
}
$('.mod_pic').remove();
if (device.mod_pic) {
$('#map-modal__details_').append(`
Media Kit:
`);
}
var plan_click_function = 'addToPlan(' + device.id + ',"' + name + '","' + device.partnerscreenresolution + '","' + partnerat + '","' + str3 + '","' + str4 + '")';
$('#add_to_plan_btn').attr('onClick', plan_click_function);
//Streetview Embed
var panorama;
var pan_lat = parseFloat(device.latitude);
var pan_long = parseFloat(device.longitude);
var new_loc = { lat: pan_lat, lng: pan_long };
panorama = new google.maps.StreetViewPanorama(
document.getElementById('infowinstreet'),
{
position: new_loc,
pov: { heading: 165, pitch: 0 },
zoom: 1
});
//Map Embed
var map_embed = new google.maps.Map(document.getElementById('map_embed'), {
center: new_loc,
zoom: 14,
mapTypeControl: false,
fullscreenControl: false,
clickableIcons: false,
streetViewControl: false,
zoomControl: false
});
var center = new google.maps.LatLng(device.latitude, device.longitude);
// using global variable:
mapLoad_ = false;
map.panTo(center);
setTimeout(() => {
mapLoad_ = true;
}, 1000);
})
});
if (map.getBounds().contains(device_markers[device.id].getPosition()) && device.new == 1) {
google.maps.event.trigger(device_markers[device.id], 'click');
}
});
markerClusterer = new MarkerClusterer(map, device_markers, cluster_options);
document.getElementById('loadingring').style.display = 'none';
$('#bp_modal').removeClass('buildplan-modal--hide');
}
/**
* Map Hanlder/Renderer
*/
function initMap(geo, a, b, c, audienceHash, targetradius) {
var orgid = c;
var stype = b;
var geo = geo;
var us = {
lat: Number(_lat),
lng: Number(_lng)
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: Number(_zoom),
center: us,
mapTypeControl: true,
fullscreenControl: true,
clickableIcons: true,
streetViewControl: true,
zoomControl: true
});
if (_q) {
console.log('q is', _q);
var geocoder = new google.maps.Geocoder();
geocodeAddress(geocoder, map);
function geocodeAddress(geocoder, resultsMap) {
var address = _q;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
resultsMap.setZoom(9);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
} else {
//center map on user location
if (geo == 'no_geolocate') {
} else {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var loc_dot = new google.maps.InfoWindow;
loc_dot.setPosition(pos);
loc_dot.open(map);
map.setCenter(pos);
map.setZoom(10);
});
} else {
// Browser doesn't support Geolocation
}
}
}
// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
document.getElementById('tab1').appendChild(innerDiv);
innerDiv.innerHTML = '
Autocomplete search
';
var card = document.getElementById('pac-card');
var input = document.getElementById('pac-input');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
var autocomplete = new google.maps.places.Autocomplete(input);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo('bounds', map);
// Set the data fields to return when the user selects a place.
autocomplete.setFields(
['address_components', 'geometry', 'icon', 'name']);
var InfoWindows = new google.maps.InfoWindow({
//pixelOffset: new google.maps.Size(500,0)
});
var infowindowContent = document.getElementById('infowindow-content');
InfoWindows.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function () {
InfoWindows.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
//marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
//Initiate 2 clicks on the zoom in button to refresh the map markers after search
$('.gm-control-active[aria-label="Zoom in"]').trigger('click');
$('.gm-control-active[aria-label="Zoom in"]').trigger('click');
});
map.addListener('idle', () => showDeviceData(orgid, stype, audienceHash, targetradius));
map.setZoom(4);
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function () {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
document.getElementById('use-strict-bounds')
.addEventListener('click', function () {
autocomplete.setOptions({ strictBounds: this.checked });
});
}
/**
* Additionals related to Map
*/
$(document).ready(function () {
$('.map-modal__mask').click(function () {
$('#map_modal').removeClass('open');
$('body').removeClass('modal-open');
$('#add_to_plan_btn').removeClass('hide-this');
$('#rmv_from_plan_btn').addClass('hide-this');
$('.map-modal__details--ajax p span').addClass('loading-data').removeClass('data-loaded');
$('.map-modal__details--ajax .loading-dots').removeClass('hide-this');
});
$('#map_modal_close').click(function () {
mapLoad_ = false;
setTimeout(() => {
mapLoad_ = true;
}, 2000);
$('#map_modal').removeClass('open');
$('body').removeClass('modal-open');
$('#add_to_plan_btn').removeClass('hide-this');
$('#rmv_from_plan_btn').addClass('hide-this');
$('.map-modal__details--ajax p span').addClass('loading-data').removeClass('data-loaded');
$('.map-modal__details--ajax .loading-dots').removeClass('hide-this');
});
$('#add_to_plan_btn').click(function () {
$(this).toggleClass('waiting');
//$('#rmv_from_plan_btn').removeClass('hide-this');
});
$('#rmv_from_plan_btn').click(function () {
$(this).addClass('hide-this');
$('#add_to_plan_btn').removeClass('hide-this');
});
fetchSvg('/2.0/images/markerpackage/clusters/dashMap/marker.svg', 'singlePointer');
});
// Example POST method implementation:
async function postData(url = '') {
// Default options are marked with *
const response = await fetch(url, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
// mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
});
return response.json(); // parses JSON response into native JavaScript objects
}