Created
June 20, 2016 18:48
-
-
Save asizer/e0a6d6d3487aede1d78b7a6b5bb4fe87 to your computer and use it in GitHub Desktop.
Actual Locate Button breaking
This file contains 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> | |
<title>Actual Locator Button</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no,width=device-width" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
<link rel="stylesheet" href="//js.arcgis.com/3.17/esri/css/esri.css"> | |
<style> | |
html, body { | |
font-family: "Open Sans", sans-serif; | |
height: 100%; | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
.head-foot { | |
background-color: gray; | |
color: #eee; | |
left: 0; | |
right: 0; | |
height: 60px; | |
font-size: 30px; | |
text-align: center; | |
line-height: 1.2em; | |
} | |
#header { | |
height: 110px; | |
} | |
#map { | |
position: absolute; | |
top: 110px; | |
right: 0; | |
left: 0; | |
bottom: 60px; | |
} | |
/* map buttons */ | |
#setZoom, #locator, #zoom { | |
position: absolute; | |
z-index: 50; | |
left: 20px; | |
} | |
#zoom { | |
top: 40px; | |
left: 60px; | |
color: white; | |
background: gray; | |
padding: 5px 10px; | |
font-size: 11px; | |
} | |
#setZoom { | |
top: 95px; | |
} | |
#locator { | |
top: 135px; | |
} | |
#footer { | |
position: absolute; | |
bottom: 0; | |
line-height: 50px; | |
} | |
button { | |
background: white; | |
padding: 5px 10px; | |
border-color: dodgerblue; | |
cursor: pointer; | |
} | |
button[disabled] { | |
cursor: not-allowed; | |
border-color: gray; | |
} | |
.hide { | |
visibility: hidden; | |
} | |
.webmap-change-wrapper { | |
font-size: 12px; | |
} | |
.webmap-change { | |
border: 1px solid dodgerblue; | |
padding: 3px 6px; | |
background: white; | |
color: dodgerblue; | |
cursor: pointer; | |
} | |
</style> | |
<script src="//js.arcgis.com/3.17/"></script> | |
<script> | |
var map, locator, home, setZoomBtn, minStartingZoom; | |
require([ | |
'esri/arcgis/utils', | |
'esri/urlUtils', | |
'esri/geometry/Point', | |
'esri/dijit/LocateButton', | |
'dojo/dom', | |
'dojo/query', | |
'dojo/dom-attr', | |
'dojo/dom-class', | |
'dojo/on' | |
], function(arcgisUtils, urlUtils, Point, Locator, dom, dojoQuery, domAttr, domClass, dojoOn) { | |
var webmaps = { | |
gray: '8b3d38c0819547faa83f7b7aca80bd76', | |
'dark-gray': '1970c1995b8f44749f4b9b6e81b5ba45', | |
oceans: '5ae9e138a17842688b0b79283a4353f6', | |
hybrid: '86265e5a4bbb4187a59719cf134e0018', | |
'national-geographic': 'd94dcdbe78e141c2b2d3a91d5ca8b9c9', | |
topo: 'd5e02a0c1f2b4ec399823fdd3c2fdebd', | |
streets: '8bf7167d20924cbf8e25e7b11c7c502c', | |
terrain: 'fe44cf9a739848939988addfeba473e4', | |
osm: 'b834a68d7a484c5fb473d4ba90d35e71' | |
}; | |
function reloadPage(evt) { | |
console.debug('reloadPage', evt); | |
if (evt && evt.target) { | |
var val = domAttr.get(evt.target, 'value'); | |
window.location.search = 'basemap=' + val; | |
} | |
} | |
function onZoomEnd() { | |
var zoomedOutFarEnough = map.getZoom() <= minStartingZoom; | |
domAttr.set(setZoomBtn, {disabled: zoomedOutFarEnough}); | |
dom.byId('currentZoom').innerHTML = map.getZoom(); | |
} | |
function getUrlParams() { | |
var urlParams = urlUtils.urlToObject(document.location.search).query; | |
if (urlParams) { | |
return urlParams; | |
} | |
return urlUtils.urlToObject(document.location.hash).query || {}; | |
} | |
console.debug('almost there...'); | |
var webmapId = webmaps[getUrlParams().basemap] || webmaps.gray; | |
console.debug('webmapId', webmapId); | |
arcgisUtils.createMap(webmapId, 'map').then(function(response) { | |
console.debug('map created'); | |
map = response.map; | |
minStartingZoom = map.getMaxZoom() - 11; | |
setZoomBtn = dom.byId('setZoom'); | |
dom.byId('minStartingZoom').innerHTML = minStartingZoom; | |
onZoomEnd(); | |
locator = new Locator({map: map}, 'locator'); | |
locator.startup(); | |
map.on('zoom-end', onZoomEnd); | |
dojoQuery('.webmap-change').on('click', reloadPage); | |
dojoOn(setZoomBtn, 'click', function() { | |
map.setZoom(minStartingZoom); | |
}); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="header" class="head-foot"> | |
Demonstrating the breaking of a webmap from a zoomed out state<br> | |
with the Locate Button. | |
<div class="webmap-change-wrapper"> | |
<span class="instructions">Change basemap and reload: </span> | |
<span class="webmap-change" value="gray">gray</span> | |
<span class="webmap-change" value="dark-gray">dark-gray</span> | |
<span class="webmap-change" value="oceans">oceans</span> | |
<span class="webmap-change" value="hybrid">hybrid</span> | |
<span class="webmap-change" value="national-geographic">national-geographic</span> | |
<span class="webmap-change" value="topo">topo</span> | |
<span class="webmap-change" value="streets">Streets</span> | |
<span class="webmap-change" value="terrain">terrain</span> | |
<span class="webmap-change" value="osm">osm</span> | |
</div> | |
</div> | |
<div id="map"> | |
<div id="zoom">Current zoom: <span id="currentZoom"></span></div> | |
<button id="setZoom">Zoom out to level <span id="minStartingZoom">5</span></button> | |
<div id="locator"></div> | |
</div> | |
<div id="footer" class="head-foot">breaks on <code>setScale()</code> and <code>centerAt()</code></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment