Skip to content

Instantly share code, notes, and snippets.

@VictorVelarde

VictorVelarde/index.html

Last active April 9, 2019 17:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VictorVelarde/6f82455fcec6e38cda52f6f6beccaf05 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VictorVelarde/6f82455fcec6e38cda52f6f6beccaf05 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. VictorVelarde revised this gist Apr 9, 2019. No changes.
  2. VictorVelarde revised this gist Apr 8, 2019. 1 changed file with 64 additions and 61 deletions.
    125 changes: 64 additions & 61 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,17 @@
    <html>

    <head>
    <title>Road AccidentsIncidents</title>
    <title>CARTO VL & deck.gl</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src="https://unpkg.com/deck.gl@latest/deckgl.min.js"></script>

    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
    <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">

    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>

    <style type="text/css">
    #map {
    position: absolute;
    @@ -63,48 +67,61 @@
    </div>
    </body>
    <script type="text/javascript">

    var { MapboxLayer, HexagonLayer } = deck;

    //Create the Mapbox map

    // Create the Mapbox map
    var map = new mapboxgl.Map({
    container: document.body,
    style: carto.basemaps.voyager,
    style: carto.basemaps.darkmatter,
    center: [-1.4157, 52.2324],
    zoom: 6,
    pitch: 40.5
    });

    // Get Data for visual
    var DATA_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';
    //Create the deck.gl hexagon layer and style for the data
    var OPTIONS = ['radius', 'coverage', 'upperPercentile'];
    var COLOR_RANGE = [
    [1, 152, 189],
    [73, 227, 206],
    [216, 254, 181],
    [254, 237, 177],
    [254, 173, 84],
    [209, 55, 78]
    ];
    var LIGHT_SETTINGS = {
    lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
    ambientRatio: 0.4,
    diffuseRatio: 0.6,
    specularRatio: 0.2,
    lightsStrength: [0.8, 0.0, 0.8, 0.0],
    numberOfLights: 2
    };

    var hexagonLayer;
    //Add the deck.gl Custom Layer to the map once the Mapbox map loads

    map.on('load', () => {
    addDeckGLLayer();

    addVLLayer();
    });

    function addDeckGLLayer(){
    function addVLLayer() {
    carto.setDefaultAuth({
    username: 'cartovl',
    apiKey: 'default_public'
    });

    const source = new carto.source.Dataset('populated_places');
    const viz = new carto.Viz();
    const layer = new carto.Layer('layer', source, viz);
    layer.addTo(map, 'watername_ocean');
    }

    function addDeckGLLayer() {
    var { MapboxLayer, HexagonLayer } = deck;

    // deck.gl Layer
    hexagonLayer = new MapboxLayer({
    var DATA_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';

    // Create the deck.gl hexagon layer and style for the data
    var OPTIONS = ['radius', 'coverage', 'upperPercentile'];
    var COLOR_RANGE = [
    [1, 152, 189],
    [73, 227, 206],
    [216, 254, 181],
    [254, 237, 177],
    [254, 173, 84],
    [209, 55, 78]
    ];
    var LIGHT_SETTINGS = {
    lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
    ambientRatio: 0.4,
    diffuseRatio: 0.6,
    specularRatio: 0.2,
    lightsStrength: [0.8, 0.0, 0.8, 0.0],
    numberOfLights: 2
    };

    // Mapbox layer
    var hexagonLayer = new MapboxLayer({
    type: HexagonLayer,
    id: 'heatmap',
    data: d3.csv(DATA_URL),
    @@ -119,37 +136,23 @@
    lightSettings: LIGHT_SETTINGS,
    opacity: 1
    });
    // Add the deck.gl hex layer below labels in the Mapbox map
    map.addLayer(hexagonLayer, 'watername_ocean');

    // Add sliders to change the layer's settings based on user input
    OPTIONS.forEach(key => {
    document.getElementById(key).onchange = (evt) => {
    var value = Number(evt.target.value);
    document.getElementById(key + '-value').innerHTML = value;
    if (hexagonLayer) {
    hexagonLayer.setProps({
    [key]: value
    });
    }
    };
    });
    }

    // Define user
    carto.setDefaultAuth({
    username: 'cartovl',
    apiKey: 'default_public'
    });

    // Define 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, 'watername_ocean');

    // Add the deck.gl hex layer below labels in the CARTO map
    map.addLayer(hexagonLayer, 'watername_ocean');

    // Add sliders to change the layer's settings based on user input
    OPTIONS.forEach(key => {
    document.getElementById(key).onchange = (evt) => {
    var value = Number(evt.target.value);
    document.getElementById(key + '-value').innerHTML = value;
    if (hexagonLayer) {
    hexagonLayer.setProps({
    [key]: value
    });
    }
    };
    });
    }

    </script>

  3. VictorVelarde created this gist Apr 8, 2019.
    156 changes: 156 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,156 @@
    <html>

    <head>
    <title>Road AccidentsIncidents</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://unpkg.com/deck.gl@latest/deckgl.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
    <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>
    <style type="text/css">
    #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    }

    body {
    font-family: Helvetica, Arial, sans-serif;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0
    }

    #control-panel {
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    margin: 12px;
    padding: 20px;
    font-size: 12px;
    line-height: 1.5;
    z-index: 1;
    }

    label {
    display: inline-block;
    width: 140px;
    }
    </style>
    </head>

    <body>
    <div id="control-panel">
    <div>
    <label>Radius</label>
    <input id="radius" type="range" min="500" max="10000" step="500" value="1000"></input>
    <span id="radius-value"></span>
    </div>
    <div>
    <label>Coverage</label>
    <input id="coverage" type="range" min="0" max="1" step="0.1" value="1"></input>
    <span id="coverage-value"></span>
    </div>
    <div>
    <label>Upper Percentile</label>
    <input id="upperPercentile" type="range" min="90" max="100" step="1" value="100"></input>
    <span id="upperPercentile-value"></span>
    </div>
    </div>
    </body>
    <script type="text/javascript">

    var { MapboxLayer, HexagonLayer } = deck;

    //Create the Mapbox map
    var map = new mapboxgl.Map({
    container: document.body,
    style: carto.basemaps.voyager,
    center: [-1.4157, 52.2324],
    zoom: 6,
    pitch: 40.5
    });

    // Get Data for visual
    var DATA_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';
    //Create the deck.gl hexagon layer and style for the data
    var OPTIONS = ['radius', 'coverage', 'upperPercentile'];
    var COLOR_RANGE = [
    [1, 152, 189],
    [73, 227, 206],
    [216, 254, 181],
    [254, 237, 177],
    [254, 173, 84],
    [209, 55, 78]
    ];
    var LIGHT_SETTINGS = {
    lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
    ambientRatio: 0.4,
    diffuseRatio: 0.6,
    specularRatio: 0.2,
    lightsStrength: [0.8, 0.0, 0.8, 0.0],
    numberOfLights: 2
    };

    var hexagonLayer;
    //Add the deck.gl Custom Layer to the map once the Mapbox map loads
    map.on('load', () => {
    addDeckGLLayer();
    });

    function addDeckGLLayer(){
    // deck.gl Layer
    hexagonLayer = new MapboxLayer({
    type: HexagonLayer,
    id: 'heatmap',
    data: d3.csv(DATA_URL),
    radius: 1000,
    coverage: 1,
    upperPercentile: 100,
    colorRange: COLOR_RANGE,
    elevationRange: [0, 1000],
    elevationScale: 250,
    extruded: true,
    getPosition: d => [Number(d.lng), Number(d.lat)],
    lightSettings: LIGHT_SETTINGS,
    opacity: 1
    });
    // Add the deck.gl hex layer below labels in the Mapbox map
    map.addLayer(hexagonLayer, 'watername_ocean');

    // Add sliders to change the layer's settings based on user input
    OPTIONS.forEach(key => {
    document.getElementById(key).onchange = (evt) => {
    var value = Number(evt.target.value);
    document.getElementById(key + '-value').innerHTML = value;
    if (hexagonLayer) {
    hexagonLayer.setProps({
    [key]: value
    });
    }
    };
    });
    }

    // Define user
    carto.setDefaultAuth({
    username: 'cartovl',
    apiKey: 'default_public'
    });

    // Define 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, 'watername_ocean');



    </script>

    </html>