Based on John Nelson's fireflies maps.
Created
August 14, 2017 09:17
-
-
Save ramiroaznar/ab8a0c5cfcf22150b8c6bcb279d4c861 to your computer and use it in GitHub Desktop.
How to style markers as fireflies in CARTO with CartoCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment