@carto/airship-bridge
Version:
Airship bridge to other libs (CARTO VL, CARTO.js)
116 lines (94 loc) • 3.38 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 Bridge Time Series 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.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 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>
<div class="as-map-footer">
<div class="as-box">
<as-time-series-widget
animated
heading='Animation'
description='controls'
time-format='%Q'
>
</as-time-series-widget>
</div>
<div class="as-box">
<as-histogram-widget
show-clear-button
id="year"
heading="Year"
description='in which building was registered'
>
</as-histogram-widget>
</div>
</div>
</main>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-4.77, 37.88],
zoom: 12
});
carto.setDefaultAuth({
username: 'roman-carto',
apiKey: 'default_public'
});
const source = new carto.source.SQL(`
select * from cordoba_catastro_simple where year > 1900 and year < 2018
`);
const viz = new carto.Viz(`
strokeWidth: 0
`);
const vizLayer = new carto.Layer('layer', source, viz);
vizLayer.addTo(map, 'watername_ocean');
const yearWidget = document.querySelector('#year');
yearWidget.axisFormatter = (e) => {
if (isNaN(e)) {
return '...';
}
return Math.round(e);
};
const bridge = new AsBridge.VLBridge({
carto: carto,
map: map,
layer: vizLayer,
source: source
});
const ts = bridge.timeSeries('as-time-series-widget', 'year', {
buckets: 30,
readOnly: false,
totals: true,
duration: 20,
fade: [0.1, Number.MAX_SAFE_INTEGER]
});
bridge.histogram(yearWidget, 'year', {
buckets: 30,
readOnly: false,
totals: true
});
bridge.build();
</script>
</body>
</html>