/** * Javascript to handle open street map for multiple properties */ (function ($) { "use strict"; if ( typeof propertiesMapData !== "undefined" ) { if ( 0 < propertiesMapData.length ) { var tileLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' } ); // get map bounds var mapBounds = []; for( var i = 0; i < propertiesMapData.length; i++ ) { if ( propertiesMapData[i].lat && propertiesMapData[i].lng ) { mapBounds.push( [ propertiesMapData[i].lat, propertiesMapData[i].lng ] ); } } // Basic map var mapCenter = L.latLng( 27.664827, -81.515755 ); // given coordinates not going to matter 99.9% of the time but still added just in case. if ( 1 == mapBounds.length ) { mapCenter = L.latLng( mapBounds[0] ); // this is also not going to effect 99% of the the time but just in case of one property. } var mapDragging = (L.Browser.mobile) ? false : true; // disabling one finger dragging on mobile but zoom with two fingers will still be enabled. var mapOptions = { dragging: mapDragging, center: mapCenter, zoom: 10, zoomControl: false, tap: false, layers: [tileLayer] }; var propertiesMap = L.map( 'listing-map', mapOptions ); L.control.zoom( { position : 'bottomleft' } ).addTo( propertiesMap ); propertiesMap.scrollWheelZoom.disable(); if ( 1 < mapBounds.length ) { propertiesMap.fitBounds( mapBounds ); // fit bounds should work only for more than one properties } var markers = L.markerClusterGroup({ chunkedLoading: true, //singleMarkerMode: true, spiderfyOnMaxZoom: true }); for( var i = 0; i < propertiesMapData.length; i++ ) { if ( propertiesMapData[i].lat && propertiesMapData[i].lng ) { var propertyMapData = propertiesMapData[i]; var markerLatLng = L.latLng( propertyMapData.lat, propertyMapData.lng ); var markerOptions = { riseOnHover: true }; // Marker icon if ( propertyMapData.title ) { markerOptions.title = propertyMapData.title; } // Marker icon if ( propertyMapData.icon ) { var iconOptions = { iconUrl: propertyMapData.icon, iconSize: [42, 57], iconAnchor: [20, 57], popupAnchor: [1, -54] }; if ( propertyMapData.retinaIcon ) { iconOptions.iconRetinaUrl = propertyMapData.retinaIcon; } markerOptions.icon = L.icon( iconOptions ); } var propertyMarker = L.marker( markerLatLng, markerOptions ); // Marker popup var popupContentWrapper = document.createElement( "div" ); popupContentWrapper.className = 'osm-popup-content'; var popupContent = ""; if( propertyMapData.thumb ) { popupContent += '' + propertyMapData.title + ''; } if ( propertyMapData.title ) { popupContent += '
' + propertyMapData.title + '
'; } if( propertyMapData.price ) { popupContent += '

' + propertyMapData.price + '

'; } popupContentWrapper.innerHTML = popupContent; propertyMarker.popupContents = popupContentWrapper; propertyMarker.bindPopup( popupContentWrapper ); markers.addLayer(propertyMarker); } } propertiesMap.addLayer( markers ); } else { // Fallback Map in Case of No Properties var fallbackLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution : '© OpenStreetMap contributors' } ); var fallback_lat, fallback_lng; if (undefined !== propertiesMapOptions.fallback_location && propertiesMapOptions.fallback_location.lat && propertiesMapOptions.fallback_location.lng) { fallback_lat = propertiesMapOptions.fallback_location.lat; fallback_lng = propertiesMapOptions.fallback_location.lng; } else { // Default location of Florida in fallback map. fallback_lat = '27.664827'; fallback_lng = '-81.515755'; } var fallbackMapOptions = { center : [fallback_lat, fallback_lng], zoom : 12 }; var fallbackMap = L.map( 'listing-map', fallbackMapOptions ); fallbackMap.addLayer( fallbackLayer ); } } // Add custom class to zoom control to apply z-index for modern variation $(".leaflet-control-zoom").parent(".leaflet-bottom").addClass("rh_leaflet_controls_zoom"); })(jQuery);