ol-ishare Examples

Examples of using the ol-ishare (oli) API. See the API Documentation for more detailed information about usage.

UMD Bundle

The UMD bundle exposes a oli global which is used with these examples.

LiteMap - Basic usage

Creates a LiteMap specifying a profile (iShare MapSource), list of layers to load and the initial view (easting, northing and zoom (width across the map)).

LiteMap - Centre on device

(Requires HTTPS) Uses the location reported by the browser to centre the map on that location on the user's device.

LiteMap - Centre on feature (using WFS)

Makes a WFS request with a filter which returns a single feature that the map is centred on.

LiteMap - Get layer data

Demonstrates fetching layer data using settings from the map.

LiteMap - Highlight Polygon

Zooms to the extent of a Ward polygon and visually highlights it. Makes a WFS request with a filter which returns a single feature which is added to a vector layer and used to set the map view extent.

LiteMap - Filter WMS layer

Demonstrates filtering a WMS layer to only show a single feature based on a filter.

LiteMap - Filter WMS layer on datetime

Demonstrates filtering a WMS layer to only show roadworks that start today. Requires a datetime column on which to filter. Uses an OGC PropertyIsBetween filter.

LiteMap - Custom Info Template

Customising the content shown in the popup when a user clicks for info using a nunjucks template.

LiteMap - Query string parameters

Specify the list of layers to load and initial view via the query string.

LiteMap - 3rd Party components

Demonstrates creating a LiteMap instance for a given iShare profile (MapSource) and adding a 3rd party layer control and gazetteer search. Also includes displaying a thematic layer.

LiteMap - Clustering points

Display primary schools using a ol/source/Cluster~Cluster source. Single features are displayed as icons while clusters are circles which display the number of features they represent.

LiteMap - Info on hover (using WFS)

Display primary school features as a vector WFS layer; display a tooltip on hover; full info on click.

LiteMap - Nearest Feature to click

Search for the nearest NHS Pharmacy within 5km when the user clicks on the map.

LiteMap - Layer switcher control

LiteMap with a layer switcher control including per-layer legend graphics.

LiteMap - OS Maps API base map

Adding a WMTS OS Maps API base map to a LiteMap. While iShare Studio doesn't currently support a WMTS base map type it's possible to add layers to the LiteMap map instance in a load event handler.

LiteMap - Gazetteer control

LiteMap with an auto-complete address search control.

LiteMap - Display marker

Display a marker with a custom icon, clicking on the map moves the marker.

Standalone Gazetteer

Standalone auto-complete address search useful for providing an address lookup when no map is required. Also see the Gazetteer app for a bundled version which doesn't require external dependencies

Logger - Select Asset

Fault reporting map, allowing a user to select a streetlight on the map in order to report a fault.

Logger - Select Location

Fault reporting map, report at any location.

Logger - Demo

Demonstration of using Logger as part of a forms-based user journey to report a broken streetlight, a pothole or fly-tipping.