Creating HTML code for the page
In the previous chapter, you learned the basic concepts of HTML, CSS, and JavaScript. Now you're going to start putting those skills to work. First, you need to create a simple HTML document which will ultimately serve as the container for your map. Since we're using the ArcGIS API for JavaScript Sandbox this step has already been done for you. However, I do want you to spend some time examining the code so that you have a good grasp of the concepts. In the following left pane of the Sandbox the code you see highlighted references the basic HTML code for the web page.
There's obviously some other HTML and JavaScript code in there as well, but the following code forms the basic components of the web page. This includes several basic tags including <html>, <head>, <title>, <body> and a few others:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<!-- The following references the stylesheet for the ArcGIS API for JavaScript UI components -->
<link rel="stylesheet" >
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The following references the ArcGIS API for JavaScript -->
<script src="https://js.arcgis.com/3.21/"></script>
<!-- The following script tag contains your custom application code -->
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>