var platform = navigator?.userAgentData?.platform || navigator?.platform || 'unknown'; window.defaultParameters = [ 'events:null', 'mfr:null', 'mfrname:null', 'vesselname:null', 'company:null', 'vessel_id:null' ]; var pathString = ''; window.updateUrlSegments = function (key, value) { var pathArray = defaultParameters; for (var index = 0; index < pathArray.length; index++) { values = pathArray[index].split(':'); if (values[0] != undefined && values[0] == key) { values[1] = value; pathArray[index] = values.join(':'); } } pathString = pathArray.join('-'); window.history.replaceState({}, 'search', '/charter-events-search/' + pathString); }; function iOSversion() { if (/iP(hone|od|ad)/.test(platform)) { // supports iOS 2.0 and later var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/); return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; } } function takeMeThere(lat, lng) { // If it's an iPhone.. if ((platform.indexOf("iPhone") !== -1) || (platform.indexOf("iPod") !== -1)) { var ver = iOSversion() || [0]; var protocol = 'http://'; if (ver[0] >= 6) { protocol = 'maps://'; } window.location = protocol + 'maps.apple.com/maps?ll=' + lat + ',' + lng + '&z=18&t=k'; } else { window.open('http://maps.google.com/maps?z=18&t=k&q=loc:' + lat + '+' + lng); } return false; } (function ($) { "use strict"; var map; var zoomLevel = 16; var mapType = 'terrain'; var centerCords = {}; centerCords.lat = 0; centerCords.lng = 0; // Locations var locations = []; // Infobox Output function locationData(vName, locationImg, locationTitle, infoLink, locationLat, locationLng, booth) { return ('
' + ' ' + vName + '
' + booth + '
' + '
' + locationTitle + '
') } window.agentDetailShow = function (res) { $('#agent_detail').modal('show'); var BrokerTitle = res.Broker.BrokerTitle != null ? `
${res.Broker.BrokerTitle}
` : ``; var AddressLine = res.Broker.AddressLine != null ? `${res.Broker.AddressLine}` : ``; var BrokerLocation = res.Broker.Location != null ? `${res.Broker.Location}` : ``; var BrokerOffice = res.Broker.Office != null ? `Office: ${res.Broker.Office}` : ``; var BrokerCell = res.Broker.Cell != null ? `Cell: ${res.Broker.Cell}` : ``; var BrokerEmail = res.Broker.Email != null ? `Email: ${res.Broker.Email}` : ``; $('#agent_detail_header_logo').prop('src', res.Broker.BrokerageLogo); var agentHtml = `

${res.Broker.BrokerName}

${BrokerTitle} ${AddressLine}${BrokerLocation}${BrokerOffice}${BrokerCell}${BrokerEmail}
`; $('#agent_detail').find('.modal-body').html(agentHtml); }; window.loadCharters = function (res) { locations = []; centerCords.lat = 26.113703862261723; centerCords.lng = -80.10718859504351; $('.showing-results').html(res.vessels.length + ' Results Found'); if (res.vessels.length > 0) { for (var v in res.vessels) { var centralBrokerageLogo = ''; if (!!res.vessels[v].CentralAgentBrokerageDisplayPicture) { centralBrokerageLogo = `brokerage logo`; } var infoURL = `https://vessel.yachtbroker.org/yacht-for-sale/${res.vessels[v].CentralAgentBrokerageID}/charter.php?id=${res.vessels[v].CentralAgentID}&vessel=${res.vessels[v].ID}`; var pdfURL = `https://vessel.yachtbroker.org/pdf/igy.php?key=956389e72061fc41fad137e3a47145970f9d461c&id=${res.vessels[v].CentralAgentID}&vessel=${res.vessels[v].ID}`; var markerIcon = ``; if (res.vessels[v].Location != '') { markerIcon += ``; } var booth = res.vessels[v]?.Charter.CharterEvent[0]?.EventBooth; var rowCharter = `
image

${res.vessels[v].VesselName != null ? res.vessels[v].VesselName : ''}

Guests: ${res.vessels[v].Charter != '' ? res.vessels[v].Charter.GuestCount : ''} | Cabins: ${res.vessels[v].CabinCount}

${res.vessels[v].DisplayLengthFeet}' (${res.vessels[v].DisplayLengthMeters} m) ${res.vessels[v].Manufacturer}

${booth}

${centralBrokerageLogo}
${markerIcon}
`; if (res.vessels[v].Location != '') { var vName = res.vessels[v].VesselName != null ? res.vessels[v].VesselName : ''; var dataArray = [locationData(vName, res.vessels[v].DisplayPicture.Thumbnail, `${res.vessels[v].DisplayLengthFeet}' ${res.vessels[v].Manufacturer}`, infoURL, res.vessels[v].Location.Latitude, res.vessels[v].Location.Longitude, booth), res.vessels[v].Location.Latitude, res.vessels[v].Location.Longitude, res.vessels[v].ID, ``]; locations.push(dataArray); } $('#charterRow').append(rowCharter); } } if (res.events != '' && res.events.EventLatitude != '' && res.events.EventLongitude != '') { centerCords.lat = res.events.EventLatitude; centerCords.lng = res.events.EventLongitude; zoomLevel = res.events.ZoomForMap; mapType = (res.events.MapType == 'Satellite' ? 'satellite' : 'terrain'); } else if (locations.length > 0) { centerCords.lat = locations[0][1]; centerCords.lng = locations[0][2]; } setTimeout(function () { $('.controls').show(); $('#loader').addClass('hidden'); mainMap(); }, 500); // setInterval(function(){ // $('.gm-style-pbc:visible').css('z-index','999'); // }, 50); } function callAPI(pageNumber = 1) { $('#charterRow').empty(); window.ajaxFailed = function () { swal('Sorry', 'Not found data for your search', 'error'); $('#loader').removeClass('hidden'); } var postData = {}; postData.events = $('#charterEvent option:selected').length > 0 ? $('#charterEvent option:selected').val() : null; postData.mfr = (postData.events != null && $('#mfrs option:selected').length > 0 && $('#mfrs option:selected').val().length > 0) ? $('#mfrs option:selected').val() : null; postData.vesselname = (postData.events != null && $('#vesselname option:selected').length > 0 && $('#vesselname option:selected').val().length > 0) ? $('#vesselname option:selected').text() : null; postData.vessel_id = (postData.events != null && $('#vesselname').length > 0 && $('#vesselname').val().length > 0) ? $('#vesselname').val() : null; postData.company = (postData.events != null && $('#company option:selected').length > 0 && $('#company option:selected').val().length > 0) ? $('#company option:selected').val() : null; postData.page = pageNumber; updateUrlSegments('events', postData.events ? postData.events : 'null'); updateUrlSegments('mfr', postData.mfr ? postData.mfr : 'null'); updateUrlSegments('mfrname', (postData.events != null && $('#mfrs option:selected').length > 0 && $('#mfrs option:selected').val().length > 0) ? $('#mfrs option:selected').text() : 'null'); updateUrlSegments('vesselname', postData.vesselname ? postData.vesselname : 'null'); updateUrlSegments('company', postData.company ? postData.company : 'null'); updateUrlSegments('vessel_id', postData.vessel_id ? postData.vessel_id : 'null'); callAjax('/charter-events-search-data', 'POST', postData, window.loadCharters); } $(document).ready(function () { $('#show_more').click(function () { $('#less_details').addClass('hidden'); $('#full_details').removeClass('hidden'); }); $('#show_less').click(function () { $('#full_details').addClass('hidden'); $('#less_details').removeClass('hidden'); }); $('#loader').removeClass('hidden'); $('#vesselname, #mfrs, #company').addClass('hidden'); $('#charterEvent').on('change', function (e) { updateUrlSegments('mfr', 'null'); updateUrlSegments('mfrname', 'null'); updateUrlSegments('vesselname', 'null'); updateUrlSegments('company', 'null'); if ($(this).val() == '') { updateUrlSegments('events', 'null'); window.location.href = window.location.href; } else { updateUrlSegments('events', $(this).val()); window.location.href = '/charter-events-search/' + pathString; } //callAPI(); return true; }); $('#vesselname, #mfrs, #company').on('change', function () { callAPI(); return true; }); if ($('#charterEvent').find('option:selected').length > 0 && $('#charterEvent').find('option:selected').val().length > 0) { callAPI(); $('#charterEvent').prop('style', false); $('#vesselname, #mfrs, #company').removeClass('hidden'); } else { $('#charterEvent').attr('style', 'animation: shake 0.4s ease-in-out 0s 1;box-shadow: 0 0 0.5em #DBA555;'); } }); function mainMap() { // Locations // ----------------------------------------------- // var ib = new InfoBox(); // Map Attributes // ----------------------------------------------- // var mapZoomAttr = $('#map').attr('data-map-zoom'); var mapScrollAttr = $('#map').attr('data-map-scroll'); if (typeof mapZoomAttr !== typeof undefined && mapZoomAttr !== false) { zoomLevel = parseInt(mapZoomAttr); } if (typeof mapScrollAttr !== typeof undefined && mapScrollAttr !== false) { var scrollEnabled = parseInt(mapScrollAttr); } else { var scrollEnabled = false; } // Main Map var map = new google.maps.Map(document.getElementById('map'), { tilt: 0, rotateControl: false, zoom: zoomLevel, scrollwheel: scrollEnabled, center: new google.maps.LatLng(centerCords.lat, centerCords.lng), mapTypeId: mapType, zoomControl: false, mapTypeControl: false, scaleControl: false, panControl: false, navigationControl: true, streetViewControl: false, gestureHandling: true, gestureHandlingOptions: { text: { touch: "use two fingers to move the map", scroll: "use ctrl + scroll to zoom the map", scrollMac: "use \u2318 + scroll to zoom the map" }, zindex: 999, }, // Google May Type styles: [{ "featureType": "poi", "elementType": "labels.text.fill", "stylers": [{ "color": "#747474" }, { "lightness": "23" }] }, { "featureType": "poi.attraction", "elementType": "geometry.fill", "stylers": [{ "color": "#f38eb0" }] }, { "featureType": "poi.government", "elementType": "geometry.fill", "stylers": [{ "color": "#ced7db" }] }, { "featureType": "poi.medical", "elementType": "geometry.fill", "stylers": [{ "color": "#ffa5a8" }] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{ "color": "#c7e5c8" }] }, { "featureType": "poi.place_of_worship", "elementType": "geometry.fill", "stylers": [{ "color": "#d6cbc7" }] }, { "featureType": "poi.school", "elementType": "geometry.fill", "stylers": [{ "color": "#c4c9e8" }] }, { "featureType": "poi.sports_complex", "elementType": "geometry.fill", "stylers": [{ "color": "#b1eaf1" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "lightness": "100" }] }, { "featureType": "road", "elementType": "labels", "stylers": [{ "visibility": "off" }, { "lightness": "100" }] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#ffd4a5" }] }, { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{ "color": "#ffe9d2" }] }, { "featureType": "road.local", "elementType": "all", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.local", "elementType": "geometry.fill", "stylers": [{ "weight": "3.00" }] }, { "featureType": "road.local", "elementType": "geometry.stroke", "stylers": [{ "weight": "0.30" }] }, { "featureType": "road.local", "elementType": "labels.text", "stylers": [{ "visibility": "on" }] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#747474" }, { "lightness": "36" }] }, { "featureType": "road.local", "elementType": "labels.text.stroke", "stylers": [{ "color": "#e9e5dc" }, { "lightness": "30" }] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [{ "visibility": "on" }, { "lightness": "100" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "color": "#d2e7f7" }] }] }); const imageBounds = { north: 26.11563057866834, south: 26.11087525153305, east: -80.10575093101153, west: -80.10904030250204, }; const yachtHavenImageBounds = { north: 18.337638541529333, south: 18.33438981018724, east: -64.91938467224139, west: -64.92356891830462, }; var historicalOverlay = new google.maps.GroundOverlay( "/map/docks.png", imageBounds ); var yachtHavenHistoricalOverlay = new google.maps.GroundOverlay( "/map/yachthaven.png", yachtHavenImageBounds ); historicalOverlay.setMap(map); yachtHavenHistoricalOverlay.setMap(map); // Marker highlighting when hovering listing item $('.listing-item-container').on('mouseover', function () { var listingAttr = $(this).data('marker-id'); if (listingAttr !== undefined) { var listing_id = $(this).data('marker-id'); allMarkers.forEach(element => { if (element.args == listing_id) { var marker_div = element.div; $(marker_div).addClass('clicked'); $(this).on('mouseout', function () { if ($(marker_div).is(":not(.infoBox-opened)")) { $(marker_div).removeClass('clicked'); } }); } }); } }); $('body').on('click', '.listing-item-image .mask', function () { var listingAttr = $(this).closest('.listing-item-container').data('marker-id'); if (listingAttr !== undefined) { allMarkers.forEach(element => { if (element.args == listingAttr) { map.panTo(element.latlng); } }); } }); // Infobox // ----------------------------------------------- // var boxText = document.createElement("div"); boxText.className = 'map-box' var currentInfobox; var boxOptions = { content: boxText, disableAutoPan: false, alignBottom: true, maxWidth: 0, pixelOffset: new google.maps.Size(-134, -55), zIndex: null, boxStyle: { width: "270px" }, closeBoxMargin: "0", closeBoxURL: "", infoBoxClearance: new google.maps.Size(25, 25), isHidden: false, pane: "floatPane", enableEventPropagation: false, }; var markerCluster, overlay, i; var allMarkers = []; var clusterStyles = [ { textColor: 'white', url: '', height: 50, width: 50 } ]; var markerIco; for (i = 0; i < locations.length; i++) { markerIco = locations[i][4]; var overlaypositions = new google.maps.LatLng(locations[i][1], locations[i][2]); overlay = new CustomMarker( overlaypositions, map, locations[i][3], markerIco, ); allMarkers.push(overlay); google.maps.event.addDomListener(overlay, 'click', (function (overlay, i) { return function () { ib.setOptions(boxOptions); boxText.innerHTML = locations[i][0]; ib.close(); ib.open(map, overlay); currentInfobox = locations[i][3]; var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]); map.panTo(latLng); // map.panBy(0,-90); google.maps.event.addListener(ib, 'domready', function () { $('.infoBox-close').click(function (e) { e.preventDefault(); ib.close(); $('.map-marker-container').removeClass('clicked infoBox-opened'); }); }); } })(overlay, i)); } // Marker Clusterer Init // ----------------------------------------------- // var options = { imagePath: 'images/', styles: clusterStyles, minClusterSize: 2, maxZoom: 15 }; markerCluster = new MarkerClusterer(map, allMarkers, options); google.maps.event.addDomListener(window, "resize", function () { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); // Custom User Interface Elements // ----------------------------------------------- // // Custom Zoom-In and Zoom-Out Buttons var zoomControlDiv = document.createElement('div'); var zoomControl = new ZoomControl(zoomControlDiv, map); function ZoomControl(controlDiv, map) { zoomControlDiv.index = 1; map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(zoomControlDiv); // Creating divs & styles for custom zoom control controlDiv.style.padding = '5px'; controlDiv.className = "zoomControlWrapper"; // Set CSS for the control wrapper var controlWrapper = document.createElement('div'); controlDiv.appendChild(controlWrapper); // Set CSS for the zoomIn var zoomInButton = document.createElement('div'); zoomInButton.className = "custom-zoom-in"; controlWrapper.appendChild(zoomInButton); // Set CSS for the zoomOut var zoomOutButton = document.createElement('div'); zoomOutButton.className = "custom-zoom-out"; controlWrapper.appendChild(zoomOutButton); // Setup the click event listener - zoomIn google.maps.event.addDomListener(zoomInButton, 'click', function () { map.setZoom(map.getZoom() + 1); }); // Setup the click event listener - zoomOut google.maps.event.addDomListener(zoomOutButton, 'click', function () { map.setZoom(map.getZoom() - 1); }); } } // Map Init var map = document.getElementById('map'); if (typeof (map) != 'undefined' && map != null) { google.maps.event.addDomListener(window, 'load', mainMap); } function CustomMarker(latlng, map, args, markerIco) { this.latlng = latlng; this.args = args; this.markerIco = markerIco; this.setMap(map); } CustomMarker.prototype = new google.maps.OverlayView(); CustomMarker.prototype.draw = function () { var self = this; var div = this.div; if (!div) { div = this.div = document.createElement('div'); div.className = 'map-marker-container'; div.innerHTML = '
' + '
' + '
' + self.markerIco + '
' + '
' + self.markerIco + '
' + '
' + '
' + '
' // Clicked marker highlight google.maps.event.addDomListener(div, "click", function (event) { $('.map-marker-container').removeClass('clicked infoBox-opened'); google.maps.event.trigger(self, "click"); $(this).addClass('clicked infoBox-opened'); }); if (typeof (self.args.marker_id) !== 'undefined') { div.dataset.marker_id = self.args.marker_id; } var panes = this.getPanes(); panes.overlayImage.appendChild(div); } var point = this.getProjection().fromLatLngToDivPixel(this.latlng); if (point) { div.style.left = (point.x) + 'px'; div.style.top = (point.y) + 'px'; } }; CustomMarker.prototype.remove = function () { if (this.div) { this.div.parentNode.removeChild(this.div); this.div = null; $(this).removeClass('clicked'); } }; CustomMarker.prototype.getPosition = function () { return this.latlng; }; // -------------- Custom Map Marker / End -------------- // document.addEventListener('click', function (e) { if (e.target && e.target.getAttribute('data_modal') != undefined && e.target.getAttribute('data_modal') == 'agent_detail') { $('#agent_detail').find('.modal-body').empty(); callAjax('/charter-agent', 'POST', { BrokerID: e.target.getAttribute('data_agent_id'), BrokerageLogo: e.target.getAttribute('data_brokerage_logo') }, window.agentDetailShow); } }); })(this.jQuery);