TOPICS
Menu
Adding geoSherpa to other HTML5 pages
geoSherpa is usable in most HTML5 web pages or applications. geoSherpa has been tested in:
To add geoSherpa to an HTML5 page:
1. Copy the following HTML snippet into the <HEAD> tag of your HTML page:
<!-- geoSherpa Widget CSS Reference--> <link rel="stylesheet" href="https://cdn.geowidgets.io/geosherpa/lib/current/css/geosherpa-core.css">
2. Copy the following HTML snippet into the <body> tag, just before it closes (e.g. </body>):
<!-- geoSherpa Widget JavaScript Reference -->
<script type="text/javascript" src="https://cdn.geowidgets.io/geosherpa/lib/current/js/geosherpa-core.min.js"></script>
<!-- geoSherpa initialization command -->
<script>window.GeoSherpa.initialize({clientApiKey: "YOURAPIKEY", panelConfiguration: {visible: true,location: 1}});</script>
</body>
geoSherpa Initialization Parameters
Example
{
clientApiKey: "f8ccb8ca-d77a-4887-bc3f-29c9eac6a524",
cacheStateValues: true,
panelConfiguration{
visible: true,
location: 1,
verticalOffset: 0,
horizontalOffset: 0,
}
}
Reference
clientApiKey
Required
Type: String
This is the API key provided by geoSherpa Planner for a specific Guide. This can be obtained from geoSherpa Planner by selecting a Guide and Deploy Guide.
cacheStateValues
Optional
Type: Boolean
Default: true
This is an optional parameter that stores the current state and position of the geoSherpa widget in the user’s browser local storage. If you do not want geoSherpa storing data in user’s browsers (e.g. GDPR), please set to false.
panelConfiguration
visible
Optional
Type: Boolean
Default: true
Defines initial visibility of the geoSherpa widget on the page.
location
Optional
Type: Integer
Default: 1 (TopRight)
Defines the default position the geoSherpa Widget will open on the page.
0 = TopLeft 1 = TopRight 2 = BottomLeft 3 = BottomRight 4 = Center
horizontalOffset
Optional
Type: Integer
Default: 0
Defines the horizontal offset, in pixels, from the location parameter.
verticalOffset
Optional
Type: Integer
Default: 0
Defines the horizontal offset, in pixels, from the location parameter.
geoSherpa Code Examples
The following code examples illustrate how to use geoSherpa in various web pages and applications.
ArcGIS JavaScript 4 (2D)
ArcGIS JavaScript 4 (3D)
ArcGIS JavaScript 3
Esri Leaflet
Leaflet
HTML5
ArcGIS JavaScript 4 (2D)
<!-- Demo : https://geowidgets.digitaldataservices.com/demos/other/arcgisjs/4/geosherpa-intro-mapview.html -->
<!-- Source: https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to MapView - Create a 2D map - 4.10</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<!-- geoSherpa Widget CSS Reference-->
<link rel="stylesheet" href="https://cdn.geowidgets.io/geosherpa/lib/current/css/geosherpa-core.css">
<script src="https://js.arcgis.com/4.10/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<!-- geoSherpa Widget JavaScript Reference -->
<script type="text/javascript" src="https://cdn.geowidgets.io/geosherpa/lib/current/js/geosherpa-core.min.js"></script>
<!-- geoSherpa initialization command -->
<script>window.GeoSherpa.initialize({clientApiKey: "31516aa8-51a2-4cd7-9a0b-c07c8234a971", panelConfiguration: {visible: true,location: 1}});</script>
</body>
</html>
ArcGIS JavaScript 4 (3D)
<!-- Demo : https://geowidgets.digitaldataservices.com/demos/other/arcgisjs/4/geosherpa-intro-sceneview.html -->
<!-- Source: https://developers.arcgis.com/javascript/latest/sample-code/intro-sceneview/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to SceneView - Create a 3D map - 4.10</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<!-- geoSherpa Widget CSS Reference-->
<link rel="stylesheet" href="https://cdn.geowidgets.io/geosherpa/lib/current/css/geosherpa-core.css">
<script src="https://js.arcgis.com/4.10/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView) {
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
scale: 50000000,
center: [-101.17, 21.78]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<!-- geoSherpa Widget JavaScript Reference -->
<script type="text/javascript" src="https://cdn.geowidgets.io/geosherpa/lib/current/js/geosherpa-core.min.js"></script>
<!-- geoSherpa initialization command -->
<script>window.GeoSherpa.initialize({clientApiKey: "a4c95e16-66e2-4676-bfe2-ebf119cfac03", panelConfiguration: {visible: true,location: 1}});</script>
</body>
</html>
ArcGIS JavaScript 3
<!-- Demo : https://geowidgets.digitaldataservices.com/demos/other/arcgisjs/3/geosherpa-basemap-toggle.html -->
<!-- Source: https://developers.arcgis.com/javascript/3/jssamples/widget_toggle.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Basemap Toggle</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<!-- geoSherpa Widget CSS Reference-->
<link rel="stylesheet" href="https://cdn.geowidgets.io/geosherpa/lib/current/css/geosherpa-core.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#BasemapToggle {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/BasemapToggle",
"dojo/domReady!"
], function(
Map, BasemapToggle
) {
map = new Map("map", {
center: [-70.6508, 43.1452],
zoom: 16,
basemap: "topo"
});
var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
toggle.startup();
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="BasemapToggle"></div>
</div>
<!-- geoSherpa Widget JavaScript Reference -->
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/geowidgets/gs/js/current/js/geosherpa-core.min.js"></script>
<!-- geoSherpa initialization command -->
<script>window.GeoSherpa.initialize({clientApiKey: "75f2b9b2-2971-4e82-9d5d-092131dee026", panelConfiguration: {visible: true,location: 2}});</script>
</body>
</html>
Esri Leaflet
<!-- Demo : https://geowidgets.digitaldataservices.com/demos/other/leaflet/esrileaflet.html -->
<!-- Source: https://esri.github.io/esri-leaflet/examples/ -->
<html>
<head>
<meta charset=utf-8 />
<title>Esri Leaflet Quickstart</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"
integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
crossorigin=""></script>
<!-- geoSherpa Widget CSS Reference-->
<link rel="stylesheet" href="https://cdn.geowidgets.io/geosherpa/lib/current/css/geosherpa-core.css">
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map("map").setView([37.75, -122.23], 10);
L.esri.basemapLayer("Topographic").addTo(map);
</script>
<!-- geoSherpa Widget JavaScript Reference -->
<script type="text/javascript" src="https://cdn.geowidgets.io/geosherpa/lib/current/js/geosherpa-core.min.js"></script>
<!-- geoSherpa initialization command -->
<script>window.GeoSherpa.initialize({clientApiKey: "d456779b-6c76-4784-ac55-be8f1a5586ef", panelConfiguration: {visible: true,location: 1}});</script>
</body>
</html>
Leaflet
<!-- Demo : https://geowidgets.digitaldataservices.com/demos/other/leaflet/leaflet.html -->
<!-- Source: https://leafletjs.com/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Layers Control Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<!-- geoSherpa Widget CSS Reference-->
<link rel="stylesheet" href="https://cdn.geowidgets.io/geosherpa/lib/current/css/geosherpa-core.css">
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var cities = L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [grayscale, cities]
});
var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};
var overlays = {
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
<!-- geoSherpa Widget JavaScript Reference -->
<script type="text/javascript" src="https://cdn.geowidgets.io/geosherpa/lib/current/js/geosherpa-core.min.js"></script>
<!-- geoSherpa initialization command -->
<script>window.GeoSherpa.initialize({clientApiKey: "7acd35f7-205b-4cb3-a9c9-251758344389", panelConfiguration: {visible: true,location: 1}});</script>
</body>
</html>
HTML5
<!-- Demo : https://geowidgets.digitaldataservices.com/demos/other/html/ -->
<!-- Source: https://html5-templates.com/preview/html5-page-layout.html -->
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive HTML5 Page Layout Example</title>
<meta name="description" content="Simple HTML5 Page layout template with header, footer, sidebar etc.">
<link rel="stylesheet" href="style.css">
<!-- geoSherpa Widget CSS Reference-->
<link rel="stylesheet" href="https://cdn.geowidgets.io/geosherpa/lib/current/css/geosherpa-core.css">
<script src="script.js"></script>
</head>
<body>
<header>
<div id="logo"><img src="logo.png">HTML5 Example</div>
<nav>
<ul>
<li><a href="/">Home</a>
<li><a href="#">Menu 1</a>
<li><a href="#">Menu 2</a>
<li><a href="#">Menu 3</a>
</ul>
</nav>
</header>
<section>
<strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
</section>
<section id="pageContent">
<main role="main">
<article>
<h2>Stet facilis ius te</h2>
<p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
</article>
<article>
<h2>Illud mollis moderatius</h2>
<p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
</article>
<article>
<h2>Ex ignota epicurei quo</h2>
<p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>
</article>
<article>
<h2>His at autem inani volutpat</h2>
<p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>
</article>
</main>
<aside>
<div>Sidebar 1</div>
<div>Sidebar 2</div>
<div>Sidebar 3</div>
</aside>
</section>
<footer>
<p>© You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
<address>
Contact: <a href="mailto:me@example.com">Mail me</a>
</address>
</footer>
<!-- geoSherpa Widget JavaScript Reference -->
<script type="text/javascript" src="https://cdn.geowidgets.io/geosherpa/lib/current/js/geosherpa-core.min.js"></script>
<!-- geoSherpa initialization command -->
<script>window.GeoSherpa.initialize({clientApiKey: "029af99d-b92a-41d8-bf9a-9d8ac3af10d3", panelConfiguration: {visible: true,location: 1}});</script>
</body>
</html>
