Hide Table of Contents
View Soil details - mobile sample in sandbox
Soil details - mobile

Description

This sample usesjQuery mobileto 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.

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.46/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.46compact/"></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
: 6,
          basemap
: "gray-vector"
       
});
        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>
 
         
Show Modal