https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis...
In de oefening van vandaag bouwen we een dialoogvenster (een <form>) waarin gebruikers een X- en een Y-coördinaat op kunnen geven om op basis hiervan op een locatie in te zoomen.
De functie die hiervoor geschreven is (goToRDXY - zie de code hieronder) vangt de invoer van de gebruiker af. Als de invoer correct is, dan wordt een puntobject aangemaakt. Dit puntobject wordt op de kaart geplaatst, en er wordt naartoe gezoomd. Hieronder staan de coördinaten van enkele willekeurige locaties, om de applicatie mee te testen.
Locatie | X | Y |
Vrijthof, Maastricht | 176220 | 317750 |
Strandpaviljoen de Piraat, Cadzand | 15940 | 378700 |
Rode Vuurtoren, Schiermonnikoog | 205405 | 611450 |
En weet je wat zo leuk is? Het formulier werkt de hele foutafhandeling af.
De RD-coördinaten moeten immers binnen bepaalde waarden liggen (zie hiervoor de afbeelding in https://community.esri.com/people/EPolle_TensingInternational/blog/2019/05/11/aan-de-slag-met-arcgis... ).
Maar als de gebruiker nog niet de juiste waarden heeft ingevuld, dan doet de knop Ga naar locatie het nog niet. De foutafhandeling verschilt per browser, maar pas als er twee vinkjes staan, kan de gebruiker doorgaan
Bovenaan in de code is wat aanvullende CSS toegevoegd om de look-and-feel van het dialoogvenster en het formulier te beïnvloeden.
Klik hier om het resultaat te zien:
Aan de slag met ArcGIS JavaScript - Ga naar XY (RD-coördinaten)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Aan de slag met ArcGIS JavaScript - Ga naar XY (RD-coördinaten)</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
.dialogDiv {
background-color: white;
}
.dialogHeader {
color: white;
font-weight: bolder;
width: auto;
background-color: #3c84a7;
padding: 5px;
}
.coordinatesDiv {
background-color: white;
padding: 10px;
}
fieldset {
border: 1px solid grey;
margin: 10px;
}
legend {
padding: 1em 0.5em;
font-size:90%;
}
input:invalid+span:after {
content: '✖';
padding-left: 5px;
}
input:valid+span:after {
content: '✓';
padding-left: 5px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/Graphic"
], function(Map, Point, MapView, Graphic) {
var map = new Map({
basemap: {
portalItem: {
id: "7aea6fa913a94176a1074edb40690318" // Topo RD
}
}
});
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
zoom: 3
});
view.ui.add("rdCoordinatesDiv", "bottom-left");
var simpleMarkerSymbol = {
type: "simple-marker",
style: "triangle",
angle: 180,
size: 16,
yoffset: 8, // De onderste punt van de driehoek wijst naar de locatie met de opgegeven coördinaten
color: [255, 0, 0],
outline: {
color: [255, 255, 255],
width: 2
}
};
// Maak een Graphic aan zonder geometrie - deze wordt later toegevoegd
var xyMarkerOnTheMap = new Graphic({
symbol: simpleMarkerSymbol
});
// Voeg de 'onzichtbare' Graphic toe aan de view
view.graphics.add(xyMarkerOnTheMap);
// Event Listener
document.getElementById("rdCoordinatesForm").addEventListener("submit", goToRDXY);
// Functie
function goToRDXY (event) {
event.preventDefault() // De preventDefault() method wordt hier gebruikt om te voorkomen dat het formulier gesubmit wordt. Input wordt lokaal - in deze functie - verwerkt.
xyMarkerOnTheMap.geometry = null;
let rdX = document.getElementById("rdXCoordinate").value;
let rdY = document.getElementById("rdYCoordinate").value;
let target = new Point({x: parseFloat(rdX), y: parseFloat(rdY), spatialReference: 28992});
xyMarkerOnTheMap.geometry = target;
console.log(target);
view.goTo({target: target, zoom: 13});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="dialogDiv" id="rdCoordinatesDiv">
<div class="dialogHeader">
Ga naar XY
</div>
<form id="rdCoordinatesForm">
<fieldset>
<legend>RD-coördinaten (EPSG: 28992)</legend>
<div class="coordinatesDiv">
<label for="rdXCoordinate">X-coördinaat:</label>
<input id="rdXCoordinate" type="number" name="rdXCoordinate" step="0.001" min="10000" max="290000" required>
<span class="validity"></span>
</div>
<div class="coordinatesDiv">
<label for="rdYCoordinate">Y-coördinaat:</label>
<input id="rdYCoordinate" type="number" name="rdYCoordinate" step="0.001" min="300000" max="620000" required>
<span class="validity"></span>
</div>
</fieldset>
<div class="coordinatesDiv">
<input type="submit" value="Ga naar locatie">
</div>
</form>
</div>
</body>
</html>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.