Edit file File name : maps.js Content :var properties = { "data": [ { "id": 1, "title": "Real Luxury Villa", "listing_for": "Sale", "is_featured": true, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.541599, "longitude": -0.112588, "address": "123 Kathal St. Tampa City", "area": 2, "bathroom": 3, "garage": 1, "image": "img/properties/properties-list-1.jpg", "type_icon": "img/building.png", }, { "id": 2, "title": "Park Avenue", "listing_for": "Rent", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.538395, "longitude": -0.097418, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-2.jpg", "type_icon": "img/building.png", }, { "id": 3, "title": "Park Avenue", "listing_for": "Rent", "is_featured": true, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.539212, "longitude": -0.118403, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-3.jpg", "type_icon": "img/building.png", }, { "id": 4, "title": "Big Head House", "listing_for": "Sale", "is_featured": true, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.522340, "longitude": -0.037894, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-4.jpg", "type_icon": "img/building.png", }, { "id": 5, "title": "Big Head House", "listing_for": "Rent", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.513965, "longitude": -0.038837, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-5.jpg", "type_icon": "img/building.png", }, { "id": 6, "title": "Modern Family Home", "listing_for": "Sale", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.503965, "longitude": -0.058837, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-1.jpg", "type_icon": "img/building.png", }, { "id": 7, "title": "Modern Family Home", "listing_for": "Rent", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.555385, "longitude": -0.128274, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-2.jpg", "type_icon": "img/building.png", }, { "id": 8, "title": "Relaxing Apartment", "listing_for": "Sale", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.560935, "longitude": -0.111365, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-3.jpg", "type_icon": "img/building.png", }, { "id": 9, "title": "Relaxing Apartment", "listing_for": "Sale", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.543803, "longitude": -0.036607, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-4.jpg", "type_icon": "img/building.png", }, { "id": 10, "title": "Modern Family Home", "listing_for": "Sale", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.527306, "longitude": -0.140977, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-5.jpg", "type_icon": "img/building.png", }, { "id": 11, "title": "Park Avenue", "listing_for": "Sale", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.558907, "longitude": -0.041842, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-1.jpg", "type_icon": "img/building.png", }, { "id": 12, "title": "Park Avenue", "listing_for": "Sale", "is_featured": true, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.550644, "longitude": -0.103493, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-2.jpg", "type_icon": "img/building.png", }, { "id": 13, "title": "Park Avenue", "listing_for": "Sale", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.532112, "longitude": -0.051885, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-3.jpg", "type_icon": "img/building.png", }, { "id": 14, "title": "Modern Family Home", "listing_for": "Sale", "is_featured": true, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.531311, "longitude": -0.052314, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-4.jpg", "type_icon": "img/building.png", }, { "id": 15, "title": "Relaxing Apartment", "listing_for": "Sale", "is_featured": false, 'author': 'Jhon Doe', 'date': '5 days ago', "latitude": 51.530189, "longitude": -0.078750, "address": "123 Kathal St. Tampa City,", "area": 2, "room": 4, "bathroom": 3, "balcony": 3, "lounge": 1, "garage": 1, "image": "img/properties/properties-list-5.jpg", "type_icon": "img/building.png", } ] }; function drawInfoWindow(property) { var image = 'img/logo.png'; if (property.image) { image = property.image } var title = 'N/A'; if (property.title) { title = property.title } var address = ''; if (property.address) { address = property.address } var area = 1000; if (property.area) { area = property.area } var bedroom = 5; if (property.bedroom) { bedroom = property.bedroom } var bathroom = 5; if (property.bathroom) { bathroom = property.bathroom } var garage = 1; if (property.garage) { garage = property.garage } var price = 253.33; if (property.price) { price = property.price } var ibContent = ''; ibContent = "<div class='map-properties'>" + "<div class='map-img'>" + "<img src='" + image + "'/><div class=\"price-ratings-box\">\n" + " </div>" + "</div>" + "<div class='map-content'>" + "<h4><a href='properties-details.html'>" + title + "</a></h4>" + "<p class='address'> <i class='flaticon-pin'></i>" + address + "</p>" + "<div class='map-properties-fetures'> " + "<span><i class='flaticon-area'></i> " + area + " sqft</span> " + "<span><i class='flaticon-hotel'></i> " + bedroom + " Beds</span> " + "<span><i class='flaticon-bathroom'></i> " + bathroom + " Baths</span> " + "</div>" + "</div>"; return ibContent; } function insertPropertyToArray(property, layout) { var image = 'img/logo.png'; if (property.image) { image = property.image } var title = 'N/A'; if (property.title) { title = property.title } var listing_for = 'Sale'; if (property.listing_for) { listing_for = property.listing_for } var address = ''; if (property.address) { address = property.address } var area = 1000; if (property.area) { area = property.area } var bedroom = 5; if (property.bedroom) { bedroom = property.bedroom } var bathroom = 5; if (property.bathroom) { bathroom = property.bathroom } var garage = 1; if (property.garage) { garage = property.garage } var balcony = 1; if (property.balcony) { balcony = property.balcony } var lounge = 1; if (property.lounge) { lounge = property.lounge } var price = 253.33; if (property.price) { price = property.price } var is_featured = ''; if (property.is_featured) { is_featured = '<span class="featured">Featured</span> '; } var date = ''; if (property.date) { date = property.date; } var author = ''; if (property.author) { author = property.author; } var element = ''; if(layout == 'grid_layout'){ element = '<div class="col-lg-6 col-sm-6 col-sm-6"><div class="property-box" id="'+property.id+'">\n' + ' <div class="property-thumbnail">\n' + ' <a href="properties-details.html" class="property-img">\n' + ' <div class="listing-badges">\n' + ' '+is_featured+'\n' + ' </div>\n' + ' <div class="price-box"><span>$850.00</span> Per month</div>\n' + ' <img class="d-block w-100" src="' +image+ '" alt="properties">\n' + ' </a>\n' + ' </div>\n' + ' <div class="detail">\n' + ' <h1 class="title">\n' + ' <a href="properties-details.html">' + title +'</a>\n' + ' </h1>\n' + '\n' + ' <div class="location">\n' + ' <a href="properties-details.html">\n' + ' <i class="flaticon-pin"></i>' +address+ '\n' + ' </a>\n' + ' </div>\n' + ' </div>\n' + ' <ul class="facilities-list clearfix">\n' + ' <li>\n' + ' <span>Area</span>' + area + ' Sqft\n' + ' </li>\n' + ' <li>\n' + ' <span>Beds</span> ' + bedroom + ' \n' + ' </li>\n' + ' <li>\n' + ' <span>Baths</span> ' + bathroom +' \n' + ' </li>\n' + ' <li>\n' + ' <span>Garage</span> ' + garage + '\n' + ' </li>\n' + ' </ul>\n' + ' <div class="footer">\n' + ' <a href="#">\n' + ' <i class="flaticon-people"></i> ' + author + ' \n' + ' </a>\n' + ' <span>\n' + ' <i class="flaticon-calendar"></i>' + date +' \n' + ' </span>\n' + ' </div>\n' + ' </div></div>'; } else{ element = '<div class="property-box-2" id="'+property.id+'">\n' + ' <div class="row">\n' + ' <div class="col-lg-5 col-md-5 col-pad">\n' + ' <div class="property-thumbnail">\n' + ' <a href="properties-details.html" class="property-img">\n' + ' <img src="'+image+'" alt="properties" class="img-fluid">\n' + ' <div class="listing-badges">\n' + ' '+is_featured+' \n' + ' </div>\n' + ' <div class="price-box"><span>$'+ price +'</span> Per month</div>\n' + ' </a>\n' + ' </div>\n' + ' </div>\n' + ' <div class="col-lg-7 col-md-7 col-pad">\n' + ' <div class="detail">\n' + ' <div class="hdg">\n' + ' <h3 class="title">\n' + ' <a href="properties-details.html">' +title+ '</a>\n' + ' </h3>\n' + ' <h5 class="location">\n' + ' <a href="properties-details.html">\n' + ' <i class="flaticon-location"></i>'+address+'\n' + ' </a>\n' + ' </h5>\n' + ' </div>\n' + ' <ul class="facilities-list clearfix">\n' + ' <li>\n' + ' <span>Area</span>'+area+' Sqft\n' + ' </li>\n' + ' <li>\n' + ' <span>Beds</span> ' + bedroom +' \n' + ' </li>\n' + ' <li>\n' + ' <span>Baths</span> '+bathroom+' \n' + ' </li>\n' + ' <li>\n' + ' <span>Garage</span> '+ garage +' \n' + ' </li>\n' + ' </ul>\n' + ' <div class="footer">\n' + ' <a href="#" tabindex="0">\n' + ' <i class="flaticon-people"></i> '+ author +' \n' + ' </a>\n' + ' <span>\n' + ' <i class="flaticon-calendar"></i>'+date+'\n' + ' </span>\n' + ' </div>\n' + ' </div>\n' + ' </div>\n' + ' </div>\n' + ' </div>'; } return element; } function animatedMarkers(map, propertiesMarkers, properties, layout) { var bounds = map.getBounds(); var propertiesArray = []; $.each(propertiesMarkers, function (key, value) { if (bounds.contains(propertiesMarkers[key].getLatLng())) { propertiesArray.push(insertPropertyToArray(properties.data[key], layout)); setTimeout(function () { if (propertiesMarkers[key]._icon != null) { propertiesMarkers[key]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable bounce-animation marker-loaded'; } }, key * 50); } else { if (propertiesMarkers[key]._icon != null) { propertiesMarkers[key]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable'; } } }); $('.fetching-properties').html(propertiesArray); } function generateMap(latitude, longitude, mapProvider, layout) { var map = L.map('map', { center: [latitude, longitude], zoom: 14, scrollWheelZoom: false }); L.tileLayer.provider(mapProvider).addTo(map); var markers = L.markerClusterGroup({ showCoverageOnHover: false, zoomToBoundsOnClick: false }); var propertiesMarkers = []; $.each(properties.data, function (index, property) { var icon = '<img src="img/logos/black-logo.png">'; if (property.type_icon) { icon = '<img src="' + property.type_icon + '">'; } var color = ''; var markerContent = '<div class="map-marker ' + color + '">' + '<div class="icon">' + icon + '</div>' + '</div>'; var _icon = L.divIcon({ html: markerContent, iconSize: [36, 46], iconAnchor: [18, 32], popupAnchor: [130, -28], className: '' }); var marker = L.marker(new L.LatLng(property.latitude, property.longitude), { title: property.title, icon: _icon }); propertiesMarkers.push(marker); marker.bindPopup(drawInfoWindow(property)); markers.addLayer(marker); marker.on('popupopen', function () { this._icon.className += ' marker-active'; }); marker.on('popupclose', function () { this._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded'; }); }); map.addLayer(markers); animatedMarkers(map, propertiesMarkers, properties, layout); map.on('moveend', function () { animatedMarkers(map, propertiesMarkers, properties, layout); }); $('.fetching-properties .property-box-2, .fetching-properties .property-box').hover( function () { propertiesMarkers[$(this).attr('id') - 1]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded marker-active'; }, function () { propertiesMarkers[$(this).attr('id') - 1]._icon.className = 'leaflet-marker-icon leaflet-zoom-animated leaflet-clickable marker-loaded'; } ); $('.geolocation').on("click", function () { map.locate({setView: true}) }); $('#map').removeClass('fade-map'); } Save