Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Add a world street map
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to add a world street map basemap layer to your application. The sample uses a cached map service from ArcGIS Online. You can browse the ArcGIS.com site for additional online basemap and reference map services or publish your own geographic data as a service using ArcGIS Server.
This sample sets the initial extent of the map to an area London using following code:
var initExtent = new esri.geometry.Extent({"xmin":-17731.00190514121,"ymin":6710077.07846947,"xmax":-12495.065467468508,"ymax":6712279.420346995,"spatialReference":{"wkid":102100}});map = new esri.Map("map",{extent:initExtent});
If you want the map to start with a different initial extent you can easily determine the extent values using your browser's debugging tools. Below are the steps for calculating a new extent using Firefox with Firebug installed.
- Run the application.
- Zoom to the new extent.
- Enable Firebug and click the Console tab
- Enter the following:dojo.toJson(map.extent.toJson());
- Copy the results and paste them into the JavaScript code replacing the existing initExtent.
Note: You can perform the same steps using Developer Tools in Internet Explorer or Chrome.
Code
<!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> World Street Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
</style>
<script>var dojoConfig = {parseOnLoad: true};</script>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
var map;
dojo.ready(function() {
map = new esri.Map("map", {
basemap: "streets-vector",
center: [-0.136, 51.510],
zoom: 15
});
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>