Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Last active August 10, 2016 10:42
Show Gist options
  • Save ramiroaznar/44f8518cd3d9501a12f695bfce3ec1a8 to your computer and use it in GitHub Desktop.
Save ramiroaznar/44f8518cd3d9501a12f695bfce3ec1a8 to your computer and use it in GitHub Desktop.
Download ZIP
How to add a CARTO basemap with ArcGIS API v4
Raw
index.html
<!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>How to add a CARTO basemap with ArcGIS API v4</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css" />
<script src="https://js.arcgis.com/4.0/init.js"></script>
<style>
html, body, #map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body class="claro">
<div id="map"></div>
<script>
var map, view;
require([
"esri/Basemap",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function (Basemap, WebTileLayer, Map, MapView){
var cartoBasemap = new WebTileLayer("http://{subDomain}.basemaps.cartocdn.com/light_all/{level}/{col}/{row}.png", {
"id": "cartoDb",
"copyright": '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>',
"subDomains": ['1', '2', '3', '4']
});
map = new Map({});
view = new MapView({
center: [-89.985, 29.822],
container: "map",
map: map,
zoom: 8
});
map.add(cartoBasemap);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment