@carto/airship-bridge
Version:
Airship bridge to other libs (CARTO VL, CARTO.js)
91 lines (77 loc) • 2.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Airship range filter example</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.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 rel="stylesheet" href="/packages/styles/dist/airship.css">
<script type="module" src="/packages/components/dist/airship/airship.esm.js"></script>
<script nomodule="" src="/packages/components/dist/airship/airship.js"></script>
<script src="/packages/bridge/dist/asbridge.js"></script>
</head>
<body class="as-app-body">
<div class="as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<div id="map"></div>
</div>
</main>
<aside class="as-sidebar as-sidebar--left">
<div class="as-container">
<div class="as-box">
<as-layer-selector id="layerSelector"></as-layer-selector>
</div>
</div>
</aside>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-4.77, 37.88],
zoom: 4
});
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const citiesSource = new carto.source.SQL(`
SELECT *
FROM populated_places
WHERE adm0name IN ('Spain','France','Italy','Switzerland','Portugal')
`);
const citiesViz = new carto.Viz(`
@name: $name
@pop: $pop_max
width: sqrt($pop_max/2000)
`);
const citiesLayer = new carto.Layer('citiesLayer', citiesSource, citiesViz);
const countriesSource = new carto.source.SQL(`
SELECT *
FROM ne_adm0_europe
WHERE admin IN ('Spain','France','Italy','Switzerland','Portugal')
`);
const countriesViz = new carto.Viz(`
@country: $admin
`);
const countriesLayer = new carto.Layer('countriesLayer', countriesSource, countriesViz);
citiesLayer.addTo(map, 'watername_ocean');
countriesLayer.addTo(map, 'citiesLayer');
const layers = [ citiesLayer, countriesLayer ];
const layerSelector = new AsBridge.VL.Layers(
'#layerSelector',
carto,
layers
);
layerSelector.build();
</script>
</body>
</html>