SiteWatch API Examples.
Copyright © 2011 - 2024 Samsýn ehf. All Rights Reserved.

Simple map
Simple marker
Simple line
Simple circle
Simple track location
Complex marker
Map coordinate
Project coordinate
Points routing
Address search
Complex track location
Json config
Custom canvas
Show hide Marker:
Show hide Marker text:
Show location ?
Map (This is how the map looks like based on the configuration on the left):
Code (This is how the code looks like based on the configuration above. It can be copied and pasted directly into your project):
<html> <head> <title>SiteWatch API Example Viewer</title> <script src='' type='text/javascript'></script> <style type='text/css'> .siteWatchEdit-markerCssConfig div { background-color: #ffffff; background-color: rgba(255,255,255,0.55); padding: 1px 3px; font-family: arial; font-size: 15px; border-radius: 3px; } </style> <script type='text/javascript'> //A map object variable. var map; //Create a map object. function InitMap() { var zoomLevel = 0; var centerX = 500000; var centerY = 500000; map = SWMap.create('map', { panButton: true, zoomButton: true, defaultZoom: zoomLevel, defaultCenterPoint: { x: centerX, y: centerY } }); showLoc(); }; function showLoc() { map.ShowMyLocation({ showOnStart: true, setView: true, //error: function errorResult(e) { alert(e); }, accuracy: 1000001, // default is 1000001, in meters. options: { enableHighAccuracy: true, timeout: 21000, maximumAge: 1000 }, marker: { showMarker: false }, vectorCircle: { config: { fillColor: 'rgba(255, 0, 0, 0.4)', lineColor: 'rgb(255, 0, 0)', lineWidth: 2, minSize: 5 } } }); }; function showLocTrue() { showLoc(); }; function showLocFalse() { map.ShowMyLocation(false); }; </script> </head> <body onload='InitMap();'> <div id='map' style='height:300px; width:600px;'></div> <div> Show location ? <button onclick='showLocTrue()'>Yes</button> <button onclick='showLocFalse()'>No</button> </div> </body> </html>