Last active
January 12, 2018 16:37
-
-
Save ivanmalagon/41b84a1865d270cee55313ddfcaa23ab to your computer and use it in GitHub Desktop.
OpenLayers
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> | |
| <meta charset='utf-8' /> | |
| <title>OpenLayers – Vector tiles – Points aggregation | CARTO</title> | |
| <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css"> | |
| <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> | |
| <script src="https://openlayers.org/en/v4.6.4/examples/resources/mapbox-streets-v6-style.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map" class="map"></div> | |
| <script> | |
| (async () => { | |
| const mapConfig = { | |
| buffersize: { mvt: 0 }, | |
| layers: [ | |
| { | |
| id: 'aggregated', | |
| options: { | |
| sql: 'select * from table_5yr_county_acs_copy_1', | |
| aggregation: { | |
| threshold: 1, | |
| resolution: 4, | |
| placement: 'point-grid', | |
| columns: { | |
| white_pop: { | |
| aggregate_function: 'sum', | |
| aggregated_column: 'white_pop' | |
| }, | |
| asian_pop: { | |
| aggregate_function: 'sum', | |
| aggregated_column: 'asian_pop' | |
| }, | |
| black_pop: { | |
| aggregate_function: 'sum', | |
| aggregated_column: 'black_pop' | |
| }, | |
| hispanic_pop: { | |
| aggregate_function: 'sum', | |
| aggregated_column: 'hispanic_o' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| ] | |
| } | |
| const response = await fetch('https://mamataakella.carto.com/api/v1/map', { | |
| method: 'POST', | |
| headers: { | |
| 'Accept': 'application/json', | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(mapConfig) | |
| }); | |
| const layergroup = await response.json(); | |
| var tilejson = layergroup.metadata.tilejson.vector; | |
| var map = new ol.Map({ | |
| layers: [ | |
| new ol.layer.Tile({ | |
| source: new ol.source.XYZ({ | |
| url: 'http://{1-4}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', | |
| }) | |
| }), | |
| new ol.layer.VectorTile({ | |
| source: new ol.source.VectorTile({ | |
| format: new ol.format.MVT({ layerName: 'aggregated' }), | |
| urls: tilejson.tiles | |
| }), | |
| style: function (feature, resolution) { | |
| const wp = feature.get('white_pop') || 0.001; | |
| const ap = feature.get('asian_pop') || 0.001; | |
| const bp = feature.get('black_pop') || 0.001; | |
| const hp = feature.get('hispanic_pop') || 0.001; | |
| let r = (ap + bp + hp) / (wp + 1); | |
| if (r > 70) { | |
| r = 70; | |
| } | |
| return new ol.style.Style({ | |
| image: new ol.style.Circle({ | |
| fill: new ol.style.Fill({ | |
| color: '#2EE6E6A0', | |
| }), | |
| fillOpacity: 0.7, | |
| stroke: new ol.style.Stroke({ | |
| color: '#111111A0', | |
| width: 0, | |
| }), | |
| radius: Math.sqrt(r) * 3 | |
| }) | |
| }); | |
| } | |
| }) | |
| ], | |
| target: 'map', | |
| view: new ol.View({ | |
| center: [0, 0], | |
| zoom: 2 | |
| }) | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment