Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/README.md

Created August 14, 2017 09:17
Download ZIP

Revisions

  1. ramiroaznar created this gist Aug 14, 2017.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Based on [John Nelson's fireflies maps](https://adventuresinmapping.com/2016/10/17/firefly-cartography/).
    90 changes: 90 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>How to style markers as fireflies in CARTO with CartoCSS</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />

    <style type="text/css">
    html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
    }
    </style>

    </head>
    <body>

    <script type="text/sql" id="query">
    SELECT * FROM populated_places ORDER BY pop_max
    </script>

    <script type="text/cartocss" id="style">
    #layer {
    marker-fill: #005CE6;
    marker-width: ramp([pop_max], range(20,30), jenks);
    marker-opacity: .4;
    marker-allow-overlap: true;
    marker-line-width: 0;
    }
    #layer::first {
    marker-fill: #00C5FF;
    marker-width: ramp([pop_max], range(15,19), jenks);
    marker-opacity: .6;
    marker-allow-overlap: true;
    marker-line-width: 0;
    }
    #layer::second {
    marker-fill: #00FFC5;
    marker-width: ramp([pop_max], range(7,15), jenks);
    marker-opacity: .8;
    marker-allow-overlap: true;
    marker-line-width: 0;
    }
    #layer::third {
    marker-fill: white;
    marker-width: ramp([pop_max], range(3,6), jenks);
    marker-opacity: 1;
    marker-allow-overlap: true;
    marker-line-width: 0;
    }
    </script>
    <div id="map"></div>
    <script>
    function main() {

    // Create map, get style and query
    var map = new L.Map('map', {
    zoomControl: true,
    center: [40, -1],
    zoom: 4
    }),
    style = $("#style").text(), query = $("#query").text()

    // Add basemap
    L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
    attribution: '<a href="http://carto.com">CARTO</a> © 2014',
    maxZoom: 16
    }).addTo(map);

    // Add CARTO layer
    cartodb.createLayer(map, {
    user_name: 'ramirocartodb',
    type: 'cartodb',
    sublayers: [{
    sql: query,
    cartocss: style
    }]
    }).addTo(map);

    }

    window.onload = main;
    </script>
    </body>
    </html>