Let's Get Building!

Our plugins can be installed onto any website within minutes!

   The team at Starberry absolutely love the Locrating Schools Module ... This is great product that offers a wealth of information ... makes the websites we build so much more informative ... the knowledge, expertise & friendliness of the team at Locrating makes working with them a fantastic experience   
Navin Mahendran, Chief Operating Officer, Starberry Ltd

Get Started

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. Please get in touch for more details.

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.

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.


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 populate the <body> using the Tab's onclick event, or similar, so it is only loaded if the users has actively viewed it.
<!-- 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)
'soldprices' (Sold 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'
'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 11. Below this the maps will automatically adjust back to 11.
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.

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.

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, Doctors, Clinic, Hospital.

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.

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 >
             

Stations list

Our stations 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

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 >
            
                                

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

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 >
             

Sold prices chart

Our sold prices plugin shows historical sold price data taken from HM Land Registry. It support 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.
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.
fontsize Number 14 Title font size (px)
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
axisfontsize Number 11 Chart x and y axis font size (px)
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 sold prices chart, with the map turned on and the compare to text set:

<!-- Load Locrating Sold 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 >
             

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.


New!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:

Parameter Valid values Default Description
starttab 'location', 'schools', 'amenities' or 'soldprices' 'location' The tab displayed first by default
showsoldprices 'true' or 'false' 'true' Determines if the sold prices option is available, sold prices are only availabel for England and Wales, so for areas not covered, e.g. Scoland, you may wish to hide this option
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

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 >
            

Adding your own markers

It's possible to add you own markers to our maps, for example, your own properties for sale or rent, which allows you to use our maps in features such as showing property search results on a map.

Three methods 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 Javascript below shows an example of adding a marker 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',
                    iconHeight: 38,
                    iconWidth: 40
                });
            // 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.

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:


Showing your Zoopla properties

The best way to add your properties to our maps, is by adding your own custom markers, as this allows you to integrate everything fully into your site, such as adding links to the property detail pages on your site in map marker popups.

However, if you list your properties for sale or rent with Zoopla, we can obtain their details from Zoopla directly and display them on the map. Please get in touch for further instructions on how to do this and what configuration is available.

Below is a working example of an embedded map, loading properties (in this case for Pedder), directly from Zoopla:


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.

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


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.


Support

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