Page Comparison

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

Code Block<!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 mapelement that will hold your map.

Code Block

<!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 Load your map with the layers Layers you desire. Add a new Replace the empty script element which you can find below the script where you point to the LiteMap JS file,

Code Block
<script> // LiteMap code here... </script>

and create a new LiteMap with the following options as indicated 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 Profile (also known as a MapSourceMap Source). The profile Profile determines the available layers. To find the available profiles Profiles (MapSourcesMap Sources) of for 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
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.
Code Block
<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:
Image Added

Info
For more examples on LiteMaps please see the Examplespage.

Versions Compared

Old Version 1

New Version Current

Key

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

Step-by-step guide