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
Map with GPX
Explore in the sandbox
View live sample
Description
This sample application displays a web map generated using the ArcGIS.com map viewer. The web map's author used the tools in the map viewer to select a basemap, add the gpx file, define an initial extent and configure the popup for the river trail locations.
You can add data from csv or gpx files to an ArcGIS.com web map then display that web map in an application built with the ArcGIS API for JavaScript. View the ArcGIS.com help for more details.
The ArcGIS API for JavaScript has two utility methods that allow you to consume the web maps from a JavaScript application: esri.arcgis.utils.createMap. In this snippet, the utility methods are used to create a map using the unique id for the web map.
var mapDeferred = esri.arcgis.utils.createMap(itemInfo, "map", {mapOptions: {
slider: true,
nav:false
}
});
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>Map with gpx data</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">
<link rel="stylesheet" href="css/app.css">
<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");
dojo.require("esri.arcgis.utils");
dojo.require("esri.dijit.Scalebar");
var map;
function init() {
var mapDeferred = esri.arcgis.utils.createMap("f532b1a36d7842a4b6d0a5a59dfff435", "map");
mapDeferred.then(function(response) {
dojo.byId("title").innerHTML = response.itemInfo.item.title;
map = response.map;
//add the legend
var layers = response.itemInfo.itemData.operationalLayers;
if (map.loaded) {
initMap(layers);
} else {
dojo.connect(map,"onLoad",function(){
initMap(layers);
});
}
}, function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
});
}
function initMap(layers){
//add a scalebar
var scalebar = new esri.dijit.Scalebar({
map: map,
scalebarUnit: 'english'
});
}
//show map on load
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>