Our plugins can be used for general mapping tasks, such as showing branch locations; often with considerable cost savings over alternative providers, such as Google Maps. They even include built in draw-a-search and clustering features
The Javascript for the example above is as below:
var markers = []; // Array holding all properties returned from server
var pluginControlId = 'property-map'; // Id of the plugin control
var mapCenter;
var mapBounds;
var mapZoom;
$(document).ready(function() {
loadLocratingPlugin({
id: pluginControlId,
lat: 51.456913,
lng: -0.073099,
icon: '.',
type: 'transport',
hidestationswhenzoomedout: 'true',
// dontusemodalpopup: 'true' // Use this to prevent the marker popups becoming modal with narrow screen widths
onLoaded: function (e) {
// These are just examples of how to query the map, they're not needed for the example to work
mapCenter = e.center;
mapBounds = e.bounds;
mapZoom = e.zoom;
// Enable Draw-a-Search only once map has loaded
$('#Draw-a-Search').removeAttr("disabled");
GetPropertiesViaAJAX(mapBounds);
},
onDraw: function(e) {
var shapeBounds = e.bounds; // The combined bounds of all the drawn shapes
var latlngs = e.latlngs; // The path of the shape just drawn
// When shape has been drawn on map this function is called
// We're using the bounds of the shape and leaving the plugin to do the
// hard work of excluding markers outside of the shape but you could
// use latlngs (which describes the shape) to do this yourself.
GetPropertiesViaAJAX(shapeBounds);
},
onMoveEnd: function (e) {
// These are just examples of how to query the map, they're not needed for the example to work
mapCenter = e.center;
mapBounds = e.bounds;
mapZoom = e.zoom;
// After map is moved (scroll/zoom), get markers for new map area
GetPropertiesViaAJAX(mapBounds);
}
});
});
function GetPropertiesViaAJAX(bounds) {
showLocratingMapLoading(pluginControlId);
// This function is in a different library and simply gets properties from our server and
// calls ajaxGetPropertyMarkersSuccess when done
ajaxGetPropertyMarkers(bounds);
}
$('#Draw-a-Search').click(function () {
if ($('#Draw-a-Search')[0].checked) {
// Enable Draw-a-Search
enableLocratingDrawASearch(pluginControlId);
removeAllLocratingMapMarkers(pluginControlId);
} else {
// Disable Draw-a-Search
disableLocratingDrawASearch(pluginControlId);
removeAllLocratingMapMarkers(pluginControlId);
}
GetPropertiesViaAJAX(mapBounds);
});
$('#cluster-markers').click(function () {
removeAllLocratingMapMarkers(pluginControlId);
GetPropertiesViaAJAX(mapBounds);
});
// AJAX call worked, we now have our properties
function ajaxGetPropertyMarkersSuccess(data, status) {
try {
// Clear array of properties
markers = [];
// Run the javascript returned from the server, which is simply lots of calls to addPropertyMarker,
// one for each property found, e.g.
// addPropertyMarker(51.45696,-0.025778,"listing_id59346004",1,"Ladywell Road, London SE13 (£1,000,000)","Ladywell Road, London SE13","https://lid.zoocdn.com/354/255/d5086c933544138e3528854b562c926f3387bd95.jpg","£1,000,000","Terraced house
5 Bedrooms
2 Bathrooms
2 Receptions",false,"59346004","https://www.zoopla.co.uk/for-sale/details/59346004");
// The purpose of this function is to adds the properties to the markers array
eval(data.d);
var clusterMarkers = $('#cluster-markers')[0].checked;
// Now markers is populated we can add the markers to the plugin
if ($('#Draw-a-Search')[0].checked) {
// Add only to Draw-a-Search shapes
removeAllLocratingMapMarkers(pluginControlId);
addLocratingMapMarkersToDrawnArea(pluginControlId, markers, clusterMarkers);
hideLocratingMapLoading(pluginControlId);
} else {
// Add to map normally
removeAllLocratingMapMarkers(pluginControlId);
addLocratingMapMarkers(pluginControlId, markers, clusterMarkers);
hideLocratingMapLoading(pluginControlId);
}
}
catch (err) {
alert(err);
}
}
// The AJAX call to the server creates a call to this function for every property found
function addPropertyMarker(lat, lng, id, count, tooltip, address, image, price, desc, unused1, unused2 ,url) {
// Note the redirectpage attribute in the link below, this causes the link to redirect the current window
// (i.e the one containing the plugin) to the link's href
var marker = {
id: id,
lat: lat,
lng: lng,
html: '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;">' +
'<td style="width: 30%;padding: 4px;"><img src=' +
image + ' style="width:165px;max-height: 120px;padding: 2px;border-radius: 5px;box-shadow: 0 3px 14px rgba(0,0,0,0.4);"></td>' +
'<td style="width: 70%;padding: 1px 5px;"><div style="padding: 0px 5px;"><b style="font-size: 1.28em;font-weight: 700;color: #3b83c0">' +
price + '</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">' +
address + '</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">' +
desc + (url != '' ? '<br><a redirectpage style="font-weight:bold" rel="noopener" target="_blank" href="' + url + '">View Details</a>' : '') +
url + '">View Details</a></div></div></td></tr></tbody></table></div>',
icon: 'https://www.locrating.com/html5/assets/images/marker-icon-blue.png',
clickedIcon: 'https://www.locrating.com/html5/assets/images/marker-icon-orange.png',
iconHeight: 30,
iconWidth: 21
};
markers.push(marker);
}
function showErrorMessage(title, message) {
showLocratingError(pluginControlId, title, message);
}