Aan de slag met ArcGIS JavaScript - Ga naar XY

172
0
07-21-2019 08:12 AM
Egge-Jan_Pollé
MVP Regular Contributor
0 0 172

https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis... 

Ga naar XY met RD-coördinaten

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.

LocatieXY
Vrijthof, Maastricht176220317750
Strandpaviljoen de Piraat, Cadzand15940378700
Rode Vuurtoren, Schiermonnikoog205405611450

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
About the Author
GIS Consultant at Avineon-Tensing