Let's get building!

Our plugins can be installed onto any website within minutes!

Get Started

Introduction

Our plugins can be installed onto any website within minutes; with just two lines of Javascript required. Hopefully these instructions are suitably clear, however if something is either not covered, or unclear in this documentation, please feel free to email us at [email protected] We're more than happy to assist getting you up and running.


Getting started

Before you start integrating our plugins it's important you get in touch. Without having a valid subscription with us none the plugins will function on your site. Please email us at [email protected] if you do not yet have a subscription in place.


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 of the pages 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.


Embedding a schools map

To create a schools map embedded into you webpage, you first need create an iframe to hold the map, as below:

<!-- Frame showing Locrating Schools Map -->
<iframe id="mapFrame" style="width:100%; height:600px; border:1px solid #CCCCCC;"></iframe>
             

You can use a fixed width or a dynamic width, e.g. in the style property, you could put "width:800px".

Next in an appropriate event, e.g. the onclick event of a tab control, set the map location by specifying the 'lat' and 'lng' coordinates you wish the map to be centred around. For example purposes, the code below uses the onload event, however you should probably not use this in your website as it is likely to cause unnecessary extra loads, see the warning box below for further details.

<!-- Load Locrating Schools Map -->
<body onload="try{setLocratingIFrameProperties({'id':'mapframe','lat': '51.456913', 'lng' : '-0.073099'});}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.


Warning You should avoid loading our plugin silently in the background, e.g. in a tab that users can optionally switch to, as this causes a map load which possibly no user ever looks at.

Below is a working example of an embedded schools map:




Setting the property icon

Once you have your map up and running, you will likely want to use your own icon for the property marker in the center of the map. To do this simply pass the url of the icon you wish to use when loading the map, as below:

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

Below is a working example of an embedded map, with a customised icon:




Hiding the property icon

If you wish to have a schools map as part of an area guide, you will likely want to hide the property icon altogether, this can be done by passing '.' as the icon, as below:

<!-- Load Locrating Schools Map -->
<body onload="try{setLocratingIFrameProperties({'id':'mapNoIconFrame','lat': '51.456913', 'lng' : '-0.073099','icon':'.'});}catch (err) {};"></body >
             

Below is a working example of an embedded map with no property icon:




Changing the map style

We support a wide range of different map styles, which can be easy configured using the 'mapstyle' attribute, as below:


<!-- Link that opens new window showing Locrating Schools Map with Light theme -->
<a href="http://www.locrating.com" onclick="try{return openLocratingWindow({'lat': '51.456913', 'lng' : '-0.073099','mapstyle':'light'});}catch (err) {}">Schools Map</a>
                 

Click the theme names below to view our current themes. To use a non-default theme on your site, simply set the mapstyle attribute as listed below. We can support additional themes, if none of the below work for you, please contact us at [email protected] and we can discuss supplying additional themes for you.

Theme MapStyle
Light (default) light
Voyager voyager
Dark dark
Open Street Map osm
Wikipedia wiki
Hydda hydda_full

Changing the default zoom

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 the whole area by default. To do this you simply need to set the zoom attribute, as below

<!-- Load Locrating Schools Map -->
<body onload="try{setLocratingIFrameProperties({'id':'mapframe','lat': '51.456913', 'lng' : '-0.073099','zoom','15'});}catch (err) {};"></body >
             

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.


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 let us know via [email protected], as this is a setting we manage on our side.

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




Showing your properties

If you list your properties for sale or rent with Zoopla, we can obtain their details and display them on the map alongside schools. Please contact us at [email protected] for further instructions on how to do this and what configuration is available.

Below is a working example of an embedded map, loading properties directly from Zoopla:




Embedding a stations list

To create a local stations list embedded into you webpage, you first need create an iframe to hold the list, as below:

<!-- Frame showing Locrating Stations List -->
<iframe id="stationsframe" style="width:300px; height:400px; "></iframe>
             

The plugin is fully responsive and will adjust its font size depending upon the available space. Next, in an appropriate event, e.g. the onload event of the body, set the map location by simply specifying the 'lat' and 'lng' coordinates of the property. Ensure you also set the 'type' attribute to 'stations'.

<!-- Load Locrating Schools Map -->
<body onload="try{setLocratingIFrameProperties({'id':'stationsframe','lat': '51.456913', 'lng' : '-0.073099','type':'stations'});}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 plugin will display up to 15 stations from a 10 mile radius, the taller the control, the more it will display. You can limit the number of stations displayed using the 'maxstations' attribute, as below:

<!-- Load Locrating Schools Map -->
<body onload="try{setLocratingIFrameProperties({'id':'stationsframe','lat': '51.456913', 'lng' : '-0.073099','type':'stations','maxstations':'5'});}catch (err) {};"></body >
             

We have deliberately excluded a title from the 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.

Below is a working example of an embedded stations list:




Embedding a transport map

To create a transport map, showing just transport and your property, embedded into you webpage, you first need create an iframe to hold the map, as below:

<!-- Frame showing Locrating Simple Map -->
<iframe id="simpleMapFrame" style="width:100%; height:600px; border:1px solid #CCCCCC;"></iframe>
             

You can use a fixed width or a dynamic width, e.g. in the style property, you could put "width:800px". Then in an appropriate event, e.g. the onclick event of a map button or a page load, set the map location by specifying the 'lat' and 'lng' coordinates you wish the map to be centred around. Ensure you also set the 'maponly' attribute to 'true'. You can also set the default zoom, just as you can with the schools map.

<!-- Load Locrating Simple Map -->
<body onload="try{setLocratingIFrameProperties({'id':'simpleMapFrame','lat': '51.456913', 'lng' : '-0.073099','maponly':'true'});}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.

Below is a working example of an embedded transport map:




Adding a schools map link

Warning We're not keen on this type on implementation as it does not offer such a seamless integration to your website and most people and browsers nowadays don't like popup windows, but it exists as an option for clients that don't want to or can't work with iframes. Our preferred method to add our schools map to your site is in an iframe.

To create a link that pops up a Schools Map, create a link with an onclick function as below, simply change the 'lat' and 'lng' arguments to change the map location. You can use the same configuration as an embedded map, e.g. setting the property icon. 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 Schools Map -->
<a href="http://www.locrating.com" onclick="try{return openLocratingWindow({'lat': '51.456913', 'lng' : '-0.073099'});}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.


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. 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, simply change the 'lat' and 'lng' arguments to change the map location and remember to set the 'type' attribute to 'schoolsreport'. 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 Schools Map -->
<a href="http://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.


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 contact us at [email protected] to discuss more advanced configuration of our plugins on your website.

  • Showing or hiding map controls.
  • 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. If you haven't already please contact us at [email protected]


Going live

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




Trusted by 100s of UK Estate Agency Brands