Our plugins can be installed onto any website within minutes
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.
Simply add a line in the page <head> section, to include our small Javascript API library.
Decide where you want the plugin to appear on your page and add a HTML <div> element to contain it.
With one Javascript call to our API you can populate the <div> with one of our plugins - and that's it!
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.
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.
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 centred 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.
<!-- 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.
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.
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. |
| uprn | Valid UPRN | The UPRN (Unique Property Reference Number) of the property. This will be used to lookup broadband, mobile phone and flood data. |
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 >
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 >
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 >
Our flood risk map plugin is a plain map, which shows the local flood risk due to either rivers and sea, surface water or reservoirs. As this dataset is very large in size, the map is fixed, meaning it cannot be dragged or zoomed. The map also uses a different coordinate system to our other maps and so it is not possible to have the same style of map as our other plugins as a different map provider is used. We have chosen a light coloured map so the flood data is easily distinguishable.
| Parameter | Valid values | Default | Description |
|---|---|---|---|
| floodrisktype | 'riversandsea' 'surfacewater' 'reservoirs' |
'riversandsea' | Sets the type of flood risk displayed when the plugin is first loaded. |
The following shows a transport map with the default options:
<!-- Load Flood Risk Map -->
<body onload="try{loadLocratingPlugin({id:'floodrisk', lat: 51.456913, lng : -0.073099, type:'floodrisk', floodrisktype:'surfacewater'});}catch (err) {};"></body >
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 >
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 >
Our interactive attended schools charts, show the primary and secondary schools that children living in the local area currently attendend.
The following shows the attended schools plugin, with the map turned on:
<!-- Load Attended Schools -->
<body onload="try{loadLocratingPlugin({id: 'attendedschools', lat: 51.456913, lng : -0.073099, type:'attendedschools', showmap: 'true'});}catch (err) {};"></body >
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: In the all-in-one plugin, the map will be hidden
if the screen width is too small, even with this setting set to true.
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 >
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.
|
| uprn | Valid UPRN | The UPRN (Unique Property Reference Number) of the property. This will be used to lookup broadband, mobile phone and flood data. |
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 >
Local area broadband data is available for England only, in other regions this plugin has a different view as shown below:
Our mobile phone plugin shows mobile phone reception; voice and data, indoors and outdoors, for the four main mobile providers - EE, Three, Vodafone and O2.
| 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.
|
| uprn | Valid UPRN | The UPRN (Unique Property Reference Number) of the property. This will be used to lookup broadband, mobile phone and flood data. |
The following shows the default broadband plugin, with the map turned on:
<!-- Load Locrating Property Prices Chart -->
<body onload="try{loadLocratingPlugin({id: 'mobile', lat: 51.456913, lng : -0.073099, type:'mobile', showmap: 'true'});}catch (err) {};"></body >
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', 'prices', 'broadband' or 'mobile' | '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. |
| showmobiletab | 'true' or 'false' | 'true' | Determines if the mobile phone signal option is available. |
| showfloodrisktab | 'true' or 'false' | 'true' | Determines if the flood risk option is available. |
| showschoolsattendedtab | 'true' or 'false' | 'true' | Determines if the schools attended 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 |
|
| streetviewurl | Street View URL | Valid Google Street View URL | This option allows you to specify the full URL that is opened when the Street View button is pressed. This offers full control including showing historical images; click here for an example link. |
| uprn | Valid UPRN | The UPRN (Unique Property Reference Number) of the property. This will be used to lookup broadband, mobile phone and flood data. |
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:
| Function | Example |
|---|---|
| showTransportTab(id) | |
| showSchoolsTab(id) | |
| showAmenitiesTab(id) | |
| showPricesTab(id) | |
| showBroadbandTab(id) | |
| showMobileTab(id) | |
| showFloodRiskTab(id) | |
| showSchoolsAttendedTab(id) | |
| showStreetView(id) | |
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 >
You can dynamically hide menu items, after the plugin has been loaded, by calling showOnlyMenuItems and passing an array of the menu items you wish to show, all other menu items will be hidden.
| Function | Example |
|---|---|
| showOnlyMenuItems(id, menuItemsToShow) | |
Valid array values are: schools, transport, amenities, broadband, mobile, floodrisk, schoolsattended, soldprices and streetview. As an example, the buttons below show and hide menu items in the plugin shown above.
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');
}
});
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]);
}
});
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.
To create a link that pops up a plugin in a new window, such as the All-in-one Plugin, use the openLocratingWindow function. ou can use all the same configuration that applies when embedding a plugin in the normal fashion. Of course, you don't have to use a link, you could use any control that supports onclick such as an image or button. Below is an example:
<!-- Link that opens new window showing Locrating Schools Map -->
<a href="https://www.locrating.com" onclick="try{return openLocratingWindow({lat: 51.456913, lng : -0.073099, type:'schools'});}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.
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:
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:
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.
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.
We're always here to help, please feel free to contact us at [email protected] with any issues, comments or suggestions.