Surrey Planning Hub - Planning Application Maps

A simple JavaScript API is available to facilitate easily embedding a map showing planning applications published via the API.

Once you have included hubmap.js and hubmap.css in your page there are two ways of embedding a map:

No code (almost)

Within your HTML page add a div element with a class of hub-map and an attribute called data-url whose value is a path defining your API call as shown the following examples:

Live applications within the last 30 days

Raw data

http://digitalservices.surreyi.gov.uk/developmentcontrol/0.1/applications/search?status=live&casedate=last_30_days

Embed

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://digitalservices.surreyi.gov.uk/embed/hubmap.css"></link> </head> <body> <div class="hub-map" data-url="/developmentcontrol/0.1/applications/search?status=live&casedate=last_30_days"></div> <script src="http://digitalservices.surreyi.gov.uk/embed/hubmap.js"></script> </body> </html>

Live planning applications in Mole Valley

Raw data

http://digitalservices.surreyi.gov.uk/developmentcontrol/0.1/applications/search?status=live&gsscode=E07000210

Embed

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://digitalservices.surreyi.gov.uk/embed/hubmap.css"></link> </head> <body> <div class="hub-map" data-url="/developmentcontrol/0.1/applications/search?status=live&gsscode=E07000210"></div> <script src="http://digitalservices.surreyi.gov.uk/embed/hubmap.js"></script> </body> </html>

Decided planning applications in the west of Surrey Heath

Raw data

http://digitalservices.surreyi.gov.uk/developmentcontrol/0.1/applications/search?status=decided&gsscode=E07000214&bbox=-0.806,51.286,-0.692,51.349

Embed

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://digitalservices.surreyi.gov.uk/embed/hubmap.css"></link> </head> <body> <div class="hub-map" data-url="/developmentcontrol/0.1/applications/search?status=decided&gsscode=E07000214&bbox=-0.806%2C51.286%2C-0.692%2C51.349"></div> <script src="http://digitalservices.surreyi.gov.uk/embed/hubmap.js"></script> </body> </html>

JavaScript API

A small JavaScript API is exposed by HubMap to allow some customisation and for maps to be created manually.

Functions

Functions are provided to create maps, for instance a map can be manually create with JavaScript by calling HubMap.map passing a reference to an element and an options object with a data_url property which defines your API call.

If creating maps manually be sure that hubmap.js is loaded before you try and access the HubMap object. The easiest way to achive this is to include the script in your HTML document before your custom JavaScript code as is done in the example below.

Function Description
HubMap.map(<HTMLElement ¦ String> id, options) Instantiates a map object given a div element (or its id) and an object with options including data_url whose value is a path defining your API call.
HubMap.createMaps() Creates a map for each element found in the page with a class of hub-map and a data-url attribute whose value is a path defining your API call.

Properties

Properties are used to customise HubMap and should be set before creating a map.

Property Description
HubMap.PLAN_APP_INFO Overrides the template used to display planning application information in the popup when a marker is clicked.
HubMap.BASE_URL Overrides the URL of the server used to query features from.

Decided planning applications in Surrey Heath with a decision date with the last 90 days

Raw data

http://digitalservices.surreyi.gov.uk/developmentcontrol/0.1/applications/search?status=decided&gsscode=E07000214&decisiondate=last_90_days

Embed

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://digitalservices.surreyi.gov.uk/embed/hubmap.css"></link> </head> <body> <div class="hub-map manual-map"></div> <script src="http://digitalservices.surreyi.gov.uk/embed/hubmap.js"></script> <script type="text/javascript"> HubMap.PLAN_APP_INFO = "<h2><a href='{caseurl}'>{casereference}</a></h2><p>{locationtext}</p><p>Status: {status}</p><p>Classification: {classificationlabel}</p>" var options = {data_url: "/developmentcontrol/0.1/applications/search?status=decided&gsscode=E07000214&decisiondate=last_90_days"}; var map = HubMap.map(document.getElementsByClassName('manual-map')[0], options); </script> </body> </html>