This repository was archived by the owner on Dec 3, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
50 lines (50 loc) · 2.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
<title>Hajk3 light</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script src="hajk-light.js"></script>
</head>
<body>
<h1>How to use Hajk light</h1>
<p>
<ol>
<li>Setup a map in regular Hajk just the way you want it to look when embedded. Show relevant layers, pan to relevant location, pick a zoom level that suits your needs.</li>
<li>Using Anchor plugin, get relevant query parameters, e.g. <code>m=bl&x=109540.43517945363&y=6284671.775522817&z=5&l=58</code>.</li>
<li>Make edits to the page where you want to embed Hajk light. Necessary changes are as follow:
<ol>
<li>In your pages <code>head</code>, load script, e.g. <code><pre><script src="app.js"></script></pre></code></li>
<li>Make sure that you have a <code><div id="map"></div></code> somewhere on the page. This element will hold the map. You can pick any ID, default is <code>map</code>.</li>
<li>At the end of page, just before closing <code></body></code> tag, place a snippet that looks something like this (replace with your own settings):</li>
</ol>
</li>
</ol>
<code>
<pre>
<script>
document.Hajk({
injectToDOMelementWithId: "map", // ID of the element that we will inject our map to. It _must_ exist in DOM when script loads.
urlToMapservice:
"https://interntestkarta.halmstad.se/utiltest/proxy/geturl/https://interntestkarta.halmstad.se/mapservicetest/", // URL to running mapservice. Can be with our without proxy.
queryParams: "m=bl?x=109190.9765625&y=6284213.312499999&z=3&l=58,188" // Query params from the Anchor plugin in regular Hajk edition
});
</script>
</pre>
</code>
</p>
<h1>Demo</h1>
<p>Below is a quick demo that on successful loads displays the title of map config.</p>
<!-- START OF SNIPPET THAT YOU NEED TO PLACE ON YOUR OWN PAGE. DON'T FORGET TO CHANGE THE SETTINGS!-->
<div id="map"></div>
<script>
document.Hajk({
injectToDOMelementWithId: "map", // ID of the element that we will inject our map to. It _must_ exist in DOM when script loads.
urlToMapservice:
"https://interntestkarta.halmstad.se/utiltest/proxy/geturl/https://interntestkarta.halmstad.se/mapservicetest/", // URL to running mapservice. Can be with our without proxy.
queryParams: "m=bl?x=109190.9765625&y=6284213.312499999&z=3&l=58,188" // Query params from the Anchor plugin in regular Hajk edition
});
</script>
<!-- END OF SNIPPET -->
</body>
</html>