Last active
December 18, 2015 12:39
-
-
Save pierrelorioux/5784032 to your computer and use it in GitHub Desktop.
overpassAPI.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> | |
| <title>Load Feature Service</title> | |
| <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"> | |
| <style> | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow:hidden; /* Hide bottom overflow of map */ | |
| font-family: "Lucida Grande","Seoge UI","Arial",sans-serif; | |
| font-size: 14px; | |
| line-height: 20px; | |
| color: #666; | |
| background-color: #fff; | |
| } | |
| /*** Map ***/ | |
| .map { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /*** Panels ***/ | |
| .panel { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| /*width:100%;*/ | |
| width: 250px; | |
| height: auto; | |
| padding: 10px; | |
| text-align: center; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| border: 1px rgba(150, 150, 150, 0.50) solid; | |
| background: rgba(255, 255, 255, 0.90); | |
| z-index:100; | |
| } | |
| .panel-center { | |
| position: relative; | |
| margin: 10px auto; | |
| } | |
| .button-list { | |
| display: inline; | |
| margin: 10px; | |
| list-style: none; | |
| } | |
| .titlearea { | |
| background-color: rgba(0, 112, 255, 0.17); | |
| } | |
| .message { | |
| padding-top: 4px; | |
| } | |
| .title-message,.user-message { | |
| vertical-align: middle; | |
| color: #646464; | |
| } | |
| .title-message { | |
| font-size: 20px; | |
| line-height: 30px; | |
| } | |
| .user-message { | |
| font-size: 12px; | |
| line-height: 14px; | |
| } | |
| /*** Containers ***/ | |
| .controls { | |
| padding-top: 10px; | |
| text-align:center; | |
| } | |
| .controls-inner { | |
| display: inline-block; | |
| } | |
| .buttons { | |
| display:inline-block; | |
| /*margin:10px 10px auto;*/ | |
| /*padding-top: 5px;*/ | |
| } | |
| .basemap-container { | |
| display: inline-block; | |
| overflow: hidden; | |
| } | |
| /**** Information panel ***/ | |
| .map-title { | |
| } | |
| .map-subtitle { | |
| font-size: 10px; | |
| } | |
| .info-panel { | |
| padding: 5px; | |
| height: 100%; | |
| text-align: left; | |
| } | |
| .info-label { | |
| margin-left: 5px; | |
| font-size:13px; | |
| } | |
| .info-totals { | |
| margin-left: 0px; | |
| font-size: 12px; | |
| } | |
| .info-list { | |
| display: inline-block; | |
| margin-left: -20px; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| font-size: 12px; | |
| line-height: 14px; | |
| } | |
| .info-list a:hover { | |
| color: #000; | |
| } | |
| .info-item { | |
| margin-left: 2px; | |
| padding: 3px 3px; | |
| cursor:pointer; | |
| } | |
| a { | |
| /*color: rgba(227, 227, 227, 0.5);*/ | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #005580; | |
| text-decoration: bold; | |
| } | |
| .map .tooltip { | |
| color: #333; | |
| border: 1px solid #333; | |
| line-height: 14px; | |
| -o-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| -webkit-border-radius: 3px; | |
| border-radius: 3px; | |
| } | |
| .map.infoPosition { | |
| width: auto; | |
| margin-right: 290px; | |
| } | |
| .esriSimpleSlider.esriSimpleSliderVertical.infoPosition { | |
| top: 2px; | |
| } | |
| /*** Esri Zoom In/Out ***/ | |
| .esriSimpleSlider { | |
| top: 5px; | |
| left: 8px; | |
| border: none !important; | |
| background-color: transparent !important; | |
| color: white !important; | |
| box-shadow: none !important; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| } | |
| .esriSimpleSlider div { | |
| margin-top: 5px; | |
| margin-bottom: 5px; | |
| width: 26px; | |
| height: 26px; | |
| font-size: 18px; | |
| } | |
| .esriSimpleSliderVertical .esriSimpleSliderIncrementButton, .esriSimpleSliderVertical .esriSimpleSliderDecrementButton { | |
| background: #858585; | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYWRkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTdiYzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
| background: -moz-linear-gradient(top, #858585 0%, #242424 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #858585), color-stop(100%, #242424)); | |
| background: -webkit-linear-gradient(top, #858585 0%, #242424 100%); | |
| background: -o-linear-gradient(top, #858585 0%, #242424 100%); | |
| background: -ms-linear-gradient(top, #858585 0%, #242424 100%); | |
| background: linear-gradient(top, #858585 0%, #242424 100%); | |
| border: solid 1px #545454; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| box-shadow: 0 0 0.25em #BBB; | |
| } | |
| .arcgisTheme { | |
| display: inline-block; | |
| height: 20px; | |
| } | |
| /*** Esri Pop-up ***/ | |
| .esriPopup, .esriPopup .contentPane { | |
| font-size: 10px; | |
| line-height: 12px; | |
| /*padding: 6px;*/ /*offsets pointer!*/ | |
| } | |
| .esriPopup .sizer { | |
| width: 200px; | |
| } | |
| .popupZoom { | |
| float:right; | |
| cursor:pointer; | |
| color: rgba(140, 140, 140, 1); | |
| } | |
| /*** Esri Basemap Gallery ***/ | |
| .esriBasemapGallery { | |
| /*width: 600px; | |
| height: 40px;*/ | |
| padding-top: 5px; | |
| } | |
| .esriBasemapGalleryNode { | |
| width: 60px; | |
| } | |
| .esriBasemapGalleryThumbnail { | |
| height: 51px; | |
| width: 65px; | |
| } | |
| .esriBasemapGalleryLabelContainer { | |
| display: none; | |
| /* -webkit-border-radius: 2px; | |
| -moz-border-radius: 2px; | |
| border-radius: 2px; | |
| color: #000; | |
| background-color: #fff; | |
| font-size: 10px;*/ | |
| } | |
| .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail { | |
| border: 2px solid #3C7AFF; | |
| } | |
| /*** Esri Geocode Widget ***/ | |
| .simpleGeocoder { | |
| display: inline-block; | |
| height: 20px; | |
| margin-top: 3px; | |
| margin-bottom: 5px; | |
| width: 235px; | |
| } | |
| .simpleGeocoder .esriGeocoder { | |
| height: 20px; | |
| border: 1px solid #CCC; | |
| } | |
| .simpleGeocoder.esriGeocoder, .simpleGeocoder .esriGeocoderIcon{ | |
| margin-top: 3px; | |
| padding-top: 3px; | |
| } | |
| .simpleGeocoder .esriGeocoder input { | |
| padding: 3px; | |
| } | |
| .simpleGeocoder .esriGeocoder input:focus { | |
| border: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .simpleGeocoder .esriGeocoder .esriGeocoderReset { | |
| margin: 2px 1px 6px 0; | |
| } | |
| .simpleGeocoder .esriGeocoderResults { | |
| margin: -3px 0 0 -1px; | |
| border: 1px rgba(150, 150, 150, 0.50) solid; | |
| text-align: left; | |
| } | |
| /*** Esri Directions Widget ***/ | |
| .esriRoutes { | |
| max-height: 350px; | |
| overflow-y: scroll; | |
| } | |
| /*** Loading image ***/ | |
| .progress { | |
| position: absolute; | |
| display: block; | |
| margin-left: -16px; | |
| margin-top: -16px; | |
| top: 50%; | |
| left: 50%; | |
| width: 32px; | |
| height: 32px; | |
| z-index: 100; | |
| background: url("../images/progress.gif") no-repeat; | |
| } | |
| /*** misc ***/ | |
| .inline { | |
| display:inline-block; | |
| } | |
| .selected { | |
| background: #356094; | |
| border: solid 1px #2A4E77; | |
| text-decoration: none; | |
| } | |
| .visible { | |
| display:block; | |
| } | |
| .hidden { | |
| display:none; | |
| } | |
| /*** Buttons and Input***/ | |
| label, | |
| input, | |
| button, | |
| select, | |
| textarea { | |
| font-size: 12px; | |
| font-weight: normal; | |
| line-height: 20px; | |
| } | |
| input, | |
| button, | |
| select, | |
| textarea { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| label { | |
| display: inline-block; | |
| margin: 5px; | |
| height: 10px; | |
| } | |
| select, | |
| textarea, | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="datetime"], | |
| input[type="datetime-local"], | |
| input[type="date"], | |
| input[type="month"], | |
| input[type="time"], | |
| input[type="week"], | |
| input[type="number"], | |
| input[type="email"], | |
| input[type="url"], | |
| input[type="search"], | |
| input[type="tel"], | |
| input[type="color"], | |
| .uneditable-input { | |
| display: inline-block; | |
| /*height: 20px;*/ | |
| padding: 4px 6px; | |
| /*padding: 0px 4px;*/ | |
| margin-bottom: 5px; | |
| font-size: 12px; /* small */ | |
| line-height: 18px; /* small */ | |
| color: #555555; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| } | |
| input, | |
| textarea, | |
| .uneditable-input { | |
| width: 225px; | |
| } | |
| textarea { | |
| height: auto; | |
| } | |
| textarea, | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="datetime"], | |
| input[type="datetime-local"], | |
| input[type="date"], | |
| input[type="month"], | |
| input[type="time"], | |
| input[type="week"], | |
| input[type="number"], | |
| input[type="email"], | |
| input[type="url"], | |
| input[type="search"], | |
| input[type="tel"], | |
| input[type="color"], | |
| .uneditable-input { | |
| background-color: #ffffff; | |
| border: 1px solid #cccccc; | |
| -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
| -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); | |
| -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; | |
| -moz-transition: border linear 0.2s, box-shadow linear 0.2s; | |
| -o-transition: border linear 0.2s, box-shadow linear 0.2s; | |
| transition: border linear 0.2s, box-shadow linear 0.2s; | |
| padding: 1px 4px; // | |
| } | |
| textarea:focus, | |
| input[type="text"]:focus, | |
| input[type="password"]:focus, | |
| input[type="datetime"]:focus, | |
| input[type="datetime-local"]:focus, | |
| input[type="date"]:focus, | |
| input[type="month"]:focus, | |
| input[type="time"]:focus, | |
| input[type="week"]:focus, | |
| input[type="number"]:focus, | |
| input[type="email"]:focus, | |
| input[type="url"]:focus, | |
| input[type="search"]:focus, | |
| input[type="tel"]:focus, | |
| input[type="color"]:focus, | |
| .uneditable-input:focus { | |
| border-color: rgba(82, 168, 236, 0.8); | |
| outline: 0; | |
| outline: thin dotted \9; | |
| /* IE6-9 */ | |
| -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); | |
| -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); | |
| box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); | |
| } | |
| input[type="radio"], | |
| input[type="checkbox"] { | |
| margin: 4px 4px; | |
| margin-top: 1px \9; | |
| *margin-top: 0; | |
| line-height: normal; | |
| cursor: pointer; | |
| } | |
| input[type="file"], | |
| input[type="image"], | |
| input[type="submit"], | |
| input[type="reset"], | |
| input[type="button"], | |
| input[type="radio"], | |
| input[type="checkbox"] { | |
| width: auto; | |
| } | |
| select, | |
| input[type="file"] { | |
| height: 24px; | |
| /* In IE7, the height of the select element cannot be changed by height, only font-size */ | |
| *margin-top: 4px; | |
| /* For IE7, add top margin to align select with labels */ | |
| line-height: 24px; | |
| } | |
| select { | |
| width: 220px; | |
| background-color: #ffffff; | |
| border: 1px solid #cccccc; | |
| padding: 2px 4px; | |
| margin-top: 5px; | |
| } | |
| select[multiple], | |
| select[size] { | |
| height: auto; | |
| } | |
| .select-medium { | |
| width: 150px; | |
| } | |
| select:focus, | |
| input[type="file"]:focus, | |
| input[type="radio"]:focus, | |
| input[type="checkbox"]:focus { | |
| outline: thin dotted #333; | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; | |
| } | |
| .uneditable-input, | |
| .uneditable-textarea { | |
| color: #999999; | |
| cursor: not-allowed; | |
| background-color: #fcfcfc; | |
| border-color: #cccccc; | |
| -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); | |
| -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); | |
| box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); | |
| } | |
| .uneditable-input { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| } | |
| .uneditable-textarea { | |
| width: auto; | |
| height: auto; | |
| } | |
| input:-moz-placeholder, | |
| textarea:-moz-placeholder { | |
| color: #999999; | |
| } | |
| input:-ms-input-placeholder, | |
| textarea:-ms-input-placeholder { | |
| color: #999999; | |
| } | |
| input::-webkit-input-placeholder, | |
| textarea::-webkit-input-placeholder { | |
| color: #999999; | |
| } | |
| .radio, | |
| .checkbox { | |
| min-height: 18px; | |
| padding-left: 18px; | |
| } | |
| .radio input[type="radio"], | |
| .checkbox input[type="checkbox"] { | |
| float: left; | |
| margin-left: -18px; | |
| } | |
| .controls > .radio:first-child, | |
| .controls > .checkbox:first-child { | |
| padding-top: 5px; | |
| } | |
| .radio.inline, | |
| .checkbox.inline { | |
| display: inline-block; | |
| padding-top: 5px; | |
| margin-bottom: 0; | |
| vertical-align: middle; | |
| } | |
| .radio.inline + .radio.inline, | |
| .checkbox.inline + .checkbox.inline { | |
| margin-left: 10px; | |
| } | |
| .input-mini { | |
| width: 60px; | |
| } | |
| .input-small { | |
| width: 90px; | |
| } | |
| .input-medium { | |
| width: 130px; | |
| } | |
| .input-large { | |
| width: 210px; | |
| } | |
| .input-xlarge { | |
| width: 270px; | |
| } | |
| .input-xxlarge { | |
| width: 530px; | |
| } | |
| input[class*="span"], | |
| select[class*="span"], | |
| textarea[class*="span"], | |
| .uneditable-input[class*="span"], | |
| .row-fluid input[class*="span"], | |
| .row-fluid select[class*="span"], | |
| .row-fluid textarea[class*="span"], | |
| .row-fluid .uneditable-input[class*="span"] { | |
| float: none; | |
| margin-left: 0; | |
| } | |
| .input-append input[class*="span"], | |
| .input-append .uneditable-input[class*="span"], | |
| .input-prepend input[class*="span"], | |
| .input-prepend .uneditable-input[class*="span"], | |
| .row-fluid input[class*="span"], | |
| .row-fluid select[class*="span"], | |
| .row-fluid textarea[class*="span"], | |
| .row-fluid .uneditable-input[class*="span"], | |
| .row-fluid .input-prepend [class*="span"], | |
| .row-fluid .input-append [class*="span"] { | |
| display: inline-block; | |
| } | |
| input, | |
| textarea, | |
| .uneditable-input { | |
| margin-left: 0; | |
| margin-bottom: 4px; | |
| } | |
| input[disabled], | |
| select[disabled], | |
| textarea[disabled], | |
| input[readonly], | |
| select[readonly], | |
| textarea[readonly] { | |
| cursor: not-allowed; | |
| background-color: #eeeeee; | |
| } | |
| input[type="radio"][disabled], | |
| input[type="checkbox"][disabled], | |
| input[type="radio"][readonly], | |
| input[type="checkbox"][readonly] { | |
| background-color: transparent; | |
| } | |
| /********************************************************************/ | |
| /*** Buttons ***/ | |
| .fade { | |
| opacity: 0; | |
| -webkit-transition: opacity 0.15s linear; | |
| -moz-transition: opacity 0.15s linear; | |
| -o-transition: opacity 0.15s linear; | |
| transition: opacity 0.15s linear; | |
| } | |
| .fade.in { | |
| opacity: 1; | |
| } | |
| .collapse { | |
| position: relative; | |
| height: 0; | |
| overflow: hidden; | |
| -webkit-transition: height 0.35s ease; | |
| -moz-transition: height 0.35s ease; | |
| -o-transition: height 0.35s ease; | |
| transition: height 0.35s ease; | |
| } | |
| .collapse.in { | |
| height: auto; | |
| } | |
| .close { | |
| float: right; | |
| font-size: 20px; | |
| font-weight: bold; | |
| line-height: 20px; | |
| color: #000000; | |
| text-shadow: 0 1px 0 #ffffff; | |
| opacity: 0.2; | |
| filter: alpha(opacity=20); | |
| } | |
| .close:hover { | |
| color: #000000; | |
| text-decoration: none; | |
| cursor: pointer; | |
| opacity: 0.4; | |
| filter: alpha(opacity=40); | |
| } | |
| button.close { | |
| padding: 0; | |
| cursor: pointer; | |
| background: transparent; | |
| border: 0; | |
| -webkit-appearance: none; | |
| } | |
| .btn { | |
| display: inline-block; | |
| *display: inline; | |
| /*padding: 4px 14px;*/ | |
| padding: 2px 12px; /* small */ | |
| *margin-left: .3em;*/ | |
| margin: 5px 5px 5px 5px; /* small */ | |
| font-size: 12px; /* small */ | |
| /*line-height: 20px;*/ | |
| line-height: 18px; /* small */ | |
| /* *line-height: 20px; */ | |
| *line-height: 18px; /* small */ | |
| color: #333333; | |
| text-align: center; | |
| text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); | |
| vertical-align: middle; | |
| cursor: pointer; | |
| background-color: #f5f5f5; | |
| *background-color: #e6e6e6; | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); | |
| background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); | |
| background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); | |
| background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); | |
| background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); | |
| background-repeat: repeat-x; | |
| border: 1px solid #bbbbbb; | |
| *border: 0; | |
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |
| border-color: #e6e6e6 #e6e6e6 #bfbfbf; | |
| border-bottom-color: #a2a2a2; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); | |
| filter: progid:dximagetransform.microsoft.gradient(enabled=false); | |
| *zoom: 1; | |
| -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| } | |
| .btn:hover, | |
| .btn:active, | |
| .btn.active, | |
| .btn.disabled, | |
| .btn[disabled] { | |
| color: #333333; | |
| background-color: #e6e6e6; | |
| *background-color: #d9d9d9; | |
| } | |
| .btn:active, | |
| .btn.active { | |
| background-color: #cccccc \9; | |
| } | |
| .btn:first-child { | |
| *margin-left: 0; | |
| } | |
| .btn:hover { | |
| color: #333333; | |
| text-decoration: none; | |
| background-color: #e6e6e6; | |
| *background-color: #d9d9d9; | |
| /* Buttons in IE7 don't get borders, so darken on hover */ | |
| background-position: 0 -15px; | |
| -webkit-transition: background-position 0.1s linear; | |
| -moz-transition: background-position 0.1s linear; | |
| -o-transition: background-position 0.1s linear; | |
| transition: background-position 0.1s linear; | |
| } | |
| .btn:focus { | |
| outline: thin dotted #333; | |
| outline: 5px auto -webkit-focus-ring-color; | |
| outline-offset: -2px; | |
| } | |
| .btn.active, | |
| .btn:active { | |
| background-color: #e6e6e6; | |
| background-color: #d9d9d9 \9; | |
| background-image: none; | |
| outline: 0; | |
| -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); | |
| } | |
| .btn.disabled, | |
| .btn[disabled] { | |
| cursor: default; | |
| background-color: #e6e6e6; | |
| background-image: none; | |
| opacity: 0.65; | |
| filter: alpha(opacity=65); | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| .btn-large { | |
| padding: 9px 14px; | |
| font-size: 16px; | |
| line-height: normal; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| .btn-small { | |
| padding: 3px 9px; | |
| font-size: 12px; | |
| line-height: 18px; | |
| } | |
| .btn-primary.active, | |
| .btn-warning.active, | |
| .btn-danger.active, | |
| .btn-success.active, | |
| .btn-info.active, | |
| .btn-inverse.active { | |
| color: rgba(255, 255, 255, 0.75); | |
| } | |
| .btn { | |
| border-color: #c5c5c5; | |
| border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); | |
| } | |
| .btn-primary { | |
| /*min-width: 80px;*/ | |
| color: #ffffff; | |
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |
| background-color: #006dcc; | |
| *background-color: #0044cc; | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); | |
| background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); | |
| background-image: -o-linear-gradient(top, #0088cc, #0044cc); | |
| background-image: linear-gradient(to bottom, #0088cc, #0044cc); | |
| background-image: -moz-linear-gradient(top, #0088cc, #0044cc); | |
| background-repeat: repeat-x; | |
| border-color: #0044cc #0044cc #002a80; | |
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |
| filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); | |
| filter: progid:dximagetransform.microsoft.gradient(enabled=false); | |
| } | |
| .btn-primary:hover, | |
| .btn-primary:active, | |
| .btn-primary.active, | |
| .btn-primary.disabled, | |
| .btn-primary[disabled] { | |
| color: #ffffff; | |
| background-color: #0044cc; | |
| *background-color: #003bb3; | |
| } | |
| .btn-inverse { | |
| color: #ffffff; | |
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |
| background-color: #363636; | |
| *background-color: #222222; | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); | |
| background-image: -webkit-linear-gradient(top, #444444, #222222); | |
| background-image: -o-linear-gradient(top, #444444, #222222); | |
| background-image: linear-gradient(to bottom, #444444, #222222); | |
| background-image: -moz-linear-gradient(top, #444444, #222222); | |
| background-repeat: repeat-x; | |
| border-color: #222222 #222222 #000000; | |
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |
| filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); | |
| filter: progid:dximagetransform.microsoft.gradient(enabled=false); | |
| } | |
| .btn-inverse:hover, | |
| .btn-inverse:active, | |
| .btn-inverse.active, | |
| .btn-inverse.disabled, | |
| .btn-inverse[disabled] { | |
| color: #ffffff; | |
| background-color: #222222; | |
| *background-color: #151515; | |
| } | |
| .btn-inverse:active, | |
| .btn-inverse.active { | |
| background-color: #080808 \9; | |
| } | |
| .btn-primary:active, | |
| .btn-primary.active { | |
| background-color: #003399 \9; | |
| } | |
| button.btn, | |
| input[type="submit"].btn { | |
| *padding-top: 3px; | |
| *padding-bottom: 3px; | |
| } | |
| button.btn::-moz-focus-inner, | |
| input[type="submit"].btn::-moz-focus-inner { | |
| padding: 0; | |
| border: 0; | |
| } | |
| button.btn.btn-large, | |
| input[type="submit"].btn.btn-large { | |
| *padding-top: 7px; | |
| *padding-bottom: 7px; | |
| } | |
| button.btn.btn-small, | |
| input[type="submit"].btn.btn-small { | |
| *padding-top: 3px; | |
| *padding-bottom: 3px; | |
| } | |
| button.btn.btn-mini, | |
| input[type="submit"].btn.btn-mini { | |
| *padding-top: 1px; | |
| *padding-bottom: 1px; | |
| } | |
| .btn-wide { | |
| min-width: 150px; | |
| } | |
| .btn-extra-wide { | |
| min-width: 200px; | |
| } | |
| .btn-square { | |
| margin-left: 0px; | |
| margin-right: 0px; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| } | |
| /*** Scrollbar ***/ | |
| ::-webkit-scrollbar{ width: 10px; height: 10px;} | |
| ::-webkit-scrollbar-track-piece{ background-color: #DBDBDB; -webkit-border-radius: 0; } | |
| ::-webkit-scrollbar-thumb:vertical{ height: 5px; background-color: #666; -webkit-border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:vertical:hover{ background-color: #999; } | |
| ::-webkit-scrollbar-thumb:horizontal{ width: 5px; background-color: #666; -webkit-border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:horizontal:hover{ background-color: #999; } | |
| </style> | |
| <!-- Load the library references for ArcGIS API for JavaScript --> | |
| <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5compact"></script> | |
| <script> | |
| define("app", ["esri/map","esri/layers/graphics", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/tasks/ProjectParameters", "http://esri.github.io/quickstart-map-js/js/utils.js", "dojo/dom", "dojo/domReady!"], | |
| function(Map, Graphics, FeatureLayer, InfoTemplate, ProjectParameters, utils, dom) { | |
| "use strict" | |
| var featureLayer, oldFeatureLayer; | |
| var geometryService; | |
| var m = { | |
| map: null, | |
| utils: utils, | |
| // Create a feature layer to get feature service | |
| addFeatureService:function() { | |
| m.removeFeatureService(); | |
| utils.setStyle("progress", "progress"); | |
| var infoTemplate = new InfoTemplate("Fields", ""); | |
| var url = "http://extgiswb01p.icrc.ext/ArcGIS/rest/services/ICRC/ICRC_POI/MapServer/0"; | |
| featureLayer = new FeatureLayer(url, { | |
| mode: FeatureLayer.MODE_ONDEMAND, | |
| outFields: ["*"], | |
| opacity: .80, | |
| infoTemplate: infoTemplate | |
| }); | |
| m.map.addLayer(featureLayer); | |
| }, | |
| // Remove existing service | |
| removeFeatureService:function() { | |
| utils.setStyle("progress", "progress hidden"); | |
| if (featureLayer) { | |
| m.map.removeLayer(featureLayer); | |
| m.map.infoWindow.hide(); | |
| } | |
| }, | |
| // Listen for enter key | |
| addService_onKeyPress:function(e) { | |
| if (e.keyCode == 13 || e.keyCode == "13") { | |
| m.addFeatureService(); | |
| } | |
| }, | |
| // Zoom to layer and update url | |
| layerAdded:function(layer, error) { | |
| if (featureLayer) { | |
| if (typeof error == 'undefined') { | |
| m.zoomToLayer(featureLayer); | |
| } else { | |
| m.utils.setStyle("progress", "progress hidden"); | |
| alert("Feature service could not be loaded. Check URL."); | |
| } | |
| dom.byId("textUrl").value = layer.url; | |
| } | |
| }, | |
| // Zoom to features regardless of the projection | |
| zoomToLayer:function(layer) { | |
| var params = new ProjectParameters(); | |
| params.geometries = [layer.fullExtent]; | |
| params.outSR = m.map.spatialReference; | |
| geometryService.project(params, function(geometries) { | |
| m.map.setExtent(geometries[0]); | |
| }); | |
| } | |
| }; | |
| return m; | |
| } | |
| ); | |
| require(["app","esri/map","esri/tasks/GeometryService", "dojo/on", "dojo/dom", "dojo/domReady!"], | |
| function(app, Map, GeometryService, on, dom) { | |
| "use strict" | |
| // Create map | |
| var map = new Map("mapDiv", { | |
| basemap: "gray", | |
| center: [-28,40], | |
| zoom: 3 | |
| }); | |
| app.map = map; | |
| // Create geometry service | |
| var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); | |
| // Wire events | |
| on(map, "layer-add-result", app.layerAdded); | |
| on(map, "update-start",function(){ | |
| app.utils.setStyle("progress", "progress"); | |
| }); | |
| on(map, "update-end",function(){ | |
| app.utils.setStyle("progress", "progress hidden"); | |
| }); | |
| // Wire UI events | |
| app.addFeatureService; | |
| on(dom.byId("btnRemoveSvc"), "click", app.removeFeatureService); | |
| on(dom.byId("textUrl"), "keypress", app.addService_onKeyPress); | |
| } | |
| ); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="panel"> | |
| <div class="titlearea"><span id="titleMessage" class="title-message">Load Feature Service</span></div> | |
| <div class="controls"> | |
| <div class="buttons"> | |
| ArcGIS REST endpoint URL: | |
| <textarea id="textUrl" rows="3" | |
| placeholder="http://extgiswb01p.icrc.ext/ArcGIS/rest/services/ICRC/ICRC_POI/MapServer/0" | |
| value="http://extgiswb01p.icrc.ext/ArcGIS/rest/services/ICRC/ICRC_POI/MapServer/0">http://extgiswb01p.icrc.ext/ArcGIS/rest/services/ICRC/ICRC_POI/MapServer/0 | |
| </textarea> | |
| <button id="btnAddSvc" class="btn btn-primary">Add</button> | |
| <button id="btnRemoveSvc" class="btn" >Remove</button> | |
| </div> | |
| </div> | |
| <div class="message"><span id="userMessage" class="user-message"></span></div> | |
| </div> | |
| <div id="mapDiv"></div> | |
| <div id="progress" class="progress hidden"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment