Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Soil details - mobile
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This sample uses jQuery mobile to build an application for mobile devices that displays soil details. jQuery mobile is a framework that simplifies the process of building an application for mobile devices like Android, iOS, and other supported devices.
When the Map loads, the HTML5 Geolocation API is used to determine the current device location. To determine the current device location use the navigator.geolocation.getCurrentPosition method.
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
}
When the current location is found, the callback function (zoomToLocation) runs which zooms to the current location and displays the soils layer. The callback function has a parameter that provides access to the current coordinates (latitude, longitude) and additional information such as accuracy, heading, speed and the current time-stamp.
Note:Applications, especially mobile ones, will benefit when using a manifest file which is a file with a list of resources that will be cached locally. When the web application runs it downloads the resources specified in the manifest and caches them locally. To use a manifest file add the manifest attribute to the <head> element. The browser doesn't need to go back to the server for resources defined in the manifest file unless the manifest file changes.
For more details about working with manifest files see the Mozilla Developer Network documentation.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<title>Soil Survey</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css" />
<style>
html, body, #ui-map-page, #ui-map-content, #ui-map {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.ternary-diagram-container {
padding: 0;
}
.ternary-diagram-container img {
margin: 0 auto;
display: block;
}
.esriLegendService {
margin: 0 auto;
width: 12.5em;
}
.ui-ternary-button {
position: absolute;
bottom: 8.09375em;
right: 0.3125em;
width: 1.875em;
height: 1.875em;
padding: 0.125em;
z-index: 3;
background-color: #FFFFFF;
border: solid #57585A 0.0625em;
border-radius: 5px;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2019.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014%2014%22%20enable-background%3D%22new%200%200%2014%2014%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%229.4519%2C4.30786%208.18823%2C2.2464%206.97345%2C4.31006%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%226.63611%2C9.96875%205.72601%2C11.51495%208.21478%2C11.49963%207.23492%2C9.96826%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%226.97345%2C4.31006%208.18823%2C2.2464%206.9765%2C0.26971%205.57605%2C2.58875%206.67761%2C4.31036%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%228.64624%2C7.38708%2010.2514%2C9.89575%2011.53772%2C7.71051%2011.33795%2C7.3847%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%227.23492%2C9.96826%208.21478%2C11.49963%209.31122%2C11.49286%2010.21027%2C9.96558%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%223.64093%2C9.97144%203.61279%2C10.01917%204.5744%2C11.52203%205.72601%2C11.51495%206.63611%2C9.96875%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%223.58234%2C9.9715%201.11627%2C9.97369%200.16486%2C11.54913%202.72144%2C11.53339%203.61279%2C10.01917%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%2210.21027%2C9.96558%209.31122%2C11.49286%2011.26556%2C11.48083%2010.29602%2C9.96552%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%223.64093%2C9.97144%205.1604%2C7.39014%202.67511%2C7.39233%202.31433%2C7.98981%203.58234%2C9.9715%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%222.31433%2C7.98981%201.11627%2C9.97369%203.58234%2C9.9715%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%225.36401%2C7.04419%204.08887%2C5.05133%202.67511%2C7.39233%205.1604%2C7.39014%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%222.72144%2C11.53339%204.5744%2C11.52203%203.61279%2C10.01917%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%226.8316%2C4.55103%206.67761%2C4.31036%204.53522%2C4.31226%204.08887%2C5.05133%205.36401%2C7.04419%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%228.64624%2C7.38708%208.39081%2C6.98792%208.15564%2C7.38751%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%225.57605%2C2.58875%204.53522%2C4.31226%206.67761%2C4.31036%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%226.8316%2C4.55103%208.39081%2C6.98792%209.71539%2C4.73773%209.4519%2C4.30786%206.97345%2C4.31006%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%225.36401%2C7.04419%205.1604%2C7.39014%205.58514%2C7.38977%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%225.58514%2C7.38977%205.1604%2C7.39014%203.64093%2C9.97144%206.63611%2C9.96875%206.92322%2C9.48108%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%228.15564%2C7.38751%208.39081%2C6.98792%206.8316%2C4.55103%205.36401%2C7.04419%205.58514%2C7.38977%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%226.63611%2C9.96875%207.23492%2C9.96826%206.92322%2C9.48108%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%2210.2514%2C9.89575%2010.29602%2C9.96552%2012.91864%2C9.9632%2011.53772%2C7.71051%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%223.61279%2C10.01917%203.64093%2C9.97144%203.58234%2C9.9715%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%226.67761%2C4.31036%206.8316%2C4.55103%206.97345%2C4.31006%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%226.92322%2C9.48108%208.15564%2C7.38751%205.58514%2C7.38977%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%2210.29602%2C9.96552%2010.2514%2C9.89575%2010.21027%2C9.96558%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%2211.33795%2C7.3847%209.71539%2C4.73773%208.39081%2C6.98792%208.64624%2C7.38708%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%228.15564%2C7.38751%206.92322%2C9.48108%207.23492%2C9.96826%2010.21027%2C9.96558%2010.2514%2C9.89575%20%0A%09%098.64624%2C7.38708%20%09%22%2F%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%2211.26556%2C11.48083%2013.83923%2C11.46503%2012.91864%2C9.9632%2010.29602%2C9.96552%20%09%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%223.61279%22%20y1%3D%2210.01917%22%20x2%3D%222.72144%22%20y2%3D%2211.53339%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%226.8316%22%20y1%3D%224.55103%22%20x2%3D%226.97345%22%20y2%3D%224.31006%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%228.18823%22%20y1%3D%222.2464%22%20x2%3D%226.97345%22%20y2%3D%224.31006%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%225.36401%22%20y1%3D%227.04419%22%20x2%3D%225.1604%22%20y2%3D%227.39014%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%226.8316%22%20y1%3D%224.55103%22%20x2%3D%225.36401%22%20y2%3D%227.04419%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%225.1604%22%20y1%3D%227.39014%22%20x2%3D%223.64093%22%20y2%3D%229.97144%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%223.61279%22%20y1%3D%2210.01917%22%20x2%3D%223.64093%22%20y2%3D%229.97144%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%225.72601%22%20y1%3D%2211.51495%22%20x2%3D%226.63611%22%20y2%3D%229.96875%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%226.92322%22%20y1%3D%229.48108%22%20x2%3D%228.15564%22%20y2%3D%227.38751%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%228.39081%22%20y1%3D%226.98792%22%20x2%3D%228.15564%22%20y2%3D%227.38751%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%226.63611%22%20y1%3D%229.96875%22%20x2%3D%226.92322%22%20y2%3D%229.48108%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%229.71539%22%20y1%3D%224.73773%22%20x2%3D%228.39081%22%20y2%3D%226.98792%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%2211.53772%22%20y1%3D%227.71051%22%20x2%3D%2210.2514%22%20y2%3D%229.89575%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%2210.2514%22%20y1%3D%229.89575%22%20x2%3D%2210.21027%22%20y2%3D%229.96558%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%229.31122%22%20y1%3D%2211.49286%22%20x2%3D%2210.21027%22%20y2%3D%229.96558%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%221.11627%22%20y1%3D%229.97369%22%20x2%3D%223.58234%22%20y2%3D%229.9715%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%2210.21027%22%20y1%3D%229.96558%22%20x2%3D%2210.29602%22%20y2%3D%229.96552%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%223.64093%22%20y1%3D%229.97144%22%20x2%3D%226.63611%22%20y2%3D%229.96875%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%2212.91864%22%20y1%3D%229.9632%22%20x2%3D%2210.29602%22%20y2%3D%229.96552%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%226.63611%22%20y1%3D%229.96875%22%20x2%3D%227.23492%22%20y2%3D%229.96826%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%227.23492%22%20y1%3D%229.96826%22%20x2%3D%2210.21027%22%20y2%3D%229.96558%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%223.58234%22%20y1%3D%229.9715%22%20x2%3D%223.64093%22%20y2%3D%229.97144%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%228.15564%22%20y1%3D%227.38751%22%20x2%3D%228.64624%22%20y2%3D%227.38708%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%228.64624%22%20y1%3D%227.38708%22%20x2%3D%2211.33795%22%20y2%3D%227.3847%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%228.15564%22%20y1%3D%227.38751%22%20x2%3D%225.58514%22%20y2%3D%227.38977%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%225.1604%22%20y1%3D%227.39014%22%20x2%3D%225.58514%22%20y2%3D%227.38977%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%222.67511%22%20y1%3D%227.39233%22%20x2%3D%225.1604%22%20y2%3D%227.39014%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%224.53522%22%20y1%3D%224.31226%22%20x2%3D%226.67761%22%20y2%3D%224.31036%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%226.97345%22%20y1%3D%224.31006%22%20x2%3D%226.67761%22%20y2%3D%224.31036%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%229.4519%22%20y1%3D%224.30786%22%20x2%3D%226.97345%22%20y2%3D%224.31006%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%2210.29602%22%20y1%3D%229.96552%22%20x2%3D%2210.2514%22%20y2%3D%229.89575%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%2211.2865%22%20y1%3D%2211.51355%22%20x2%3D%2211.26556%22%20y2%3D%2211.48083%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%228.39081%22%20y1%3D%226.98792%22%20x2%3D%226.8316%22%20y2%3D%224.55103%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%225.57605%22%20y1%3D%222.58875%22%20x2%3D%226.67761%22%20y2%3D%224.31036%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%2210.2514%22%20y1%3D%229.89575%22%20x2%3D%228.64624%22%20y2%3D%227.38708%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%228.39081%22%20y1%3D%226.98792%22%20x2%3D%228.64624%22%20y2%3D%227.38708%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%226.67761%22%20y1%3D%224.31036%22%20x2%3D%226.8316%22%20y2%3D%224.55103%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%2211.26556%22%20y1%3D%2211.48083%22%20x2%3D%2210.29602%22%20y2%3D%229.96552%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%227.23492%22%20y1%3D%229.96826%22%20x2%3D%226.92322%22%20y2%3D%229.48108%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%227.23492%22%20y1%3D%229.96826%22%20x2%3D%228.21478%22%20y2%3D%2211.49963%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%224.08887%22%20y1%3D%225.05133%22%20x2%3D%225.36401%22%20y2%3D%227.04419%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%225.36401%22%20y1%3D%227.04419%22%20x2%3D%225.58514%22%20y2%3D%227.38977%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%225.58514%22%20y1%3D%227.38977%22%20x2%3D%226.92322%22%20y2%3D%229.48108%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%223.61279%22%20y1%3D%2210.01917%22%20x2%3D%224.5744%22%20y2%3D%2211.52203%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%222.31433%22%20y1%3D%227.98981%22%20x2%3D%223.58234%22%20y2%3D%229.9715%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%220.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20x1%3D%223.58234%22%20y1%3D%229.9715%22%20x2%3D%223.61279%22%20y2%3D%2210.01917%22%2F%3E%0A%3C%2Fg%3E%0A%3Cpolyline%20display%3D%22none%22%20fill%3D%22%2357585A%22%20points%3D%223.16488%2C15.54914%209.97647%2C4.26974%2016.83926%2C15.465%20%22%2F%3E%0A%3C%2Fsvg%3E%0A");
background-size: 1.375em;
background-position: center;
background-repeat: no-repeat;
}
.ui-legend-button {
position: absolute;
bottom: 11.21875em;
right: 0.3125em;
width: 1.875em;
height: 1.875em;
padding: 0.125em;
z-index: 3;
background-color: #FFFFFF;
border: solid #57585A 0.0625em;
border-radius: 5px;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2019.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014%2014%22%20enable-background%3D%22new%200%200%2014%2014%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill%3D%22%2357585A%22%20d%3D%22M12.23576%2C6.4059l1.32674%2C1.00489l-7.52992%2C3.39497L0.53125%2C6.63893l1.32674-0.5982l4.17459%2C3.16194%0A%09L12.23576%2C6.4059z%20M8.06119%2C0.375L0.53125%2C3.76999l5.50131%2C4.16684l7.52994-3.39499L8.06119%2C0.375z%20M6.03258%2C11.89691%0A%09L1.85799%2C8.73497l-1.32674%2C0.5982L6.03258%2C13.5l7.52992-3.39497l-1.32674-1.00489L6.03258%2C11.89691z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
background-size: 1.375em;
background-position: center;
background-repeat: no-repeat;
}
/* zoom slider */
.esriSimpleSlider div {
width: 1.125em;
height: 1.125em;
font-size: 1.875em;
line-height: 0.9375em;
}
.esriSimpleSliderVertical.esriSimpleSliderBR {
right: 0.3125em;
bottom: 2.875em;
}
@media screen and (min-width: 768px) {
.esriSimpleSliderVertical.esriSimpleSliderBR {
bottom: 2.875em;
}
}
.info-window-mobile-button {
display: none;
font-size: inherit;
padding: 0.7em 0.7em;
border-width: 0.125em;
}
@media screen and (max-width: 768px) {
.esriPopup .titleButton.maximize {
display: none;
}
.esriPopup .titleButton.close {
display: none;
}
.info-window-mobile-button {
display: block;
}
}
</style>
</head>
<body>
<div data-role="page" id="ui-map-page">
<div data-role="content" id="ui-map-content" class="ui-content">
<div id="ui-map"></div>
<a href="#ui-ternary-diagram-page" class="ui-ternary-button"></a>
<a href="#ui-legend-page" class="ui-legend-button"></a>
</div>
</div>
<div data-role="page" id="ui-ternary-diagram-page">
<div data-role="header">
<h2>Soil Texture</h2>
</div>
<div class="ui-content">
<div data-role="content" class="ternary-diagram-container">
<img src="images/soilTriangle.jpg" />
</div>
<a href="#ui-map-page" data-role="button" class="ui-btn">Close</a>
</div>
</div>
<div data-role="page" id="ui-legend-page">
<div data-role="header">
<h2>Legend</h2>
</div>
<div class="ui-content">
<div id="legendDiv" class="legend-container"></div>
<a href="#ui-map-page" data-role="button" class="ui-btn">Close</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://js.arcgis.com/3.29compact/"></script>
<script>
var map;
function infoWindowMobileHandler(event){
map.infoWindow.hide();
}
$.mobile.pagecontainer({defaults: true});
$.mobile.pagecontainer({
create: function (event, ui){
console.log("create:", event.type);
initializeEsriJS();
}
});
function initializeEsriJS(){
require([
"dojo/on",
"dojo/parser",
"esri/Color",
"esri/dijit/Legend",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",
"esri/graphic",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/ImageParameters",
"esri/map",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/tasks/query"
],
function (on, parser, Color, Legend, Point, webMercatorUtils, Graphic, ArcGISDynamicMapServiceLayer, FeatureLayer,
ImageParameters, Map,
PictureMarkerSymbol, SimpleFillSymbol, Query){
parser.parse();
// create the map
map = new Map("ui-map", {
center: [-100.21318, 37.032053],
sliderPosition: "bottom-right",
zoom: 7,
basemap: "gray"
});
on(map, "load", mapLoadHandler);
var imageParameters = new ImageParameters();
imageParameters.layerIds = [0];
imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
var soilDynamicLayer = new ArcGISDynamicMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer",
{"opacity": 0.5, imageParameters: imageParameters});
map.addLayer(soilDynamicLayer);
var soilSurvey = new FeatureLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer/0",
{
mode: FeatureLayer.MODE_SELECTION,
outFields: ["*"]
});
soilSurvey.setSelectionSymbol(new SimpleFillSymbol().setColor(new Color([254, 216, 93, 0.6])));
map.addLayer(soilSurvey);
map.on("click", function (event){
var query = new Query();
query.geometry = event.mapPoint;
soilSurvey.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features){
var graphic = features[0];
var attributes = graphic.attributes;
var content = graphic.attributes.muname + "<br><b>Order</b>: " + graphic.attributes.DomOrd
+ "<br><b>SubOrder</b>: " + graphic.attributes.DomSubOrd + "<br><b>Description</b>: "
+ graphic.attributes.farmlndcl + "<br><b>Drainage</b>: " + graphic.attributes.DrainageCl
+ "<br><a href='#' onclick=\"infoWindowMobileHandler(event)\" class='info-window-mobile-button ui-btn'>Close</a> ";
map.infoWindow.setTitle("Soil Details");
map.infoWindow.setContent(content);
map.infoWindow.show(event.mapPoint);
});
});
var legend = new Legend({
map: map,
respectCurrentMapScale: false,
layerInfos: [
{
layer: soilSurvey, title: "Dominant Soil Order"
}
]
}, "legendDiv");
legend.startup();
function mapLoadHandler(event){
if (navigator.geolocation) {
// if you want to track as the user moves setup navigator.geolocation.watchPostion
navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
}
}
function locationError(error){
switch (error.code) {
case error.PERMISSION_DENIED:
console.log("Location not provided");
break;
case error.POSITION_UNAVAILABLE:
console.log("Current location not available");
break;
case error.TIMEOUT:
console.log("Timeout");
break;
default:
console.log("unknown error");
break;
}
}
function zoomToLocation(position){
var mapPoint = webMercatorUtils.geographicToWebMercator(new Point(position.coords.longitude,
position.coords.latitude));
map.centerAndZoom(mapPoint, 13);
var symbol = new PictureMarkerSymbol("images/bluedot.png", 40, 40);
map.graphics.add(new Graphic(mapPoint, symbol));
}
});
}
</script>
</body>
</html>