Quick and Easy Installation

Our plugins can be installed onto any website within minutes

Get Started

Integration Instructions

Three easy steps

Installing our plugins is super quick and easy, with just three easy steps, that can be completed in minutes.

Hopefully these instructions are suitably clear, however if something is either not covered, or unclear in this documentation, please feel free to get in touch. We're more than happy to assist getting you up and running.

01Include our Javascript API

Simply add a line in the page <head> section, to include our small Javascript API library.

Show Me

02Add a <div> control

Decide where you want the plugin to appear on your page and add a HTML <div> element to contain it.

Show Me

03Populate the <div>

With one Javascript call to our API you can populate the <div> with one of our plugins - and that's it!

Show Me

Warning: You need to have a business subscription with us in order to be able to use our plugins on your website. Business subscriptions are different from membership to our public website for individuals and cannot be purchased online. Please get in touch for more details.

1. Include our Javascript API

Our plugins are managed by our small Javascript API that needs to be referenced just once, usually in the <head> section, of each page you wish to have a plugin appear, as below:

<!-- Locrating Javascript API -->
<script defer src="https://www.locrating.com/scripts/locratingIntegrationScripts.js"></script>
             

The defer attribute means the library is not loaded until after your page has fully loaded; so your site remains as responsive as it was previously. However, as the file is just 4kb in size, performance is never going to be an issue anyway.

Warning: This library primarily constructs links to pages on our webservers. Do not attempt to reverse engineer this file and then use the links directly in your website; doing so breaks our Terms and Conditions and can result in us suspending your service. The file is there for a reason; it enables us to automatically provide future enhancements and prevent service outages, without the need for any changes to your website. Links you reverse engineer now will likely not work in the future.

2. Add a <div> control

To embed a plugin into you webpage, you first need create an <div> to hold it, as below:

<!-- DIV to hold Locrating plugin -->
<div id="map" style="width:100%; height:600px; border:1px solid #CCCCCC;"></div>
             

You can chose your own dimensions and use a fixed or a dynamic size as all our plugins are fully responsive (i.e. their content adjusts the their size). You can chose to have a border as above, or not, it's totally up to you.


3. Populate the <div>

In an appropriate event, such as the onclick event of a Tab control. Call our API function loadLocratingPlugin, passing the id of the <div>, the lat and lng coordinates you wish the plugin to be centered around and the type of plugin you wish to display.

The example below, uses the <body> onload event to populate our all-in-one plugin.

Warning: You should avoid loading our plugin silently in the background, e.g. using the <body> onload to populate a <div> which is on a tab that is initially hidden and that users can optionally switch to, as this causes a plugin load in the background, which possibly no user ever looks at. This will both unnecessary load our servers and slow down your website. In this case, you should call loadLocratingPlugin() from within the Tab's onclick event, or similar, so the plugin (i.e. the <div>) is only loaded if the user has actively chosen to view it, by clicking on the tab.
<!-- Load Locrating All-in-one Plugin -->
<body onload="try{loadLocratingPlugin({id:'map', lat: 51.456913, lng : -0.073099, type:'all'});}catch (err) {};"></body>
             

The try-catch block is a safety net in case our library could not be loaded, e.g. in the unlikely event of an outage. It prevents any errors being thrown on your site.

The coordinates and plugin type are mandatory parameters as described below.


Mandatory parameters

When calling loadLocratingPlugin, the following parameters are mandatory.

Parameter Valid values Default Description
lat The property Latitude Sets the centre of the map
lng The property Longitude Sets the centre of the map
type 'all' (All-in-one plugin)
'schools' (Schools map)
'transport' (Transport map)
'localinfo' (Amenities map)
'areastats' (Property prices)
'schoolslist' (Schools list)
'stationslist' (Stations list)
'schools' Sets the plugin type

There are also many optional parameters that can be used to configure our plugins, these are discussed for each plugin below.


Schools map

Our schools map plugin is a map displaying all the schools and nurseries around a property you are marketing. It supports the following optional configuration:

Parameter Valid values Default Description
icon The url of an image file, such as a .PNG or .JPG file The property icon displayed on the map
Note: You can have no property icon, e.g. for an area guide, by setting this property to '.' as here
mapstyle 'light'
'voyager'
'dark'
'grey'
'dim'
'satellite'
light Sets the style of the map
zoom Number 14 The map zoom level. The higher the zoom level, the more zoomed-in the map appears. At a zoom level of 15 you can see street names, at 14 not all street names are visible. Upon load, the map will automatically zoom out until at least one school is in view. The minimum zoom level that can be set is 13. Below this the maps will automatically adjust back to 13.
Warning: We recommend you do not change the zoom level, as the plugin automatically adjusts the zoom level to ensure schools are visible, however, if you have a map as an area guide, you might wish to zoom out a little to show a wider area by default.
preventpropertypopup true or false false Controls whether a popup is shown when clicking on the property icon; this popup allows journey planning as well as showing local information such as property prices and broadband availability and speed. Here is an example showing the popup disabled.
allowscrollwheel true or false false Determines whether the map can be zoomed with the mouse scroll-wheel or not.

The following shows a schools map with a custom icon and map style:

<!-- Load Locrating Schools Map -->
<body onload="try{loadLocratingPlugin({id:'customIcon', lat: 51.456913, lng : -0.073099, mapstyle:'voyager', icon:'https://www.locrating.com/html5/assets/images/marker-icon2.png'});}catch (err) {};"></body >
            

Amenities/local information map

Our amenities map plugin is a map showing almost half a million points of interest across the UK, including supermarkets, pubs, bars, cafes, restaurants, parks, gardens, playgrounds, swimming pools, sport centres, museums, galleries and more.

It supports all the same configuration as the school map and additionally you can control which categories are turned on or off by default:

Parameter Valid values Default Description
showshopping 'true', 'false', 'only' 'true' Determines if the Shopping category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Supermarket, Marketplace.

Examples:
'showshopping':'false'
'showshopping':'only'
showattractions 'true', 'false', 'only' 'true' Determines if the Attractions category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Beach Resort, Attraction, Aquarium, Arts Centre, Gallery, Museum, Theme Park, Viewpoint, Nature Reserve, Planetarium, Zoo.

Examples:
'showattractions':'false'
'showattractions':'only'
showleisure 'true', 'false', 'only' 'true' Determines if the Leisure Activities category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Bowling Alley, Fitness Centre, Cinema, Theatre, Leisure Centre, Gym, Garden, Golf Course, Ice Rink, Miniature Golf, Park, Playground, Sports Centre, Stadium, Swimming Area, Swimming Pool, Water Park.

Examples:
'showleisure':'false'
'showleisure':'only'
showamenities 'true', 'false', 'only' 'true' Determines if the Amenities category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Library, Charging Station, Ferry Terminal, Place Of Worship, Marina, Police, Post Office.

Examples:
'showamenities':'false'
'showamenities':'only'
showfoodanddrink 'true', 'false', 'only' 'true' Determines if the Food and Drink category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Pub, Bar, Fast Food, Ice Cream, Cafe, Food Court, Restaurant.

Examples:
'showfoodanddrink':'false'
'showfoodanddrink':'only'
showhealthcare 'true', 'false', 'only' 'true' Determines if the Healthcare category is on/off by default or the only category shown (setting 'only' turns off all the other categories).

This category includes: Dentist, Doctor, Clinic, Hospital, Vet.

Examples:
'showhealthcare':'false'
'showhealthcare':'only'

The following shows an amenities map with only food and drink displayed by default:

<!-- Load Locrating Amenities Map -->
<body onload="try{loadLocratingPlugin({id:'foodAndDrinkOnly', lat: 51.456913, lng : -0.073099, type:'localinfo, 'showfoodanddrink:'only'});}catch (err) {};"></body >
             

Transport map

Our transport map plugin is a plain vanilla map, showing just the property and local transport. Ideal as the main map on a property details page, it shows thousands of railway stations and other forms of public transport; including underground stations, tram stops, metro and light railway stations across the UK. It supports all the same configuration as the school map as well as the following:

Parameter Valid values Default Description
hidestationswhenzoomedout true or false false When true and the map is zoomed out, stations are hidden to prevent a cluttered appearance.
Example: 'hidestationswhenzoomedout':'true'

The following shows a transport map with the default options:

<!-- Load Locrating Transport Map -->
<body onload="try{loadLocratingPlugin({id:'transport', lat: 51.456913, lng : -0.073099, type:'transport'});}catch (err) {};"></body >
             

Schools list

Our schools list plugin will display up to 10 local schools in list form, with inspection rating and distance. The taller the control, the more it will display.

We have deliberately excluded a title from this plugin, this is so you can both chose your own description text but also the styling of it, so it is consistent with the rest of your page. A suitable title might be something like LOCAL SCHOOLS.

The background colour will be inherited from the <div> parent. The schools list supports the same configuration as the stations list and additionally:

Parameter Valid values Default Description
maxschools Number 10 Maximum number of schools to display
highlightcolor Colour, e.g. 'Black' or '#777777' 'white' Colour of active primary/secondary school toggle button
highlightbackcolor Colour, e.g. 'Black' or '#777777' 'cornflowerblue' Background colour of active primary/secondary school toggle button
orientation 'horizontal' or 'vertical' 'vertical' Configures whether list is horizontal or vertical. When set to horizontal items wrap to the following line filling all available space.

The following shows a standard schools list:

<!-- Load Locrating Schools List -->
<body onload="try{loadLocratingPlugin({id:'schoolslist', lat: 51.456913, lng : -0.073099, type:'schoolslist'});}catch (err) {};"></body >
             

The following shows a horizonal schools list, with line wrapping:

<!-- Load Horizontal Locrating Schools List -->
<body onload="try{loadLocratingPlugin({id:'schoolslisthorizontal', lat: 51.456913, lng : -0.073099, type:'schoolslist',orientation:'horizontal'});}catch (err) {};"></body >
             

Transport list

Our transport list plugin contains the same transport options as shown in our transport map, but in list form, with the network name and distance. It will display up to 10 local stations, the taller the control, the more it will display.

We have deliberately excluded a title from this plugin, this is so you can both chose your own description text but also the styling of it, so it is consistent with the rest of your page. A suitable title might be something like LOCAL STATIONS.

The background colour will be inherited from the <div> parent. The following configuration is supported.

Parameter Valid values Default Description
maxstations Number 10 Maximum number of stations to display
fontfamily Any one of the hundreds of fonts made available by Google. You can browse these fonts at https://fonts.google.com/. 'Poppins' List font
Note: Replace spaces in the Google font name with +, e.g. fontfamily:'Amatic+SC'
Note: This parameter is case sensitive. You must match the same capitalisation that Google uses and the font must have a path following the standard Google format, e.g. for 'Roboto' https://fonts.googleapis.com/css2?family=Roboto.
fontsize Number 15 Title font size (px), all other text elements are sized relatively to this
titlecolor Colour, e.g. 'Black' or '#777777' '#777777' Colour of title text
subtitlecolor Colour, e.g. 'Black' or '#777777' 'darkgray' Colour of sub title text
distancecolor Colour, e.g. 'Black' or '#777777' '#c1c1c1' Colour of distance text
separatorcolor Colour, e.g. 'Black' or '#777777' 'whitesmoke' Colour of separator bar
orientation 'horizontal' or 'vertical' 'vertical' Configures whether list is horizontal or vertical. When set to horizontal items wrap to the following line filling all available space.

The following shows a standard and customised stations list:

<!-- Load Locrating Stations List -->
<body onload="try{loadLocratingPlugin({id:'stationslist1', lat:51.456913, lng:-0.073099, type: 'stationslist'});}catch (err) {};"></body >
            
<!-- Load Locrating Stations List with Custom Font-->
<body onload="try{loadLocratingPlugin({id:'stationslist2', lat:51.456913, lng:-0.073099, type: 'stationslist', fontfamily:'Rambla', fontsize:18, titlecolor:'white', subtitlecolor:'whitesmoke', distancecolor:'gainsboro', separatorcolor:'#778e98'});}catch (err) {};"></body >
            
                                

The following shows a horizonal transport list:

<!-- Load Horizontal Locrating Transport List -->
<body onload="try{loadLocratingPlugin({id:'stationslisthorizontal', lat: 51.456913, lng : -0.073099, type:'stationslist',orientation:'horizontal'});}catch (err) {};"></body >
             

Property prices chart

Our property prices plugin shows historical rental and sold price data taken from the Office for National Statistics and HM Land Registry respectively. It supports the following configuration:

Parameter Valid values Default Description
compareto An area name or text, e.g. 'London' or 'Select an Area to Compare' Preselects an area to compare prices with and enables the area comparison drop down
Note: This parameter is case sensitive. You must match the area name to a value in the areas dropdown. If no match can be found the text is displayed with the dropdown enabled so users can select an area from the list.
pricescharttype 'Average Sold Price',
'Average Rental Price'
'Average Sold Price' The type of chart to display by default
fontfamily Any one of the hundreds of fonts made available by Google. You can browse these fonts at https://fonts.google.com/. 'Poppins' Chart and title font
Note: Replace spaces in the Google font name with +, e.g. fontfamily:'Amatic+SC'
Note: This parameter is case sensitive. You must match the same capitalisation that Google uses and the font must have a path following the standard Google format, e.g. for 'Roboto' https://fonts.googleapis.com/css2?family=Roboto.
bordercolor Colour, e.g. 'Black' or '#777777' 'transparent' Colour of border displayed around sections of plugin
borderradius Number 0 Radius of border corner in pixels, i.e. 2 = 2px
fontcolor Colour, e.g. 'Black' or '#777777' '#777777' Font colour
years Number (max 10) 10 Number of years worth of data to include in chart
showmap 'true' or 'false' 'false' Whether to include a map next to the chart showing the area the prices relate to.
Note: When showing a map, you can also pass the same parameters as the schools map supports, to control the styling of the map in this plugin, e.g. mapstyle etc.

The following shows the default property prices chart, with the map turned on and the compare to text set:

<!-- Load Locrating Property Prices Chart -->
<body onload="try{loadLocratingPlugin({id: 'areaStats', lat: 51.456913, lng : -0.073099, type:'areastats', showmap: 'true', compareto: 'Select an Area to Compare'});}catch (err) {};"></body >
             

The following shows the property prices chart set to show rental prices, with no map:

<!-- Load Locrating Property Prices Chart -->
<body onload="try{loadLocratingPlugin({id: 'rentalStats', lat: 51.456913, lng : -0.073099, type:'areastats','pricescharttype':'Average Rental Price'});}catch (err) {};"></body >
             

Broadband data

Our broadband plugin shows broadband availability and recorded speed data taken from Ofcom. It supports the following configuration:

Parameter Valid values Default Description
fontfamily Any one of the hundreds of fonts made available by Google. You can browse these fonts at https://fonts.google.com/. 'Poppins' Chart and title font
Note: Replace spaces in the Google font name with +, e.g. fontfamily:'Amatic+SC'
Note: This parameter is case sensitive. You must match the same capitalisation that Google uses and the font must have a path following the standard Google format, e.g. for 'Roboto' https://fonts.googleapis.com/css2?family=Roboto.
bordercolor Colour, e.g. 'Black' or '#777777' 'transparent' Colour of border displayed around sections of plugin
borderradius Number 0 Radius of border corner in pixels, i.e. 2 = 2px
broadbandvaluecolor Colour, e.g. 'Black' or '#777777' '#777777' Sets the font colour of the values, i.e. the large numbers
showmap 'true' or 'false' 'false' Whether to include a map next to the chart showing the area the prices relate to.
Note: When showing a map, you can also pass the same parameters as the schools map supports, to control the styling of the map in this plugin, e.g. mapstyle etc.

The following shows the default broadband plugin, with the map turned on:

<!-- Load Locrating Property Prices Chart -->
<body onload="try{loadLocratingPlugin({id: 'broadband', lat: 51.456913, lng : -0.073099, type:'broadband', showmap: 'true'});}catch (err) {};"></body >
             

Adding a schools report link

Note: You do not need to implement a separate link for the local schools report, as it is by default built into our schools map, as a button at the bottom left. In almost all cases this should be sufficient. However, if you do want to implement a separate button/link for the report, e.g. on a property details page, then follow the instructions below.

To create a link that pops up a schools report, create a link as below. Of course, you don't have to use a link, you could use any control that supports onclick such as an image or button.

<!-- Link that opens new window showing Locrating local schools report -->
<a href="https://www.locrating.com" onclick="try{return openLocratingWindow({lat: 51.456913, lng : -0.073099, type:'schoolsreport'});}catch (err) {}">Schools Map</a>
             

The try-catch block is a safety net in case our library could not be loaded, e.g. in the unlikely event of an outage. It prevents any errors being thrown on your site.


All-in-one plugin

Our all-in-one plugin combines all our plugins into one easy to use window. As it contains all the other plugins and therefore supports all the configuration they do, which is passed through to each contained plugin. It also supports the following additional configuration:

Note: All the settings below can be set for your site by us centrally on our servers. If you wish, we will happily set them up for you and modify them over time, as necessary.
Parameter Valid values Default Description
starttab 'location', 'schools', 'amenities', 'prices' or 'broadband' 'location' The tab displayed first by default
showpricestab 'true' or 'false' 'true' Determines if the property prices option is available, property sold/rental prices are only available for England and Wales, so for areas not covered, e.g. Scotland, you may wish to hide this option
showbroadbandtab 'true' or 'false' 'true' Determines if the broadband option is available, broadband data is only available for England and Wales, so for areas not covered, e.g. Scotland, you may wish to hide this option
showschoolstab 'true' or 'false' 'true' Determines if the schools map option is available.
showamenitiestab 'true' or 'false' 'true' Determines if the amenities map option is available.
showtransporttab 'true' or 'false' 'true' Determines if the transport map option is available.
showstreetviewtab 'true' or 'false' 'true' Determines if the street view option is available.
hideschoolslist 'true' or 'false' 'false' When set to true this stops the list of local schools from being displayed in the schools tab.
hidestationslist 'true' or 'false' 'false' When set to true this stops the list of local stations from being displayed in the transport tab.
indentlistheader 'true' or 'false' 'false' When set to true this indents the schools/transport list header (the section that says "Nearest Schools" and "Nearest Transport"). This looks good when the plugin has a border around it.
hidemenu 'true' or 'false' 'false' Hides the menu, use this when using your own menu buttons outside the map, as shown here
transportzoom Number When set this overrides the zoom level in the transport tab to the value passed, when not set the value of the 'zoom' parameter is used in the transport tab. This allows different zoom levels to be used in different tabs.
schoolszoom Number When set this overrides the zoom level in the schools tab to the value passed, when not set the value of the 'zoom' parameter is used in the schools tab. This allows different zoom levels to be used in different tabs.
amenitieszoom Number When set this overrides the zoom level in the amenities tab to the value passed, when not set the value of the 'zoom' parameter is used in the amenities tab. This allows different zoom levels to be used in different tabs.
openstreetviewintab 'true' or 'false' 'true' When set to true Google Street View window is launched in a new tab, as opposed to a new window when false.
menuallcaps 'true' or 'false' 'false' Sets the main menu text to be all uppercase or all lowercase
menucolor Colour, e.g. 'Black' or '#777777' Colour of menu text
menufontsize Number 13 Menu font size (px)
menuletterspacing String, e.g. 0.9px Unset Menu letter spacing
menufontfamily Any one of the hundreds of fonts made available by Google. You can browse these fonts at https://fonts.google.com/. 'Poppins' List font
Note: Replace spaces in the Google font name with +, e.g. fontfamily:'Amatic+SC'
Note: This parameter is case sensitive. You must match the same capitalisation that Google uses and the font must have a path following the standard Google format, e.g. for 'Roboto' https://fonts.googleapis.com/css2?family=Roboto.
menuselectcolor Colour, e.g. 'Black' or '#777777' Colour of currently selected plugin menu text
menubackcolor Colour, e.g. 'Black' or '#777777' Colour of menu background
menuselectbackcolor Colour, e.g. 'Black' or '#777777' Colour of currently selected plugin menu background
streetviewoptions Comma separated list of 5 values, e.g. '12,100,90,2,0' Google Streetview options, passed as &cbp= parameter in Google Url, defined as follows:

1. Street View/map arrangement, 11 = upper half Street View and lower half map, 12 = mostly Street View with corner map
2. Rotation angle/bearing (in degrees)
3. Tilt angle, -90 (straight up) to 90 (straight down)
4. Zoom level, 0-2
5. Pitch (in degrees) -90 (straight up) to 90 (straight down), default 5

Note: Not all options work for all images. Rotation and Pitch are sufficient for most purposes and the other options can be left blank.
e.g.
',100,,,20' = looking down 20 degrees
',100,,,-20' = looking up 20 degrees
',300,,,' = rotated 300 degrees

The following shows a customised all-in-one plugin:

<!-- Load Locrating All-in-one Plugin -->
<body onload="try{loadLocratingPlugin({id:'completeplugin',lat: 51.456913, lng : -0.073099, type:'all', mapstyle:'voyager', menucolor: '#401663', menubackcolor: '#e6e7e8', menuselectcolor: '#feeff8', menuselectbackcolor: '#ec008c',  menuallcaps: 'true', icon: 'https://www.locrating.com/html5/assets/images/house_icon2.png'});}catch (err) {};"></body >
            

You can call the following Javascript functions to select tabs in the all-in-one plugin, allowing you to hide the built-in menu (by setting the hidemenu option to 'true') and have your own buttons or menus elsewhere on the page, with your own styling, which control which tab is displayed. For example, the buttons below switch the tabs on the plugin shown directly above:

Transport
Schools
Amenities
Prices
Broadband
StreetView
Function Example
showTransportTab(id)
<div onclick="showTransportTab('completeplugin');"</div>
showSchoolsTab(id)
<div onclick="showSchoolsTab('completeplugin');"</div>
showAmenitiesTab(id)
<div onclick="showAmenitiesTab('completeplugin');"</div>
showPricesTab(id)
<div onclick="showPricesTab('completeplugin');"</div>
showBroadbandTab(id)
<div onclick="showBroadbandTab('completeplugin');"</div>
showStreetView(id)
<div onclick="showStreetView('completeplugin');"</div>

You can listen to menu item clicks using the onMenuClicked event as shown below, the passed in function will be called whenever the user clicks a menu item in the all-in-one plugin and the name of the menu item clicked will accessible via the menuItemName property:

<!-- Load Locrating All-in-one Plugin -->
<body onload="try{loadLocratingPlugin({id:'completeplugin',lat: 51.456913, lng : -0.073099, type:'all', onMenuClicked: function(e) {alert(e.menuItemName)}});}catch (err) {};"></body >
            


Adding markers and shapes

It's possible to add you own markers to our plugin maps, for example, your own properties for sale or rent, which allows our plugins to be used in a variety of ways, such as a map of branches or property search results on a map.

Functions exist in our library to add and remove map markers. Each requires the id of the <div> that contains the map and details of the marker to add or remove. Markers can only be added once the map has loaded, a callback method should be passed to the map during load, which is called once the map has successfully loaded.

The following functions can be used with all our plugins (except the all-in-one plugin):

Function Description Usage
addLocratingMapMarker(id, marker) Adds a single marker to the map See examples below
addLocratingMapMarkers(id, markerArray) Adds an array of markers to the map See example here here
removeLocratingMapMarker(id, markerId) Removes map marker from map See examples below
openLocratingMarker(id, markerId) Open the map marker popup window See examples below
removeAllLocratingMapMarkers(id) Open the map marker popup window See examples below
showLocratingMapLoading(id) Shows the spinning 'loading' on the map See example here here
hideLocratingMapLoading(id) Hides the spinning 'loading' on the map See example here here
showErrorMessage(id) Shows an error message in the map See example here here

It is also possible to add geoJSON shapes to the map, for example to highlight the areas your office serves. The following functions can be used with all our plugins (except the all-in-one plugin):

Function Description Usage
addLocratingShape(id, geoJson, style) Adds a shape to the map See examples below

The Javascript below shows an example of adding markers and shapes to a transport map, once the map has been loaded. The commented lines show how you would remove an individual marker using its id or all markers.

<!-- Load Locrating map and add custom marker after its loaded -->
loadLocratingPlugin({
    id: 'mapWithMarkers',
    lat: 51.456913,
    lng: -0.073099,
    icon: '.',
    type: 'transport',
    onLoaded: function() {

        addLocratingMapMarker('mapWithMarkers',
        {
            id: 'marker1', 
            lat: 51.456913, 
            lng: -0.079099,
            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="../assets/images/features/propety_picture.jpg" style="width:165px;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">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>',
            icon: '../assets/images/house_icon2.png',
            clickedIcon: '../assets/images/house_icon.png', // Optional
            iconHeight: 38,
            iconWidth: 40
            //draggable: true allows marker to be dragged, new position can be obtained as below
            //dragEnd: function (marker) {
            //alert(marker.lat + "," + marker.lng);
            //},
    
            // You can use the onClick event to react to a marker click
            //,onClick: function(marker) { alert( marker.id + ' clicked') }
        });
    
        addLocratingMapMarker('mapWithMarkers',
        {
            id: 'marker2',
            lat: 51.456913,
            lng: -0.199099,
            icon: '../assets/images/house_icon2.png',
            clickedIcon: '../assets/images/house_icon.png', // Optional
            iconHeight: 38,
            iconWidth: 40,
            // Don't set html here, instead load dynamically below
            onClick: function (marker)
            {
                // To dynamically set marker popup html, return the html in this function
                return '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;"><td style="width: 30%;padding: 4px;"><img src="../assets/images/features/propety_picture.jpg" style="width:165px;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">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>';
    
                // To asynchronously open marker and set html don't return above (just delete the return statement) and instead call the function below
                //openLocratingMarker('mapWithMarkers',
                //    {
                //        id: 'marker1',
                //        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="../assets/images/features/propety_picture.jpg" style="width:165px;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">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>'
                //    });   
            }
        });
    
        var style = {
            "color": "#9933ff",
            "weight": 0.4,
            "fillOpacity": 0.1
        };

        addLocratingShape(
            'mapWithMarkers',
            '{ "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [[[-0.14393806457519534,51.466360218581926],[-0.1422214508056641,51.467483080832345],[-0.1394748687744141,51.468605915451],[-0.13561248779296878,51.468285108379504],[-0.13312339782714847,51.46732267363118],[-0.1316642761230469,51.46630674826172],[-0.13080596923828128,51.46502344177947],[-0.1296043395996094,51.46374009920604],[-0.12943267822265628,51.462296295670214],[-0.1296043395996094,51.46090592316693],[-0.12831687927246097,51.459782899068315],[-0.12514114379882815,51.45951550830525],[-0.12256622314453126,51.46005028826492],[-0.12187957763671876,51.461494162857],[-0.12196540832519533,51.462349770689805],[-0.12205123901367189,51.463633152362455],[-0.12102127075195314,51.464649137257055],[-0.11724472045898439,51.46454219254389],[-0.11449813842773439,51.463633152362455],[-0.11312484741210939,51.46176154202791],[-0.11278152465820314,51.46079896968141],[-0.11338233947753908,51.45951550830525],[-0.11484146118164064,51.45791113082951],[-0.11733055114746095,51.45641366097073],[-0.11964797973632814,51.45529052633677],[-0.12514114379882815,51.45416736406834],[-0.13209342956542972,51.45513007627605],[-0.13432502746582034,51.45630669695811],[-0.13595581054687503,51.45833897033726],[-0.13638496398925784,51.45935507309546],[-0.1385307312011719,51.45956898658318],[-0.14179229736328128,51.459034200984036],[-0.14299392700195315,51.45780417032595],[-0.1433372497558594,51.45694847727419],[-0.1556110382080078,51.46063853898319],[-0.1563835144042969,51.464969969892806],[-0.15106201171875003,51.467696956223385],[-0.14822959899902347,51.466574099236176],[-0.1477146148681641,51.46400746521846],[-0.14668464660644534,51.462563670141634],[-0.13887405395507815,51.46325883643615],[-0.1399040222167969,51.46534427178355]]] } }',
            style);

        var style2 = {
            "color": "rgb(103 229 32)",
            "weight": 0.6,
            "fillOpacity": 0.4
        };

        addLocratingShape(
            'mapWithMarkers',
            '{ "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [[[-0.10840415954589845,51.47256235053797],[-0.10437011718750001,51.45668106990573],[-0.07999420166015626,51.45513007627605],[-0.07750511169433595,51.46545121461699]]] } }',
            style2);

        centerLocratingMapUsingMarkers('mapWithMarkers');

        //removeLocratingMapMarker('mapWithMarkers', {id: 'marker1'}); 
        //removeAllLocratingMapMarkers('mapWithMarkers');

    }
});
             
Note: We are happy to extend our API on request, if you need additional features not currently supported. Please get in touch so we can discuss your requirements.

Draw-a-search

Draw-a-search allows you to not only add your own markers to our maps, but to only show markers that are inside user drawn shapes on the map; You can see a working example of Draw-a-search here.

Technically this works in a similar fashion to adding your own markers. Firstly, when loading the plugin, you must set canDraw to 'yes', this will cause the Draw-a-search controls to display on the map, under the zoom controls in the top left corner. Then you need to pass a callback function to onDraw. This will be called every time a user draws a shape on the map. In this function, return the markers you would like to be added to the map. The plugin will automatically only show markers that are in drawn shapes, but you can check in this function the bounds of the shape drawn and restrict the markers returned yourself if you wish.

The following functions can be used with all our plugins (except the all-in-one plugin):

Function Description Usage
enableLocratingDrawASearch(id) Enables the Draw-a-Search controls See example here here
disableLocratingDrawASearch(id) Disable the Draw-a-Search controls See example here here

You can try this feature out in the map below the code, there is a property in the centre of the map. It will appear when you draw a shape around that area. You can also edit shapes and delete them. Markers will be added and removed accordingly.

<!-- Load Locrating map with Draw-a-Search -->
loadLocratingPlugin({
    id: 'drawASearch',
    lat: 51.456913,
    lng: -0.079099,
    icon: '.',
    type: 'transport',
    canDraw: 'yes',
    onDraw: function (e) {

        // Use the below to control which of your markers are displayed on the map, markers will only be shown on the map if they are within the drawn area
        // if you don't have your own logic to check which markers are in the drawn area, that's fine, just return the markers that are within 
        // the bounds (or all your markers) and the plugin will do the rest.
        var bounds = e.bounds;
        var latlngs = e.latlngs;

        var marker1 = {
            id: 'marker1',
            lat: 51.456913,
            lng: -0.079099,
            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="../assets/images/features/propety_picture.jpg" style="width:165px;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">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>',
            icon: '../assets/images/house_icon2.png',
            clickedIcon: '../assets/images/house_icon.png', // Optional
            iconHeight: 38,
            iconWidth: 40
            // You can use the onClick event to react to a marker click
            //,onClick: function(marker) { alert( marker.id + ' clicked') }
        };

        var marker2 = {
            id: 'marker2',
            lat: 51.456913,
            lng: -0.199099,
            icon: '../assets/images/house_icon2.png',
            clickedIcon: '../assets/images/house_icon.png', // Optional
            iconHeight: 38,
            iconWidth: 40,
            // Don't set html here, instead load dynamically below
            onClick: function (marker) {
                // To dynamically set marker popup html, return the html in this function
                return '<div style="width: 350px;"><table style="width:100%;text-align:left"><tbody><tr style="padding: 2px;"><td style="width: 30%;padding: 4px;"><img src="../assets/images/features/propety_picture.jpg" style="width:165px;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">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>';
    
                // To asynchronously open marker and set html don't return above (just delete the return statement) and instead call the function below
                //openLocratingMarker('mapWithMarkers',
                //    {
                //        id: 'marker1',
                //        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="../assets/images/features/propety_picture.jpg" style="width:165px;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">£1,175,000</b><div style="max-width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;">The Ridgeway, Tonbridge TN10</div><div style="font-size:0.85rem;max-width: 150px;padding-top:2px;overflow: hidden;text-overflow: ellipsis;">Detached house<br>5 Bedrooms<br>3 Bathrooms<br>5 Receptions<br><a style="font-weight:bold" href="#">View Details</a></div></div></td></tr></tbody></table></div>'
                //    });
            }
        };

        return [marker1, marker2];
    
        // Or for asynchronous responses, don't use a return value and instead call as below
        //addLocratingMapMarkersToDrawnArea('drawASearch', [marker1, marker2]);

    }
});
             
Note: We are happy to extend our API on request, if you need additional features not currently supported. Please get in touch so we can discuss your requirements.

Clustering markers

When adding your own markers to one of our plugins, you can chose to cluster the markers; meaning that a group of markers, which are close to each other, appear as a single icon when zoomed out. When you zoom in the cluster opens up and the icons appear individually. This reduces clutter on the map.

To cluster your markers, simply pass true to the cluster parameter of addLocratingMapMarkers or addLocratingMapMarkersToDrawnArea. Clustering can be used with all our plugins (except the all-in-one plugin) and can be used in conjunction with Draw-a-Search.

You can see clustering in action here and in this code code.

Note: We are happy to extend our API on request, if you need additional features not currently supported. Please get in touch so we can discuss your requirements.

Ask users which schools to show

If you would like users to be presented with a prompt asking them which type of schools they are interested in (i.e. nurseries, primary, secondary etc.) then please get in touch, as this is a setting we control on our side.

Below is a working example of an embedded map, with a school type prompt:


Advanced Configuration

These instructions detail the most common configuration that clients are likely to want to use, however our plugins support much more. Below is a list of some of these additional options available. Please get in touch to discuss more advanced configuration of our plugins on your website, such as:

  • Showing or hiding map controls.
  • Changing fonts or icons.
  • Setting school filters, such as inspection rating, type, gender etc.
  • Setting property filters.
  • Turning catchment indicators on/off.


Property Hive add-on

If your website uses Property Hive, please be aware that there is a Property Hive add-on for Locrating. This allows you to very quickly and easily add Locrating maps via Property Hive configuration and shortcodes. Not all Locrating features are supported however, so more advanced users may still want to build their own implementation of Locrating using the instructions found on this page.


Going live

When you are ready to go live with out plugin on your public site, you need to ensure you have a valid subscription, otherwise you will see an error message saying 'no subscription found'. If you haven't already please get in touch.

Warning: You need to have a business subscription with us in order to be able to use our plugins on your website. Business subscriptions are different from membership to our public website for individuals and cannot be purchased online. Please get in touch for more details.

Support

We're always here to help, please feel free to contact us at [email protected] with any issues, comments or suggestions.