How to create a LiteMap with ol-ishare
- Domna Kanari
- Kim Stimpson
Here we will be taking you through creating a basic LiteMap using ol-ishare, an OpenLayers client for iShare.
To successfully integrate a LiteMap in a web application or to build a standalone LiteMap you need to include the LiteMap’s JavaScript and CSS files in your HTML page via Astun Services. The files you need to point to are the following:
Also, additional configuration is needed based on LiteMap ol-ishare module.
Step-by-step guide
Set up an HTML file and include the JavaScript and CSS files. Create a basic styling and a
mapelement that will hold your map.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0"> <title>LiteMap - Example guide</title> <link rel="stylesheet" href="https://ol-ishare.services.astuntechnology.com/v1/apps/lite/lite.css"> <style type="text/css"> html, body { height: 100%; padding: 0; margin: 0; font-family: sans-serif; font-size: small; } #map { width: 100%; height: 100%; } </style> </head> <body> <div id="map"></div> <script src="https://ol-ishare.services.astuntechnology.com/v1/apps/lite/lite.js"></script> <script> // LiteMap code here... </script> </body> </html>Configure and Load your map with the Layers you desire. Replace the empty
scriptelement which you can find below thescriptwhere you point to theLiteMap JSfile,<script> // LiteMap code here... </script>
and create a new LiteMap with the following options as described in the documentation:target- the id of an element on the page in which the map will be created (in this case themapelement)iShareUrl- the iShare Maps server to load data from (in this case the Astun Technology demo server)profile- the iShare Profile (also known as a Map Source). The Profile determines the available layers. To find the available Profiles (Map Sources) for your iShare instance you can refer to iShare Studio.layers- the names of any Layers to display. To find the available Layers for the Profile you want to load you can also refer to iShare Studio.view- the initial view of the map in the same co-ordinate system and units as the Profile, in this case, British National Grid in metres.<script> //Lite map code here //LiteMap MapOptions const lite = new oli.litemap.LiteMap({ target: 'map', iShareUrl: 'https://demo.astuntechnology.com/maps/', profile: 'mapsources/AllMaps', layers: [ "nhsdoctors", "nhshospitals", "nhspharmacies", "ward", ], view: { easting: 521000, northing: 161000, zoom: 10000 } }); lite.on('load', function (evt) { }); </script>
The result will be this basic LiteMap:
For more examples on LiteMaps please see the Examples page.