Skip to content

Instantly share code, notes, and snippets.

@asizer

asizer/index.html

Last active July 18, 2016 22:30
Show Gist options
  • Save asizer/266add31cb8dc03c811b99b90adbfe64 to your computer and use it in GitHub Desktop.
Save asizer/266add31cb8dc03c811b99b90adbfe64 to your computer and use it in GitHub Desktop.
Download ZIP
centerAt point discrepancy
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>centerAt discrepancy</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;
}
#header {
background-color: gray;
color: #eee;
left: 0;
right: 0;
height: 80px;
font-size: 30px;
text-align: center;
line-height: 1.2em;
}
#map {
position: absolute;
top: 80px;
bottom: 0;
right: 0;
left: 0;
}
#map_zoom_slider {
top: 10px;
left: 10px;
}
#comparison-table {
position: absolute;
right: 10px;
top: 10px;
z-index: 50;
}
#redlands td:first-child {
color: fuchsia;
}
#center td:first-child {
color: dodgerblue;
}
.discrepancy {
color: red;
}
table {
font-family: Consolas, Courier, monospace;
border-collapse: collapse;
font-size: 12px;
background: rgba(255, 255, 255, 0.7);
}
th, td {
border: 1px solid gray;
padding: 2px 5px;
}
/* map buttons */
#centerAtRedlands, #zoomToRedlands {
position: absolute;
z-index: 50;
left: 50px;
background: white;
padding: 5px 10px;
border-color: dodgerblue;
cursor: pointer;
}
#centerAtRedlands {
top: 10px;
}
#zoomToRedlands {
top: 60px;
}
.hide {
display: none !important;
}
</style>
<script src="//js.arcgis.com/3.17/"></script>
<script>
var redlandsPt, map, centerGr, redlandsGr;
require([
'esri/map',
'esri/graphic',
'esri/graphicsUtils',
'esri/geometry/Point',
'esri/geometry/Polyline',
'esri/geometry/geometryEngine',
'esri/geometry/webMercatorUtils',
'dojo/dom',
'dojo/query',
'dojo/dom-attr',
'dojo/dom-class',
'dojo/on'
], function(Map, Graphic, graphicsUtils, Point, Polyline, geoEngine, webMercatorUtils, dom, dojoQuery, domAttr, domClass, dojoOn) {
redlandsPt = new Point({
x: -13046332.62639722,
y: 4036417.9941648776,
spatialReference: {
wkid: 102100
}
});
redlandsGr = new Graphic({
geometry: redlandsPt.toJson(),
symbol: {
type: 'esriSMS',
style: 'esriSMSCircle',
color: [255, 0, 255],
size: 6
}
});
centerGr = new Graphic({
symbol: {
type: 'esriSMS',
style: 'esriSMSCircle',
color: [30, 144, 255],
size: 6
}
});
var differenceLine = new Graphic({
symbol: {
color: [255, 255, 0],
width: 2,
type: 'esriSLS',
style: 'esriSLSSolid'
}
});
map = new Map('map', {
basemap: 'topo',
center: [-98.58, 38.83],
zoom: 4
});
dojoOn(map, 'load', function() {
map.graphics.add(differenceLine);
map.graphics.add(redlandsGr);
centerGr.setGeometry(map.extent.getCenter());
map.graphics.add(centerGr);
writeRedlandsToTable();
});
dojoOn(dom.byId('centerAtRedlands'), 'click', function() {
map.centerAt(redlandsPt).then(function() {
var mapCenter = map.extent.getCenter();
centerGr.setGeometry(mapCenter);
updateTable(mapCenter);
updateLine(mapCenter);
domClass.remove(dom.byId('zoomToRedlands'), 'hide');
});
});
dojoOn(dom.byId('zoomToRedlands'), 'click', function() {
var extent = graphicsUtils.graphicsExtent([redlandsGr, centerGr]);
map.setExtent(extent, true);
});
function writeRedlandsToTable() {
var redlandsRow = dojoQuery('#redlands td');
var screenRedlands = map.toScreen(redlandsPt);
redlandsRow[1].innerHTML = screenRedlands.x;
redlandsRow[2].innerHTML = screenRedlands.y;
redlandsRow[3].innerHTML = redlandsPt.getLongitude();
redlandsRow[4].innerHTML = redlandsPt.getLatitude();
redlandsRow[5].innerHTML = redlandsPt.x;
redlandsRow[6].innerHTML = redlandsPt.y;
}
function updateTable(mapCenter) {
var redlandsRow = dojoQuery('#redlands td');
var screenRedlands = map.toScreen(redlandsPt);
redlandsRow[1].innerHTML = screenRedlands.x;
redlandsRow[2].innerHTML = screenRedlands.y;
var centerRow = dojoQuery('#center td');
var screenCenter = map.toScreen(mapCenter);
centerRow[1].innerHTML = getDifferenceHtml(screenRedlands.x, screenCenter.x);
centerRow[2].innerHTML = getDifferenceHtml(screenRedlands.y, screenCenter.y);
centerRow[3].innerHTML = getDifferenceHtml(redlandsPt.getLongitude(), mapCenter.getLongitude());
centerRow[4].innerHTML = getDifferenceHtml(redlandsPt.getLatitude(), mapCenter.getLatitude());
centerRow[5].innerHTML = getDifferenceHtml(redlandsPt.x, mapCenter.x);
centerRow[6].innerHTML = getDifferenceHtml(redlandsPt.y, mapCenter.y);
var distance = geoEngine.distance(redlandsPt, mapCenter, 'miles');
var distanceRow = dojoQuery('#distance td');
if (distance >= 0.5) {
distanceRow[1].innerHTML = '<span class="discrepancy">' + distance + ' miles</span>';
return;
}
distance = geoEngine.distance(redlandsPt, mapCenter, 'yards');
if (distance >= 100) {
distanceRow[1].innerHTML = '<span class="discrepancy">' + distance + ' yards</span>';
return;
}
distance = distance * 3;
distanceRow[1].innerHTML = distance + ' feet';
}
function updateLine(mapCenter) {
differenceLine.setGeometry(new Polyline({
paths: [[[mapCenter.x, mapCenter.y], [redlandsPt.x, redlandsPt.y]]],
spatialReference: {wkid: map.spatialReference.wkid}
}));
}
function getDifferenceHtml(comparison, toReturn) {
toReturn = toReturn + '';
comparison = comparison + '';
var matching = true, i = 0;
while (matching && i < toReturn.length) {
if (toReturn[i] === comparison[i]) {
i++;
} else {
matching = false;
}
}
if (matching >= toReturn.length) {
return toReturn;
}
return toReturn.substr(0, i) + '<span class="discrepancy">' + toReturn.substr(i);
}
});
</script>
</head>
<body>
<div id="header" class="head-foot">
Demonstrating the discrepancy between<br>
centerAt pt and resulting map center.
</div>
<div id="map">
<div id="comparison-table">
<table>
<thead>
<tr>
<th></th>
<th>ScreenX</th>
<th>ScreenY</th>
<th>Longitude</th>
<th>Latitude</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr id="redlands">
<td>Esri Redlands</td>
<td class="screenX"></td>
<td class="screenY"></td>
<td class="lng"></td>
<td class="lat"></td>
<td class="x"></td>
<td class="y"></td>
</tr>
<tr id="center">
<td>Centered pt</td>
<td class="screenX"></td>
<td class="screenY"></td>
<td class="lng"></td>
<td class="lat"></td>
<td class="x"></td>
<td class="y"></td>
</tr>
<tr id="distance">
<td>Difference</td>
<td colspan="6"></td>
</tr>
</tbody>
</table>
</div>
<button id="centerAtRedlands">
Center at<br>
Esri Redlands
</button>
<button id="zoomToRedlands" class="hide">
Zoom to<br>
both points
</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment