Draw-a-Search, clustering
and general mapping

Our plugins can be used in place of other map providers for basic mapping tasks.
They even include built in Draw-a-Search and clustering features.

try it out The Benefits How It Works

How it works

Draw-a-Search, clustering and general mapping

As well as for showing schools, amenities and transport, our plugins can also be used in place of other map providers (such as Google Maps) for basic mapping tasks such as showing property search results on a map, or for showing branch locations. This can result in considerable cost savings. We even have a built in a Draw-a-Search feature, specifically designed for cases where our plugins are used on a property search page and built in clustering that reduces map clutter when you have lots of properties.

Seamless integration

Our fully responsive, configurable plugins slot seamlessly into your website, ensuring you retain your own look and feel and that visitors do not leave your site.

No expensive setup or maintenance costs

Installation of our schools API and plugin is just a few of lines or code, meaning no expensive setup or maintenance costs. Once installed we can push updates automatically so you don't ever need to change your website again.

Trusted provider to award winning websites

Our schools plugin was established in 2010 and we currently have hundreds of estate agency brands using it on their websites, including some of the largest in the UK. Estate agents using our plugin regularly receive coveted industry awards, including multiple 'Website of the Year' awards. .

High availability protected servers

Our servers run under CloudFlare, which provides us protection against a multitude of web threats such as Denial of Service attacks, providing near constant up-time.

Continual innovation

We never rest on our laurels; we continually innovate, enhancing existing features and adding exciting new ones to ensure our plugins are the very best they can be.

Great Support

We provide free technical support should you have any issues with our plugin. Including helping to get it setup on your site.

The Benefits

Be in the know

When you’re asked about schools and nurseries, you’ll have up to date, detailed and expert knowledge easily to hand.

Don't assume that your property portal is providing accurate and up-to-date schools information, our research has shown that portal data is often out of date, inaccurate and unreliable.

Attract extra business

Vendors and landlords are savvy, they research local agents and are looking for the one with the best website and marketing so they are ultimately able to achieve the best price for their property.

For example, if a local school is good or even outstanding the vendor/landlord will want you to be highlighting this information to maximise their property's potential.

Boost your website

Our clients have told us that since integrating our schools plugin they have noticed significant increases in the time visitors spend on their websites, as well as receiving lots of positive feedback in general.

Increased traffic and time spent on your site will have a positive effect on your Google search rankings.

Remain competitive

Our maps are used on over 300 websites, covering around 1,300 offices, including some of the largest estate agencies in the UK.

The likelihood is that one of your competitors is using our maps already, don't lose instructions to them.

Property Search Example

This example retrieves properties from Zoopla with prices between £400,000 and £2,000,000. You can either search for properties normally or using Draw-a-Search. This example shows how our plugins can be used as general maps displaying multiple properties (e.g. replacing a Google Map) and also showcases the built in Draw-a-Search feature. The code for this demo is very straightforward and can be viewed here.

The Javascript for this example is as below:

        
var markers = [];                       // Array holding all map 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',

        onLoaded: function (e) {

            mapCenter = e.center;
            mapBounds = e.bounds;
            mapZoom = e.zoom;
            
            // Enable Draw-a-Search only once map has loaded
            $('#Draw-a-Search').removeAttr("disabled");

        },
        onDraw: function(e) {

            var shapeBounds = e.bounds;
            var latlngs = e.latlngs;

            // 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.
            GetPropertiesFromZooplaViaAJAX(shapeBounds);
        },
        onMoveEnd: function (e) {

            mapCenter = e.center;
            mapBounds = e.bounds;
            mapZoom = e.zoom;

        }
    });

});

function GetPropertiesFromZooplaViaAJAX(bounds) {

    showLocratingMapLoading(pluginControlId);
    ajaxGetPropertyMarkers(bounds);   // This function is in a different library and simply gets properties from Zoopla and calls ajaxGetPropertyMarkersSuccess when done

}

// Search button pressed, call server to get 
$('#search').click(function () {

    GetPropertiesFromZooplaViaAJAX(mapBounds);

});

$('#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);

    }

});

$('#cluster-markers').click(function () {

    removeAllLocratingMapMarkers(pluginControlId);
    GetPropertiesFromZooplaViaAJAX(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, this function adds the properties to the array markers
        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
            addLocratingMapMarkersToDrawnArea(pluginControlId, markers, clusterMarkers); 
            hideLocratingMapLoading(pluginControlId);

        } else {

            // Add to map normally
            addLocratingMapMarkers(pluginControlId, markers, clusterMarkers); 
            hideLocratingMapLoading(pluginControlId);

        }

    }
    catch (err) {

        alert(err);

    }
}

// The AJAX call to the server creates a call to this function for every matching property found in Zoopla
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" 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.png',
        iconHeight: 30,
        iconWidth: 21

    };

    markers.push(marker);

}
            
function showErrorMessage(title, message) {

    showLocratingError(pluginControlId, title, message);

}