Hi,
Currently I am preparing myself for the new Technical Certification ArcGIS API for JavaScript 19-001, working my way through the documentation: ArcGIS API for JavaScript | ArcGIS for Developers (Latest) (in this case: 4.11).
And I am sharing my first result here. Maybe no rocket science, but at least a working web map. You can see it in action here: ArcGIS API for JavaScript 4.11 Tutorial - Welcome to the Netherlands (source code shared below - all html, css and javascript in one file)
I am not too unhappy with this first map. What do you think? Improvement suggestions are always welcome.
Egge-Jan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<title>ArcGIS API for JavaScript 4.11 Tutorial - Welcome to the Netherlands</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#titleDiv {
font-weight: 400;
font-style: normal;
font-size: 2.4rem;
padding: 10px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Point",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/tasks/Locator",
"esri/widgets/BasemapGallery",
"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
"esri/widgets/Expand",
"esri/widgets/Zoom",
"esri/Basemap"
], function(Map, MapView, Point, Home, Search, Locator, BasemapGallery, LocalBasemapsSource, Expand, Zoom, Basemap) {
var titleDiv = document.getElementById("titleDiv");
var lightGrayCanvas_RD_EsriNL = new Basemap({
portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"} //Lichtgrijze Canvas RD hosted by Esri Nederland
});
var darkGrayCanvas_RD_EsriNL = new Basemap({
portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"} //Donkergrijze Canvas RD hosted by Esri Nederland
});
var topo_RD_EsriNL = new Basemap({
portalItem: {id: "7aea6fa913a94176a1074edb40690318"} //Topo RD hosted by Esri Nederland
});
var open_Topo_RD_EsriNL = new Basemap({
portalItem: {id: "0698b71eb7cf47898086d072e574ac32"} //Open Topo RD hosted by Esri Nederland
});
var luchtfoto_RD_EsriNL = new Basemap({
portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"} //Luchtfoto RD hosted by Esri Nederland
});
var localBasemaps = new LocalBasemapsSource({
basemaps : [lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL, topo_RD_EsriNL, open_Topo_RD_EsriNL, luchtfoto_RD_EsriNL]
});
var map = new Map({
basemap: topo_RD_EsriNL
});
var rdOrigin = new Point({
x: 155000,
y: 463000,
spatialReference: 28992
});
var view = new MapView({
spatialReference: 28992,
map: map,
container: "viewDiv",
center: rdOrigin,
zoom: 3
});
view.ui.empty("top-left"); //remove default Zoom Buttons to be able to add map title first
view.ui.add(titleDiv, "top-left");
var zoomBtns = new Zoom({
view: view
});
view.ui.add(zoomBtns, "top-left"); //add Zoom Buttons again underneath the map title
var homeBtn = new Home({
view: view
});
// Add the home button to the top left corner of the view
view.ui.add(homeBtn, "top-left");
var searchWidget = new Search({
container: document.createElement("div"),
sources: [{
locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
singleLineFieldName: "SingleLine", // This allows to search on the combination of Postal Code and House number, e.g. 4181 AE 38
countryCode:"NL", //use the default GeocodeServer, but limit the results to the Netherlands only
placeholder: "Adres of plaats zoeken"
}],
view: view,
includeDefaultSources: false
});
searchWidgetExpand = new Expand({
expandIconClass: "esri-icon-search", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: "Search", // optional, defaults to "Expand" for English locale
view: view,
content: searchWidget.domNode,
group: "top-right"
});
var basemapGallery = new BasemapGallery({
container: document.createElement("div"),
view: view,
source: localBasemaps
});
basemapGalleryExpand = new Expand({
expandIconClass: "esri-icon-basemap",
expandTooltip: "Basemaps",
view: view,
content: basemapGallery.domNode,
group: "top-right"
});
// Add widgets to the top-right corner of the view
view.ui.add([searchWidgetExpand, basemapGalleryExpand], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="titleDiv" class="esri-widget">
Welkom in Nederland
</div>
</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.