Page Comparison

...

Set up an HTML file and include the JavaScript and CSS files. 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 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,

Code Block
<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.

Code Block

     <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 🗺 :
Image RemovedImage Added

Info
For more examples on LiteMaps please visit the examples page

...

Versions Compared

Old Version 4

New Version 5

Key