Created
May 22, 2019 22:37
-
-
Save makella/0d75561fff04a887f3f23d93336d48b4 to your computer and use it in GitHub Desktop.
Webinar SF Crime Reports 2019
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>Label clusters by count | CARTO VL</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://libs.cartocdn.com/carto-vl/v1.2.5/carto-vl.min.js"></script> | |
| <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> | |
| <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> | |
| <link href="https://carto.com/developers/carto-vl/v1.2.5/examples/maps/style.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <aside class="toolbox"> | |
| <div class="box"> | |
| <header> | |
| <h1>Crime Reports 2019</h1> | |
| </header> | |
| <section> | |
| <p class="description open-sans">Count of crime incidents</p> | |
| </section> | |
| <footer class="js-footer"></footer> | |
| </div> | |
| </aside> | |
| <script> | |
| const map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json', | |
| center: [-122.4326773175207, 37.75977903996777], | |
| zoom: 11, | |
| scrollZoom: false | |
| }); | |
| const nav = new mapboxgl.NavigationControl({ | |
| showCompass: false | |
| }); | |
| map.addControl(nav, 'top-left'); | |
| carto.setDefaultConfig({ | |
| serverURL: 'https://{user}.carto.com' | |
| }); | |
| carto.setDefaultAuth({ | |
| username: 'cartovl', | |
| apiKey: 'default_public' | |
| }); | |
| const source = new carto.source.Dataset('sf_crime_2019'); | |
| const viz = new carto.Viz(` | |
| @count: clusterCount() | |
| @v_features: viewportFeatures(@count) | |
| @opacity: 0.8 | |
| @res: 32 | |
| width: sqrt(@count) | |
| color: opacity(#775cbc,@opacity) | |
| //color: opacity(ramp(clusterMODE($incident_category),bold),@opacity) | |
| resolution: 32 | |
| strokeWidth: 0 | |
| `); | |
| const layer = new carto.Layer('layer', source, viz); | |
| // Create labeling layer centroids | |
| layer.on('loaded', () => { | |
| map.addSource('labels', { type: 'geojson', data: null }); | |
| const labelSource = map.getSource('labels'); | |
| const layerUpdated = function () { | |
| const features = viz.variables.v_features.value; | |
| const geojsonFeatures = features.map(feature => { | |
| return { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": feature.getRenderedCentroid() | |
| }, | |
| "properties": { | |
| "label_field": Math.round(feature.properties['count']), | |
| } | |
| } | |
| }); | |
| labelSource.setData({ | |
| type: 'FeatureCollection', | |
| features: geojsonFeatures | |
| }); | |
| }; | |
| layer.on('updated', layerUpdated); | |
| // Style labels | |
| map.addLayer({ | |
| "id": "my-labels", | |
| "type": "symbol", | |
| "source": "labels", | |
| "layout": { | |
| "text-field": "{label_field}", | |
| "text-font": ["Open Sans Semibold", "Arial Unicode MS Regular"], | |
| "text-size": 10, | |
| "text-justify": "center" | |
| }, | |
| "paint": { | |
| "text-color": "#FFFFFF", | |
| "text-halo-width": 0, | |
| "text-halo-blur": 0 | |
| }, | |
| filter: ['>', ['number', ['get', 'label_field']], 1] | |
| }); | |
| }); | |
| layer.addTo(map); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment