https://community.esri.com/people/EPolle_TensingInternational/blog/2020/03/24/arcgis-javascript-with...
ArcGIS API for JavaScript
In this tutorial - the first of a series - we are going to play around with ArcGIS API for JavaScript using only UK data.
We start with a fairly simple starter app - just a basemap allowing you to zoom in and zoom out. Nothing really special, except for the fact that we are not using one of the default Esri basemaps in web mercator.
Instead we are using OS Open Carto, a UK (or even GB) only basemap, based on Ordnance Survey (OS) data, hosted in ArcGIS Online (Living Atlas).
The projection of this map is British National Grid (EPSG:27700).
In the code below you can see that we reference the web map by its id: 0bd3a4a6fd674a90a7d0a9e5f36fb59b
To be able to add this map to the view, we do set the spatialReference of the view to 27700. And to center the view we create a new point in this very same projection:
center: new Point({x: 500000, y: 500000, spatialReference: 27700})
Follow this link to see the end result of this exercise:
ArcGIS JavaScript with UK data - OS Basemap
And please note: we have only just begun! More functionality will be added in later exercises.
To be continued.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript with UK data - OS Basemap</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView"
], function(Map, Point, MapView) {
let map = new Map({
basemap: {
portalItem: {
id: "0bd3a4a6fd674a90a7d0a9e5f36fb59b"
}
}
});
let view = new MapView({
spatialReference: 27700,
container: "viewDiv",
map: map,
center: new Point({x: 500000, y: 500000, spatialReference: 27700}),
zoom: 7
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
