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 imagery map
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to add world imagery to your application. The sample uses a cached map service from ArcGIS Online. You can browse the ArcGIS Online site for additional online basemap and reference map services or publish your own geographic data as a service using ArcGIS Server.
You can add administrative boundaries and place names on top of the basemap layer by adding the ArcGIS Online World Boundaries and Places service on top of the basemap. This service was designed for display on top of maps with darker backgrounds, like the world imagery service. If you are working with a lighter basemap use the World Boundaries and Places Alternate.
The snippet below shows how to add the place names reference layer to the map:
var layerURL = "http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer";var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer(layerURL);
map.addLayer(referenceLayer);
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>Imagery</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 { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{padding:0;}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
function init() {
map = new esri.Map("map", {
basemap: "hybrid",
center: [-121.581, 46.909],
zoom: 10
});
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
</div>
</div>
</body>
</html>