LiteMap - Example guide

{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Here we will be taking you through creating a basic LiteMap using ol-ishare, an OpenLayers client for iShare.","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"LiteMap JS module","type":"text","marks":[{"type":"link","attrs":{"href":"https://ol-ishare.services.astuntechnology.com/v1/apps/lite/lite.js"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"LiteMap CSS styles","type":"text","marks":[{"type":"link","attrs":{"href":"https://ol-ishare.services.astuntechnology.com/v1/apps/lite/lite.css"}}]},{"text":" ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Also, additional configuration is needed based on ","type":"text"},{"text":"LiteMap ol-ishare module","type":"text","marks":[{"type":"link","attrs":{"href":"https://ol-ishare.services.astuntechnology.com/v1/apidoc/module-ol-ishare_litemap.html#~MapOptions"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Step-by-step guide","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":" Set up an HTML file and include the JavaScript and CSS files. Create a basic styling and a ","type":"text"},{"text":"map","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"element that will hold your map.","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","content":[{"text":"\n\n\n \n \n \n LiteMap - Example guide\n \n \n\n\n

\n \n \n\n","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Configure and Load your map with the Layers you desire. Replace the empty ","type":"text"},{"text":"script","type":"text","marks":[{"type":"code"}]},{"text":" element which you can find below the ","type":"text"},{"text":"script","type":"text","marks":[{"type":"code"}]},{"text":" where you point to the ","type":"text"},{"text":"LiteMap JS","type":"text","marks":[{"type":"code"}]},{"text":" file,","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":" and create a new LiteMap with the following options as described in the ","type":"text"},{"text":"documentation","type":"text","marks":[{"type":"link","attrs":{"href":"https://ol-ishare.services.astuntechnology.com/v1/apidoc/module-ol-ishare_litemap.html#~MapOptions"}}]},{"text":": ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"target","type":"text","marks":[{"type":"code"}]},{"text":" - the id of an element on the page in which the map will be created (in this case the ","type":"text"},{"text":"map","type":"text","marks":[{"type":"code"}]},{"text":" element)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"iShareUrl","type":"text","marks":[{"type":"code"}]},{"text":" - the iShare Maps server to load data from (in this case the ","type":"text"},{"text":"Astun Technology demo server","type":"text","marks":[{"type":"link","attrs":{"href":"https://demo.astuntechnology.com/maps/"}}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"profile","type":"text","marks":[{"type":"code"}]},{"text":" - 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 ","type":"text"},{"text":"iShare Studio","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/ISHAREHELP/pages/37389172"}}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"layers","type":"text","marks":[{"type":"code"}]},{"text":" - the names of any Layers to display. To find the available Layers for the Profile you want to load you can also refer to ","type":"text"},{"text":"iShare Studio","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/ISHAREHELP/pages/37389216"}}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"view","type":"text","marks":[{"type":"code"}]},{"text":" - 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.","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","content":[{"text":" ","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The result will be this basic LiteMap:","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":95.0},"content":[{"type":"media","attrs":{"width":1444,"id":"9aa9f5d1-f4c0-442f-a010-5c59fdd81e22","collection":"contentId-2828664842","type":"file","height":700}}]}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"For more examples on LiteMaps please see the ","type":"text"},{"text":"Examples","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://ol-ishare.services.astuntechnology.com/v1/examples/index.html"}}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"page.","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph"},{"type":"paragraph"},{"type":"paragraph"},{"type":"paragraph"}],"version":1}

Browser not supported