-
-
Save claustres/550f58395bb3a674bad89e623c532b4e to your computer and use it in GitHub Desktop.
Leaflet.CanvasLayer.Field issue #8 - weacast (Custom JSON)
This file contains hidden or 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>Weacast ScalarField | Issue #8 with 1.3.3</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet"> | |
| <style> | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| background-color: black; | |
| } | |
| html, | |
| body, | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <!-- CDN --> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script src="//npmcdn.com/[email protected]/dist/leaflet.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.0/chroma.min.js"></script> | |
| <!-- Plugin --> | |
| <script src="//unpkg.com/[email protected]/dist/leaflet.canvaslayer.field.js"></script> | |
| <script> | |
| let map = L.map('map'); | |
| /* Basemap */ | |
| var url = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'; | |
| L.tileLayer(url, { | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attributions">CARTO</a>', | |
| subdomains: 'abcd' | |
| }).addTo(map); | |
| /* A custom JSON */ | |
| d3.json('https://gist.githubusercontent.com/VictorVelarde/a7821d8b86c908639bb8819f947f3849/raw/bb1a0b17e57a6147237a7985ac9d1e3407ded4f4/weacast.json', function (json) { | |
| let p = { | |
| nCols: 370, | |
| nRows: 260, | |
| xllCorner: -32, | |
| yllCorner: 20, | |
| cellSize: 0.2, | |
| zs: json.data | |
| }; | |
| let s = new L.ScalarField(p); | |
| let c = chroma.scale('Spectral').domain(s.range); | |
| let layer = L.canvasLayer.scalarField(s, { | |
| color: c, | |
| interpolate: true | |
| }).addTo(map); | |
| layer.setOpacity(0.5); | |
| map.fitBounds(layer.getBounds()); | |
| layer.on('click', function (e) { | |
| if (e.value !== null) { | |
| let html = `${e.value.toFixed(3)}`; | |
| let popup = L.popup().setLatLng(e.latlng).setContent(html).openOn(map); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment