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

<!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">
</head>
<body>
    <script src="https://ol-ishare.services.astuntechnology.com/v1/apps/lite/lite.js"></script>
</body>
</html>

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>
</body>
</html>

Configure and load your map with the layers you desire. Add a new script element below the script where you point to the LiteMap JS file 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 use the GetData.aspx request with the following parameters (for this case, we used the Astun Technology demo server to do the request):
- RequestType=JSON
- ms=root
- Type=MapSource
layers 👉 the names of any layers to display. To find the available layers of the profile you like to load you can use the GetData.aspx request with the following parameters (for this case, we used the Astun Technology demo server to do the request):
- RequestType=JSON
- ms=mapsources/AllMaps
- Type=MapSource

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.

<!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>
        //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>
</body>

</html>

The result will be this basic LiteMap 🗺

Additional MapOptions 📖

defaultLayers 👉 You can use the defaultLayers property with 3 parameters:
- “all” which create all layers that have been configured in iShare to be visible in the certain profile
- “initial” which will create and enable all the layers that have been configured in iShare given the property "initaillyVisible":true
- “none” which create no additional layers
The LiteMap is configured to use the default baseMap in the specified profile. If you would like to change the baseMap you can use the baseMap property as indicated in the code below (for this case we used baseMap: "mapsources/base_ospremium_bw" )👇

<!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>
        //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
            },
            baseMap: "mapsources/base_ospremium_bw"
        });
        lite.on('load', function (evt) {
        });
    </script>
</body>

</html>

The result now will be this LiteMap 🗺

Additional LayerOption 📖

There are additional options that you can give to your layer:

name 👉 The name of the layer you want to add to the map
visible 👉 Declare whether you want the layer to be visible when the map is created (the default option is true )
opacity 👉 If you want to give your layers different opacities. The value range is between 0 (totally transparent) and 1 (completely opaque), with 1 being the default value.

An example is given through the below code block. Note that the declaration of the layers is done differently when you apply the aforementioned layer options.

<!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>
        //Lite map code here
        const lite = new oli.litemap.LiteMap({
            target: 'map',
            iShareUrl: 'https://demo.astuntechnology.com/maps/',
            profile: 'mapsources/AllMaps',
            layers:
                [
                    { name: "nhsdoctors", visible: false },
                    { name: "nhshospitals", opacity: 0.8 },
                    { name: "nhspharmacies", opacity: 0.5 },
                    { name: "ward", opacity: 0.3 },
                ],
            view: {
                easting: 521000,
                northing: 161000,
                zoom: 10000
            },
            baseMap: "mapsources/base_ospremium_bw"
        });
        lite.on('load', function (evt) {
        });
    </script>
</body>

</html>

The result now will be this LiteMap, with different opacities 🗺

For more examples on LiteMaps please visit the examples page