Accepted Solutions
Thank you for the link Dan. I am trying to comprehend it 
I have made a small sample which shows me the current coords in WGS84 format (lon/lat). I want them to show me the Lambert_72 coords but I get it to work.
On every move of the mouse I do this
var outSpatialReference = new SpatialReference({
wkid: 31370 //lambert
});
var wgsPoints = new Point({
longitude: pt.latitude.toFixed(5),
latitude: pt.longitude.toFixed(5)
})
var projectedPoints = projection.project(wgsPoints, outSpatialReference);
I create an outSpatialReference where I use the wkid for lambert. Then I get the point where the mousecursor is and put it in the projection with the function .project() --> Projects a geometry or an array of geometries to the specified output spatial reference.
However I am not really sure about the result being correct since I get coords that don't seem te be correct.
Could anyone see if the code is correct or if I am missing something?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Select a basemap</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/request",
"esri/views/MapView",
"esri/layers/WMSLayer",
"esri/Graphic",
"esri/geometry/Polygon",
"esri/symbols/SimpleFillSymbol",
"esri/WebMap",
"esri/geometry/projection",
"esri/geometry/SpatialReference",
"esri/geometry/Extent",
"esri/geometry/Point"
], function (Map, esriRequest, MapView, WMSLayer, Graphic, Polygon, SimpleFillSymbol, WebMap, projection, SpatialReference, Extent, Point) {
layer = new WMSLayer({
url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms?'
});
var url = "http://loc.geopunt.be/v2/location?"
var map = new Map({
basemap: "topo-vector" //Dit is je basismap om in te lezen,
});
map.add(layer); //Hier is de WMS layer die je erop "plakt"
var view = new MapView({
container: "viewDiv",
map: map,
center: [4.474, 51.023], //lon, lat
zoom: 20,
});
const cs1 = new SpatialReference({
wkid: 4272 //PE_GCS_ED_1950
});
const cs2 = new SpatialReference({
wkid: 4167
});
const extent = new Extent({
xmin: -186.0,
ymin: -42.0,
xmax: -179.0,
ymax: -38.0
});
projection.load().then(function (evt) {
//const geogtrans = projection.getTransformations(cs1, cs2, extent);
//geogtrans.forEach(function (geogtran, index) {
// geogtran.steps.forEach(function (step, index) {
// console.log("step wkid: ", step.wkid);
// });
//});
});
var coordsWidget = document.createElement("div");
coordsWidget.id = "coordsWidget";
coordsWidget.className = "esri-widget esri-component";
coordsWidget.style.padding = "7px 15px 5px";
coordsWidget.style.width = "500px";
view.ui.add(coordsWidget, "bottom-right");
//*** Update lat, lon, zoom and scale ***//
function showCoordinates(pt) {
var outSpatialReferenceWebMercator = new SpatialReference({ "wkid": 3857});
var outSpatialReferenceLambert = new SpatialReference({ "wkid": 31370 });
var wgsPoints = new Point({
longitude: pt.latitude.toFixed(5),
latitude: pt.longitude.toFixed(5)
})
var projected3857 = [];
var projected31370 = [];
projected3857 = projection.project(wgsPoints, outSpatialReferenceWebMercator);
projected31370 = projection.project(wgsPoints, outSpatialReferenceLambert);
var coords = "Lat/Lon: " + pt.latitude.toFixed(5) + " " + pt.longitude.toFixed(5) +
"</br> WebMercator: " + projected3857.x + " " + projected3857.y +
"</br> Lambert: " + projected31370.x + " " + projected31370.y +
"</br> Scale 1:" + Math.round(view.scale * 1) / 1 +
" | Zoom " + view.zoom;
coordsWidget.innerHTML = coords;
}
view.watch("stationary", function (isStationary) {
showCoordinates(view.center);
});
view.on("pointer-move", function (evt) {
showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Kind regards
sigh...Correct. Thanks Undral..now it works like a charm..
I used the .toFixed with a copy/paste of the sample code but read over it.
