Mapping Tools

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

try it out see In action Source Code

Source Code


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); }