Create a LiteMap with ol-ishare, an OpenLayers client for iShare

Info: What is LiteMap and how it can be configured?

LiteMap is a lightweight iShare map that has been designed to be able to be integrated directly into other web applications.

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

Configure and load your map with the layers you desire. Replace the empty script element 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 indicated 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 MapSource). The profile determines the available layers. To find the available profiles (MapSources) of your iShare instance you can refer to Studio.
- layers 👉 the names of any layers to display. To find the available layers of the profile you like to load you can as well refer to Studio.
- view 👉 the initial view of the map in the same coordinate system and units as the profile, in this case, British National Grid in meters.
```
     <script>
        //Lite map code here
        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 visit the examples page