Basic World Map Display
This is a explanatory guide for the ‘Basic Web Map’ web map. This map was built using the ArcGIS API 4.0.
The map can be viewed here, feel free to view and check out the source using dev tools.
Below you will find some explanation of some of the elements demonstrated in the map.
The basic HTML document is the first file to be created.
This references a few important items:
<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.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
<link rel="stylesheet" href="style/mapView.css">
<title>Basic World Map</title>
</head>
This is referencing:
This part references the map script and provides a div element where the map will live.
<body>
<script src="scripts/map.js"></script>
<div id="mapView"></div>
</body>
The script does all of the work to make and display the map.
The first step is to load the necessary modules from the ArcGIS API.
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MarView){});
Next you need to create a map object.
var map = new Map({
basemap: "streets"
});
Next make a 2d view that references a node in the html document and the map object.
var view = new MarView({
container: "mapView",
map: map
Next lets create a custom style for the webmap.
The following makes the map fill the viewable space.
html,
body,
#mapView {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
That’s it! This is the most basic web map.
Go to my page to check out more of my work.