Skip to content

Instantly share code, notes, and snippets.

@andygup
Created February 1, 2016 23:44
Show Gist options
  • Save andygup/1e768216177dd8a77a73 to your computer and use it in GitHub Desktop.
Save andygup/1e768216177dd8a77a73 to your computer and use it in GitHub Desktop.
Full offline JS editing widget - (work in progress, NOT final)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0:, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<title>Citizen Request</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link rel="stylesheet" href="//js.arcgis.com/3.15compact/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="//js.arcgis.com/3.15compact/esri/css/esri.css" />
<style>
/*
* --------------------------------------------------------------------
* The code within this style block would ideally go into an external
* stylesheet such as:
* <link rel="stylesheet" href="./css/app.css" />
* --------------------------------------------------------------------
*/
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#ui-map-page, #ui-map-content, #ui-map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.esriSimpleSlider div {
width: 1.125em;
height: 1.125em;
font-size: 1.875em;
line-height: 0.9375em;
}
.esriSimpleSliderHorizontal.esriSimpleSliderBR {
right: 0.3125em;
bottom: 1.625em;
}
@media screen and (min-width: 768px) {
.esriSimpleSliderHorizontal.esriSimpleSliderBR {
bottom: 2.875em;
}
}
.LocateButton .zoomLocateButton {
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%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%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%22-3%20-3%2020%2020%22%20enable-background%3D%22new%20-3%20-3%2020%2020%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill%3D%22%2357585A%22%20d%3D%22M7-3C3.8-3%2C1.3-0.4%2C1.3%2C2.7C1.3%2C5.6%2C7%2C17%2C7%2C17s5.7-11.4%2C5.7-14.3C12.7-0.4%2C10.2-3%2C7-3z%20M7%2C5.6%0A%09c-1.6%2C0-2.9-1.3-2.9-2.9S5.4-0.1%2C7-0.1s2.9%2C1.3%2C2.9%2C2.9S8.6%2C5.6%2C7%2C5.6z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
background-size: 1.5625em;
position: absolute;
right: 0.3125em;
bottom: 4.0625em;
z-index: 3;
background-color: #FFFFFF;
border: 1px solid #57585A;
}
@media screen and (min-width: 768px) {
.LocateButton .zoomLocateButton {
bottom: 5.3125em;
}
}
.LocateButton .zoomLocateButton:hover {
background-size: 1.5625em;
background-color: #EEEEEE;
color: #4C4C4C;
}
.LocateButton .tracking {
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%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.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%22-3%20-3%2020%2020%22%20enable-background%3D%22new%20-3%20-3%2020%2020%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22normal%22%20display%3D%22none%22%3E%0A%09%3Cpath%20display%3D%22inline%22%20fill%3D%22%2357585A%22%20d%3D%22M7-3C3.8-3%2C1.3-0.4%2C1.3%2C2.7C1.3%2C5.6%2C7%2C17%2C7%2C17s5.7-11.4%2C5.7-14.3C12.7-0.4%2C10.2-3%2C7-3z%0A%09%09%20M7%2C5.6c-1.6%2C0-2.9-1.3-2.9-2.9S5.4-0.1%2C7-0.1s2.9%2C1.3%2C2.9%2C2.9S8.6%2C5.6%2C7%2C5.6z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22hover%22%3E%0A%09%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M7-3C3.8-3%2C1.3-0.4%2C1.3%2C2.7C1.3%2C5.6%2C7%2C17%2C7%2C17s5.7-11.4%2C5.7-14.3C12.7-0.4%2C10.2-3%2C7-3z%20M7%2C5.6%0A%09%09c-1.6%2C0-2.9-1.3-2.9-2.9S5.4-0.1%2C7-0.1s2.9%2C1.3%2C2.9%2C2.9S8.6%2C5.6%2C7%2C5.6z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
background-size: 1.5625em;
background-color: #EEEEEE;
}
.basemapOption:last-child {
padding-bottom: 1.25em;
}
.basemapOptionSelected {
background-color: #333333;
color: #f6f6f6;
}
.basemapOptionNormal {
background-color: #f6f6f6;
color: #333333;
}
#ui-feature-templates-button {
position: absolute;
bottom: 6.0625em;
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%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%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%22M1%2C10l-1%2C4l4-1l7-7L8%2C3L1%2C10z%20M11%2C0L9%2C2l3%2C3l2-2L11%2C0z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
background-size: 1.375em;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
#ui-feature-templates-button {
bottom: 7.3125em;
}
}
#ui-feature-templates-button:hover {
background-repeat: no-repeat;
width: 1.875em;
height: 1.875em;
background-size: 1.375em;
}
#ui-feature-templates-button:hover {
background-color: #EEEEEE;
}
#ui-features-panel .ui-li-divider {
padding-bottom: 0.5em;
}
#ui-features-panel ul {
padding: 0.3125em 0.3125em;
}
#ui-features-panel li {
padding: 0.3125em;
}
#inner-editor {
width: 12.5em;
}
.esriAttributeInspector .atiLabel {
padding-right: 0;
}
.esriAttributeInspector .dijitTextBox {
border: solid #57585A 0.0625em;
border-radius: 0.3125em;
width: 13.75em;
}
.esriAttributeInspector textarea {
background: transparent none;
}
.esriAttributeInspector .dijitButtonNode {
border: 0.3125em solid #57585A;
}
.esriAttributeInspector .dijitButtonNode .ui-input-text {
border-style: none;
}
.esriAttributeInspector .dijitButtonNode .dijitArrowButtonInner {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%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%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolygon%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%0A%3C%2Fsvg%3E%0A");
width: 1.875em;
}
.esriAttributeInspector .dijitArrowButtonContainer {
padding: 0.125em;
}
.dijitInputContainer .ui-input-text {
margin: 0 0.3125em;
border-style: none;
}
.dijitInputContainer .dijitInputInner {
padding-left: 0.3125em;
}
.dijitComboBoxMenuPopup .dijitComboBoxMenu {
border: solid #57585A 0.0625em;
border-radius: 0.3125em;
}
.dijitComboBoxMenu .dijitMenuItem {
padding: 0.3125em 0.1875em;
}
.dijitComboBoxMenu .dijitMenuItemHover {
color: #FFFFFF;
background-color: #57585A;
text-shadow: none;
}
.esriMobileNavigationBar {
z-index: 3;
background: darkgrey;
}
.esriMobileNavigationBar .esriMobileNavigationItem.right {
/*padding-right: 0.3125em;*/
display: none;
}
/*.esriMobileNavigationBar .esriMobileNavigationItem.right img {*/
/*background-position: center;*/
/*background-repeat: no-repeat;*/
/*background-size: 1.25em;*/
/*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%2018.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%22-298%20390%2014%2014%22%20enable-background%3D%22new%20-298%20390%2014%2014%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%22-289%2C397%20-289%2C390%20-293%2C390%20-293%2C397%20-298%2C397%20-291%2C404%20-284%2C397%20%22%2F%3E%0A%3C%2Fsvg%3E%0A");*/
/*}*/
.esriMobileNavigationBar .esriMobileNavigationItem.left {
padding-left: 0.3125em;
}
.esriMobileNavigationBar .esriMobileNavigationItem.left img {
background-position: center;
background-repeat: no-repeat;
background-size: 1.25em;
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%2018.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%22-298%20390%2014%2014%22%20enable-background%3D%22new%20-298%20390%2014%2014%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%22-284%2C393%20-287%2C390%20-291%2C394%20-295%2C390%20-298%2C393%20-294%2C397%20-298%2C401%20-295%2C404%20-291%2C400%20-287%2C404%20%0A%09-284%2C401%20-288%2C397%20%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.esriMobileNavigationBar .esriMobileNavigationItem.center {
text-shadow: none;
color: #4C4C4C;
}
.esriPopupMobile {
box-shadow: none;
-webkit-box-shadow: none;
}
.esriPopupMobile .titlePane {
background: none repeat scroll 0 0 #FFFFFF;
color: #57585A;
border: 1px solid #57585A;
}
.esriPopupMobile .pointer.top {
top: -11px;
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%2018.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%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%2024%2012%22%20enable-background%3D%22new%200%200%2024%2012%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22pointer-bottom%22%20display%3D%22none%22%3E%0A%09%3Cg%20display%3D%22inline%22%3E%0A%09%09%3Cpolyline%20points%3D%220%2C-0.5%2011.48108%2C11.5%2024%2C-0.5%200%2C-0.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%20display%3D%22inline%22%3E%0A%09%09%3Cpolyline%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23333333%22%20stroke-miterlimit%3D%2210%22%20points%3D%220%2C-0.5%2011.48108%2C11.5%2024%2C-0.5%200%2C-0.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22pointer-top%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpolyline%20points%3D%2224%2C13.5%2012.51892%2C1.5%200%2C13.5%2024%2C13.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%3E%0A%09%09%3Cpolyline%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23333333%22%20stroke-miterlimit%3D%2210%22%20points%3D%2224%2C13.5%2012.51892%2C1.5%200%2C13.5%2024%2C13.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
}
.esriPopupMobile .titleButton.close {
background-size: 2.1875em;
background-position: center;
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%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.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%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22close-button%22%3E%0A%09%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2215.95833%22%20cy%3D%2215.58333%22%20r%3D%2213.25%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229.58333%22%20y1%3D%229.58333%22%20x2%3D%2222.45833%22%20y2%3D%2222.45833%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229.58333%22%20y1%3D%2222.45833%22%20x2%3D%2222.45833%22%20y2%3D%229.58333%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
}
.esriPopupMobile .titleButton.arrow {
background-position: center;
background-size: 2.1875em;
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%2018.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%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%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22close-button%22%20display%3D%22none%22%3E%0A%09%3Ccircle%20display%3D%22inline%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2216%22%20cy%3D%2215.6%22%20r%3D%2213.2%22%2F%3E%0A%09%0A%09%09%3Cline%20display%3D%22inline%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229.6%22%20y1%3D%229.6%22%20x2%3D%2222.5%22%20y2%3D%2222.5%22%2F%3E%0A%09%0A%09%09%3Cline%20display%3D%22inline%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229.6%22%20y1%3D%2222.5%22%20x2%3D%2222.5%22%20y2%3D%229.6%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22arrow-right%22%3E%0A%09%3Ccircle%20display%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2216%22%20cy%3D%2215.6%22%20r%3D%2213.2%22%2F%3E%0A%09%3Cg%3E%0A%09%09%3Cline%20display%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2216%22%20y1%3D%2216%22%20x2%3D%2222.5%22%20y2%3D%2222.5%22%2F%3E%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2220%22%20y1%3D%2215.5%22%20x2%3D%2212%22%20y2%3D%227.6%22%2F%3E%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2211.8%22%20y1%3D%2223.5%22%20x2%3D%2220.4%22%20y2%3D%2214.7%22%2F%3E%0A%09%09%3Cline%20display%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2222.5%22%20y1%3D%229.6%22%20x2%3D%2216%22%20y2%3D%2216%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
}
.esriPopupMobile .pointer.bottom {
bottom: -11px;
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%2018.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%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%2024%2012%22%20enable-background%3D%22new%200%200%2024%2012%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22pointer-bottom%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpolyline%20points%3D%220%2C-0.5%2011.48108%2C11.5%2024%2C-0.5%200%2C-0.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%3E%0A%09%09%3Cpolyline%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23333333%22%20stroke-miterlimit%3D%2210%22%20points%3D%220%2C-0.5%2011.48108%2C11.5%2024%2C-0.5%200%2C-0.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22pointer-top%22%20display%3D%22none%22%3E%0A%09%3Cg%20display%3D%22inline%22%3E%0A%09%09%3Cpolyline%20points%3D%2224%2C13%2012.51892%2C1%200%2C13%2024%2C13%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%20display%3D%22inline%22%3E%0A%09%09%3Cpolyline%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23333333%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20points%3D%2224%2C13%2012.51892%2C1%200%2C13%2024%2C13%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
}
.esriMobileInfoView .esriMobileInfoViewSection {
margin: 0.375em;
padding: 0.375em;
border: solid 2px #57585A;
background-color: rgba(255, 255, 255, 0.75);
-webkit-border-radius: 10px;
-webkit-box-sizing: border-box;
}
.esriMobileInfoViewItem {
margin: 0px;
padding-top: 0.5em;
padding-left: 0.5em;
color: #262626;
}
.infoTemplateContentRowLabel {
font-weight: bold;
line-height: 2em;
vertical-align: middle;
width: 5em;
display: inline-block;
}
.infoTemplateContentRowItem {
line-height: 2em;
padding-left: 0.5em;
vertical-align: middle;
}
</style>
</head>
<body>
<div data-role="page" id="ui-map-page" data-theme="a">
<div id="ui-map-content" data-theme="a">
<div id="ui-map"></div>
<div id="ui-dijit-locatebutton"></div>
<a id="ui-feature-templates-button" href="#ui-features-panel" data-rel="popup"
class="ui-btn" data-transition="pop"></a>
</div>
<div data-role="popup" id="ui-features-panel" data-theme="a">
<ul id="ui-feature-list" data-role="listview" data-inset="true"></ul>
</div>
<div data-role="popup" id="ui-collection-prompt" data-theme="a" class="ui-content"
data-position-to="#ui-feature-templates-button">
<p>Click the map to report an incident.</p>
</div>
</div>
<!-- Attribute Inspector -->
<div data-role="page" id="ui-attributes-page" data-theme="a">
<div data-role="header" data-nobackbtn="true">
<h1>Collect</h1>
</div>
<div class="ui-content" data-inset="true">
<div>
<div id="currentAddress"></div>
</div>
<div id="ui-attributes-container"></div>
<a href="#ui-map-page" data-role="button">Finish</a>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="//js.arcgis.com/3.15compact/"></script>
<script>
jQuery.fn.exists = function (){
return jQuery(this).length > 0;
};
// --------------------------------------------------------------------
// Main function that will be called at the bottom of the page to
// initialize and start the application lifecycle
// --------------------------------------------------------------------
function applicationInitialize(){
var appGlobals = {
map: null,
collectMode: false,
citizenRequestLayer: null,
locator: null,
citizenRequestLayerURL: "//sampleserver5.arcgisonline.com/ArcGIS/rest/services/LocalGovernment/CitizenRequests/FeatureServer/0",
center: [-88.147286296, 41.785857478]
};
$.mobile.pagecontainer({ defaults: true });
$.mobile.pagecontainer({
//https://api.jquerymobile.com/pagecontainer/#event-create
create: function (event, ui){
// ----------------------------------------------------
// Invoke function to initialize the code for the
// ArcGIS API for JavaScript
// ----------------------------------------------------
$(".ui-loader").show();
initializeEsriJS();
}
});
function initializeEsriJS(){
require([
"dojo/_base/array",
"dojo/_base/lang",
"dojo/dom-construct",
"dojo/on",
"dojo/parser",
"dojo/query!css3",
"esri/Color",
"esri/config",
"esri/dijit/AttributeInspector",
"esri/dijit/HomeButton",
"esri/dijit/LocateButton",
"esri/dijit/PopupMobile",
"esri/geometry/webMercatorUtils",
"esri/graphic",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/map",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/locator",
"esri/tasks/query", "dojo/domReady!"
], function (array, lang, domConstruct, on, parser, query, Color, esriConfig, AttributeInspector,
HomeButton, LocateButton, PopupMobile, webMercatorUtils, Graphic, InfoTemplate, FeatureLayer, Map,
SimpleLineSymbol, SimpleMarkerSymbol, Locator, Query){
parser.parse();
// ----------------------------------------------------
// This sample requires a proxy page to handle
// communications with the ArcGIS Server services. You
// will need to replace the url below with the location
// of a proxy on your machine. See the
// "Using the proxy page" help topic for details on
// setting up a proxy page.
// ----------------------------------------------------
esriConfig.defaults.io.proxyUrl = "/sproxy/";
// ----------------------------------------------------
// Create the symbology for the selected feature,
// when a Popup opens
// ----------------------------------------------------
var slsHighlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([38, 38, 38, 0.7]), 2);
var sms = new SimpleMarkerSymbol();
sms.setPath("M21.5,21.5h-18v-18h18V21.5z M12.5,3V0 M12.5,25v-3 M25,12.5h-3M3,12.5H0");
sms.setSize(45);
sms.setOutline(slsHighlightSymbol);
var infoWindowPopup = new PopupMobile({markerSymbol: sms}, domConstruct.create("div"));
// ----------------------------------------------------
// Dictionary objects to provide domain value lookup for fields in popups
// ----------------------------------------------------
var severityFieldDomainCodedValuesDict = {};
var requestTypeFieldDomainCodedValuesDict = {};
// ----------------------------------------------------
// InfoTemplate for the FeatureLayer
// ----------------------------------------------------
var featureLayerInfoTemplate = new InfoTemplate();
featureLayerInfoTemplate.setTitle("<b>Request ${objectid:formatRequestID}</b>");
var infoTemplateContent = "<span class=\"infoTemplateContentRowLabel\">Date:</span><span class=\"infoTemplateContentRowItem\">${requestdate:DateFormat}</span><br>" +
"<span class=\"infoTemplateContentRowLabel\">Phone:</span><span class=\"infoTemplateContentRowItem\">${phone:formatPhoneNumber}</span><br>" +
"<span class=\"infoTemplateContentRowLabel\">Name:</span><span class=\"infoTemplateContentRowItem\">${name}</span><br>" +
"<span class=\"infoTemplateContentRowLabel\">Severity:</span><span class=\"infoTemplateContentRowItem\">${severity:severityDomainLookup}</span><br>" +
"<span class=\"infoTemplateContentRowLabel\">Type:</span><span class=\"infoTemplateContentRowItem\">${requesttype:requestTypeDomainLookup}</span><br>" +
"<span class=\"infoTemplateContentRowLabel\">Comments:</span><span class=\"infoTemplateContentRowItem\">${comment}</span>";
featureLayerInfoTemplate.setContent(infoTemplateContent);
// ----------------------------------------------------
// Formatting functions for infoTemplate
// ----------------------------------------------------
severityDomainLookup = function (value, key, data){
return severityFieldDomainCodedValuesDict[value];
};
requestTypeDomainLookup = function (value, key, data){
return requestTypeFieldDomainCodedValuesDict[value];
};
formatRequestID = function (value, key, data){
var searchText = new String(value);
var formattedString = searchText.replace(/(\d)(?=(\d\d\d)+(?!\d))/gm, "$1,");
return formattedString;
};
formatPhoneNumber = function (value, key, data){
return "<a href=\"tel:" + data.phone + "\">" + data.phone + "</a>";
}
// ----------------------------------------------------
// Initialize the main User Interface components
// ----------------------------------------------------
appGlobals.map = new Map("ui-map", {
sliderOrientation: "horizontal",
sliderPosition: "bottom-right",
basemap: "topo",
center: appGlobals.center,
zoom: 13,
sliderStyle: "small",
infoWindow: infoWindowPopup
});
appGlobals.locator = new Locator(appGlobals.locatorURL);
var geoLocate = new LocateButton({
map: appGlobals.map
}, "ui-dijit-locatebutton");
var homeButton = new HomeButton({
map: appGlobals.map
}, "ui-home-button-hidden");
// ----------------------------------------------------
// Initialize the FeatureLayer, LayerInfo, and
// AttributeInspector
// ----------------------------------------------------
appGlobals.citizenRequestLayer = new FeatureLayer(appGlobals.citizenRequestLayerURL,
{mode: FeatureLayer.MODE_ONEDEMAND,
infoTemplate: featureLayerInfoTemplate,
outFields: ["*"]
});
var layerInfoArray = [
{
"featureLayer": appGlobals.citizenRequestLayer,
"showAttachments": false,
"showDeleteButton": false,
"isEditable": true,
"fieldInfos": [
{
"fieldName": "requesttype",
"label": "Type",
"isEditable": true
},
{
"fieldName": "name",
"label": "Name",
"isEditable": true
},
{
"fieldName": "phone",
"label": "Phone",
"isEditable": true
},
{
"fieldName": "email",
"label": "Email",
"isEditable": true
},
{
"fieldName": "comment",
"label": "Comments",
"isEditable": true,
"stringFieldOption": AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
}
]
}
];
var attributeInspector = new AttributeInspector({
layerInfos: layerInfoArray
}, "ui-attributes-container");
// ----------------------------------------------------
// Returns the Feature Template given the Coded Value
// ----------------------------------------------------
function getFeatureTemplateFromCodedValueByName(item){
var returnType = null;
$.each(appGlobals.citizenRequestLayer.types, function (index, type){
if (type.name === item) {
returnType = type.templates[0];
}
});
return returnType;
}
// ----------------------------------------------------
// Initializes event handler for map and prepares the
// FeatureTemplate
// ----------------------------------------------------
function addCitizenRequestFeature(item){
$("#ui-collection-prompt").popup("open");
var citizenRequestFeatureTemplate = getFeatureTemplateFromCodedValueByName(item);
var mapClickEventHandler = on(appGlobals.map, "click", function (event){
//only capture one click
mapClickEventHandler.remove();
// set back to false, since the map has been clicked on.
appGlobals.collectMode = false;
var currentDate = new Date();
// citizenRequestFeatureTemplate.prototype.attributes);
var newAttributes = lang.mixin({}, citizenRequestFeatureTemplate.prototype.attributes);
newAttributes.requestdate = Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth(),
currentDate.getUTCDate(), currentDate.getUTCHours(), currentDate.getUTCMinutes(),
currentDate.getUTCSeconds(), 0);
var newGraphic = new Graphic(event.mapPoint, null, newAttributes);
// ----------------------------------------------------
// Creates the new feature in the citizen request
// FeatureLayer
// ----------------------------------------------------
appGlobals.citizenRequestLayer.applyEdits([newGraphic], null, null, function (adds){
var query = new Query();
var res = adds[0];
query.objectIds = [res.objectId];
// ----------------------------------------------------
// Query the citizen request FeatureLayer for the
// Graphic that was just added, well use its geometry
// to lookup the address at that location
// ----------------------------------------------------
appGlobals.citizenRequestLayer.queryFeatures(query, function (result){
if (result.features.length > 0) {
var currentFeature = result.features[0];
var currentFeatureLocation = webMercatorUtils.webMercatorToGeographic(currentFeature.geometry);
/////////////
// TODO
////////////
//
// Removed geocoder - may do something else here, like the lat/lon of the ADD feature?
// ----------------------------------------------------
// Tell jQuery Mobile to navigate to the page containing
// the AttributeInspector
// ----------------------------------------------------
$.mobile.changePage("#ui-attributes-page", null, true, true);
}
else {
console.warn("Unable to locate the feature that was just collected.");
// ----------------------------------------------------
// Tell jQuery Mobile to navigate to the page containing
// the AttributeInspector
// ----------------------------------------------------
$.mobile.changePage("#ui-attributes-page", null, true, true);
}
});
}, function (error){
// do some great error catching
console.error(JSON.stringify(error));
});
});
}
function layersAddResultEventHandler(event){
var layersArray = event.layers;
$.each(layersArray, function (index, value){
var currentLayer = value.layer;
if (currentLayer.hasOwnProperty("renderer")) {
var renderer = currentLayer.renderer;
if (renderer.hasOwnProperty("infos")) {
var infos = renderer.infos;
// ----------------------------------------------------
// unordered list in parent div ui-features-panel
// ----------------------------------------------------
$("#ui-feature-list").append("<li data-role=\"list-divider\" class=\"ui-li-divider ui-bar-inherit ui-first-child\">Report an issue</li>");
$.each(infos, function (j, info){
severityFieldDomainCodedValuesDict[info.value] = info.label;
// ----------------------------------------------------
// Initialize an event handler for the list item click
// ----------------------------------------------------
var listItem = $("<li/>").on("click", function (event){
appGlobals.map.setMapCursor("pointer");
// ----------------------------------------------------
// wire the click event to call addCitizenRequestFeature
// ----------------------------------------------------
addCitizenRequestFeature(info.label);
appGlobals.collectMode = true;
});
listItem.attr("data-theme", "a");
var listContent = [];
listContent.push("<a href=\"#ui-map-page\" class=\"ui-btn ui-btn-icon-right ui-icon-plus\">" + info.label + "</a>");
listItem.append(listContent.join(""));
// ----------------------------------------------------
// unordered list in parent div ui-features-panel
// ----------------------------------------------------
$("#ui-feature-list").append(listItem);
});
}
}
});
}
function initializeEventHandlers(){
on(appGlobals.map, "load", function (event){
appGlobals.map.infoWindow.resize(185, 100);
on(appGlobals.map, "layers-add-result", layersAddResultEventHandler);
});
on(appGlobals.citizenRequestLayer, "error", function (event){
console.error("citizenRequestLayer failed to load.", JSON.stringify(event.error));
$(".ui-loader").hide();
});
on(appGlobals.citizenRequestLayer, "load", function (event){
var featureLayerTemplates = appGlobals.citizenRequestLayer.templates;
if (appGlobals.citizenRequestLayer.hasOwnProperty("fields")) {
var fieldsArray = appGlobals.citizenRequestLayer.fields;
array.forEach(fieldsArray, function (field, i){
if (field.name === "severity") {
if (field.hasOwnProperty("domain")) {
if (field.domain.hasOwnProperty("codedValues")) {
var codedValuesArray0 = field.domain.codedValues;
array.forEach(codedValuesArray0, function (codedValue){
severityFieldDomainCodedValuesDict[codedValue.code] = codedValue.name;
});
}
}
}
if (field.name === "requesttype") {
if (field.hasOwnProperty("domain")) {
if (field.domain.hasOwnProperty("codedValues")) {
var codedValuesArray1 = field.domain.codedValues;
array.forEach(codedValuesArray1, function (codedValue){
requestTypeFieldDomainCodedValuesDict[codedValue.code] = codedValue.name;
});
}
}
}
});
}
else {
console.error("Unable to find property fields in: ", JSON.stringify(appGlobals.citizenRequestLayer));
}
$(".ui-loader").hide();
}
);
on(appGlobals.citizenRequestLayer, "click", function (event){
appGlobals.map.infoWindow.setFeatures([event.graphic]);
});
on(attributeInspector, "attribute-change", function (event){
var feature = event.feature;
if (event.fieldName && event.fieldValue) {
feature.attributes[event.fieldName] = event.fieldValue;
feature.getLayer().applyEdits(null, [feature], null);
}
else {
feature.getLayer().applyEdits(null, [feature], null);
}
});
on(geoLocate, "locate", function (event){
var coords = event.position.coords;
});
on(infoWindowPopup, "show", function (event){
if ($("*.esriMobileNavigationItem.left > img[src]").exists()) {
$("*.esriMobileNavigationItem.left > img").removeAttr("src");
}
if ($("*.esriMobileNavigationItem.right > img[src]").exists) {
$("*.esriMobileNavigationItem.right > img").removeAttr("src");
}
});
geoLocate.startup();
homeButton.startup();
$("#ui-home-button").click(function (){
homeButton.home();
});
$(".basemapOption").click(swapBasemap);
$("#ui-features-panel").on("popupafteropen", function (event, ui){
$("#ui-features-panel").on("popupafterclose", function (event, ui){
if (appGlobals.collectMode) {
$("#ui-collection-prompt").show();
}
else {
$("#ui-collection-prompt").hide();
}
setTimeout(function (){
$("#ui-collection-prompt").popup("open");
}, 15);
});
});
$("#ui-collection-prompt").on("popupafteropen", function (event, ui){
setTimeout(function (){
$("#ui-collection-prompt").popup("close");
}, 1200);
});
}
// ----------------------------------------------------
// Initialize Event Handlers and add the citizen request
// layer to the map
// ----------------------------------------------------
initializeEventHandlers();
appGlobals.map.addLayers([appGlobals.citizenRequestLayer]);
}
); // end require / function
}
function swapBasemap(event){
var _basemapName = event.target.dataset.basemapname;
appGlobals.map.setBasemap(_basemapName);
}
}
// --------------------------------------------------------------------
// Begin the sequence by calling the initialization function
// --------------------------------------------------------------------
$(function (){
applicationInitialize();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment