Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Last active August 10, 2016 10:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramiroaznar/869b9f2de099a49af10953f214d441e7 to your computer and use it in GitHub Desktop.
Save ramiroaznar/869b9f2de099a49af10953f214d441e7 to your computer and use it in GitHub Desktop.
Download ZIP
How to add a CARTO basemap with ArcGIS API
Raw
readme.md

Here there is a fiddle showing how to do it with ArcGis Javascript API v 4.0.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta 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</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
html, body, #map {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color: #fff; overflow:hidden;
font-family: 'Montserrat', sans-serif;
}
#header {
padding: 4px 15px 4px 0;
background-color: #f24440;
color: white;
font-size: 16pt;
text-align: right;
font-weight: bold;
height:55px;
}
#subheader {
color: white;
font-size: small;
padding: 5px 0 0 0;
text-align: right;
font-family: 'Open Sans', sans-serif;
}
#subheader a { color: white; }
.ds { background: ##f24440 ; overflow: hidden; position: absolute; z-index: 2; }
#ds-h div { width: 100%; }
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
#ds .h1 { height: 1px; }
#ds .h2 { height: 2px; }
#ds .h3 { height: 3px; }
#ds .h4 { height: 4px; }
#ds .h5 { height: 5px; }
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/WebTiledLayer", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, WebTiledLayer, parser
) {
parser.parse();
map = new Map("map", {
center: [-89.985, 29.822],
zoom: 8
});
var cartoBasemap = new WebTiledLayer("http://1.basemaps.cartocdn.com/light_all/{level}/{col}/{row}.png", {
"copyright": '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>',
"id": "cartodb"
});
map.addLayer(cartoBasemap);
});
</script>
</head>
<body class="nihilo">
<div id="mainWindow"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="header"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
CARTO
<div id="subheader">Display <a href="https://carto.com/location-data-services/basemaps/" target="_blank">CARTO</a> basemap using the WebTiledLayer class</div>
</div>
<div id="map" class="shadow"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="ds">
<div id="ds-h">
<div class="ds h1 o1"></div>
<div class="ds h2 o2"></div>
<div class="ds h3 o3"></div>
<div class="ds h4 o4"></div>
<div class="ds h5 o5"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment