Builder Map
This example shows how to load a public map created in CARTO Builder.
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body style="margin: 0; padding: 0">
<div id="map" style="width: 100vw; height: 100vh;"></div>
</body>
<script type="text/javascript">
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
});
deck.carto.fetchMap({cartoMapId: 'ff6ac53f-741a-49fb-b615-d040bc5a96b8'})
.then(({initialViewState, mapStyle, layers}) => {
const MAP_STYLE = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`;
const deckgl = new deck.DeckGL({
container: 'map',
map: maplibregl,
controller: true,
mapStyle: MAP_STYLE,
initialViewState,
layers
});
});
</script>
</html>
Last modified 2mo ago