How to create a LiteMap with ol-ishare

Owned by Domna Kanari
Last updated: 03 Mar, 2022 by Kim Stimpson
4 min read

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:

  1. LiteMap JS module

  2. LiteMap CSS styles

Also, additional configuration is needed based on LiteMap ol-ishare module.

Step-by-step guide

  1. Set up an HTML file and include the JavaScript and CSS files. Create a basic styling and a map element 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>

  2. Configure and Load your map with the Layers you desire. Replace the empty script element which you can find below the script where you point to the LiteMap JS file,

    <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 the map element)

    • 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>

  3. The result will be this basic LiteMap:

For more examples on LiteMaps please see the Examples page.

 

 

 

 

Â