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.

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.Uses the HistoryNavigation control to move the map between previous locations and zoom levels on the map. (This control in turn utilizes the History component.)html)

Uses the HistoryNavigation control to move the map between previous locations and zoom levels on the map. (This control in turn utilizes the History component.)

LiteMap - Remember map state

Automatically keep track of changes to the map in LocalStorage with state.LiteMap and store.WebStorage.

LiteMap - Permalink

Basic permalink demonstration. Created with state.LiteMap and store.QueryString and demonstrates manual state update process;

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.

LiteMap - Measure length

Shows minimal implementation of using Measure interaction to measure single distances.

LiteMap - Measure area

Demonstates using Measure to measure areas, plus persisting measurements and with an example of changing the measurement feature styles.

LiteMap - Layer opacity

Demonstrates the ability to set a data layer's opacity in LiteMap options. (Also shows using getCurrentBaseLayerand standard OpenLayers ability to set layer opacity to vary the visibility of the basemap for contrast.)

LiteMap - non-iShare layers

Shows what happens by default when iShare layers are shown along with those configured separately. The non-iShare layers are displayed but do not appear in the layer switcher, are not queried by the built-in info interaction, and their state is not stored with LiteMap layers.