Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Last active May 28, 2019 13:49
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/922dc00a06ea32a0b71d28d7352f2a9d to your computer and use it in GitHub Desktop.
Save ramiroaznar/922dc00a06ea32a0b71d28d7352f2a9d to your computer and use it in GitHub Desktop.
Download ZIP
CARTO VL & Planet Basemaps
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>CARTO VL + Planet Basemaps</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include Airship -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v2.0.5/airship.css">
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v2.0.5/icons.css">
<script src="https://libs.cartocdn.com/airship-components/v2.0.5/airship.js"></script>
<!-- Include CARTO VL & Mapbox GL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v1.2.5/carto-vl.min.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="main.css" rel="stylesheet">
</head>
<body id="app" class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<div id="map"></div>
<div class="as-map-panels">
<div class="as-panel as-panel--top as-panel--right">
<div class="as-panel__element as-p--32">
<h4 class="as-subheader as-font--medium">CARTO VL & Planet Basemaps</h4>
<span class="as-caption">Insert Planet API Key</span>
<input id='input-form' class="as-input" type="text" placeholder="PL_API_KEY">
</div>
</div>
</div>
</div>
</main>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
Raw
main.css
* {
box-sizing: border-box;
}
body, *{ margin: 0; padding: 0; }
#map {
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
}
Raw
main.js
// get simple style from raster tiles
// based on https://bl.ocks.org/jsanz/285982c3f170e6aafabfab809939d699
function simpleTilesStyle(urls){
return {
version: 8,
sources: {
"simple-tiles": {
type: "raster",
tiles: urls,
tileSize: 256
}
},
layers: [{
id: "simple-tiles",
type: "raster",
source: "simple-tiles",
minzoom: 0,
maxzoom: 22
}]
}
}
// add Mapbox GL basemap
const map = new mapboxgl.Map({
container: 'map',
style: '',
center: [4.85, 43.55],
zoom: 3,
scrollZoom: false,
dragRotate: false,
touchZoomRotate: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// define CARTO user
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
const form = document.getElementById('input-form');
form.addEventListener('change', (e) => {
// get Planet API Key
let PL_API_KEY = e.srcElement.value;
// generate Planet basemap
let mosaic = simpleTilesStyle( [0, 1, 2, 3].map(s => {
return ` https://tiles${s}.planet.com/basemaps/v1/planet-tiles/global_monthly_2018_07_mosaic/gmap/{z}/{x}/{y}.png?api_key=${PL_API_KEY}`
}))
// add Planet Basemap to Mapbox GL map
map.setStyle(
mosaic
)
// Add CARTO VL layer
const source = new carto.source.Dataset(`populated_places`);
const viz = new carto.Viz();
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment