https://community.esri.com/people/EPolle_TensingInternational/blog/2020/03/24/arcgis-javascript-with-uk-data-table-of-content
Instellen van x, y en zoomniveau in url om kaartweergave te behouden
Wanneer je inzoomt op een bepaalde locatie op een kaart, wil je soms die kaartweergave behouden, bijvoorbeeld om deze met iemand anders te delen. Daarom zochten we een manier om de x, y en het zoomniveau uit de zoekparameters in onze url te halen. Maar we willen niet alleen de waarden uit de querystring kunnen lezen (dat is alles achter het vraagteken), we willen ze ook kunnen instellen en aanpassen telkens wanneer de kaartweergave verandert, dat wil zeggen wanneer de gebruiker pannen en zoomen op de kaart uitvoert.
Hieronder staat een beschrijving van de functionaliteit die we gebruiken om de x en y coördinaten (in British National Grid, afgerond op hele meters) te pakken en om de url aan te passen.<\/SPAN>
URLSearchParams en History.replaceState()
De URLSearchParams interface definieert hulpfuncties om met de querystring van een URL te werken. In het onderstaande voorbeeld gebruiken we de volgende methoden van deze interface:
- De has() methode geeft aan of een parameter met de opgegeven naam bestaat
- De get() methode retourneert de (eerste) waarde die gekoppeld is aan de gegeven zoekparameter
- De set() methode stelt de waarde in die gekoppeld is aan een gegeven zoekparameter. En heel belangrijk: als de zoekparameter nog niet bestaat (wat aanvankelijk het geval kan zijn), zal deze methode de zoekparameter aanmaken.
De History.replaceState() methode wijzigt het huidige geschiedenisitem. Deze methode is bijzonder nuttig wanneer je de URL van het huidige geschiedenisitem wilt bijwerken als reactie op een gebruikersactie, bijvoorbeeld het eerder genoemde pannen en zoomen.
En zo werkt het:
Als je de url zonder parameters opgeeft, begin je bij de standaard kaartweergave. Maar zoals je zult zien, worden de standaardparameters direct toegevoegd aan de adresbalk:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm
En zodra je begint met zoomen en pannen, worden deze parameters elke keer aangepast wanneer de weergave "stationair" wordt (we gebruiken reactiveUtils om de status van de view te controleren, stationair of niet),
Op deze manier kun je inzoomen op een specifieke plek en de url kopiëren om precies die kaartweergave te delen.
Als je op onderstaande link klikt, kom je direct uit in Steòrnabhagh (of Stornoway in het Engels, we gebruiken hier de Web Map GB Cartographic Local Names), op het eiland Lewis and Harris in de Outer Hebrides:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm?x=143956&y=932940&l=12
Veel programmeerplezier!
De code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript met UK data - URL Parameters: x, y en zoomniveau</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/css/main.css">
<script src="https://js.arcgis.com/4.29/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/widgets/Home",
"esri/Viewpoint",
"esri/core/reactiveUtils"
], function(Map, Point, MapView, Home, Viewpoint, reactiveUtils) {
var sr = 27700;
var xCoordHome = 500000;
var yCoordHome = 500000;
var zoomLevelHome = 5;
var scaleHome = 4612360;
var xCoord = xCoordHome;
var yCoord = yCoordHome;
var zoomLevel = zoomLevelHome;
if ('URLSearchParams' in window) { // Feature detectie (URLSearchParams wordt niet ondersteund door Internet Explorer)
var url = new URL(document.URL);
var search_params = url.searchParams;
// haal searchparams op als x, y en l zijn opgegeven in url
if(search_params.has('x') && search_params.has('y') && search_params.has('l')) {
var xCoord = parseInt(search_params.get('x'));
var yCoord = parseInt(search_params.get('y'));
var zoomLevel = parseInt(search_params.get('l'));
}
};
var map = new Map({
basemap: {
portalItem: {
id: "5b9d5ac7e17f402a9111f1ca2c22bf56"
// GB Cartographic Local Names, gehost door EsriUKContent, zie: https://www.arcgis.com/home/item.html?id=5b9d5ac7e17f402a9111f1ca2c22bf56
}
}
});
var view = new MapView({
spatialReference: sr,
container: "viewDiv",
map: map,
center: new Point({x: xCoord, y: yCoord, spatialReference: sr}),
zoom: zoomLevel
});
var home = new Home({
view: view,
// viewpoint van home moet gedefinieerd zijn (hardcoded) omdat anders deze home afhankelijk is van de x, y en l waarden in de searchparams
viewpoint: new Viewpoint({targetGeometry: new Point({x: xCoordHome, y: yCoordHome, spatialReference: sr}), scale: scaleHome})
});
view.ui.add(home, "top-left")
reactiveUtils.when(
() => view?.stationary === true,
() => {
modifySearchParams();
});
// pas url aan met nieuwe coördinaten en zoomniveau als searchparams
function modifySearchParams() {
if ('URLSearchParams' in window) { // Feature detectie (URLSearchParams wordt niet ondersteund door Internet Explorer)
xCoordNew = parseInt(view.center.x);
yCoordNew = parseInt(view.center.y);
zoomLevelNew = view.zoom;
search_params.set('x', xCoordNew);
search_params.set('y', yCoordNew);
search_params.set('l', zoomLevelNew);
url.search = search_params.toString(); // wijzig de zoek-eigenschap van de hoofd-url
new_url = url.toString(); // de nieuwe url string
history.replaceState(null, '', new_url);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
