leaflet-canvaslayer-field
Version:
A set of layers using canvas to draw ASCIIGrid or GeoTIFF files. This includes a basic raster layer (*ScalaField*) and an animated layer for vector fields, such as wind or currents (*VectorFieldAnim*)
147 lines (123 loc) • 5.47 kB
HTML
<html>
<head>
<title>ScalarField / color</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/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="examples.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
</head>
<body>
<h1 class="title mapTitle">ScalarField styles</h1>
<div id="map"></div>
<div id="floating-panel">
<ul>
<li id="gradientPanel">
<label>Gradient</label>
<input type="color" id="lowColor" value="#FFFFFF">
<input type="color" id="highColor" value="#000000">
</li>
<li id="colorBrewerPanel" style="display:none;">
<label>Palettes</label>
<!-- some color scales... (for a full list see: https://github.com/gka/chroma.js/wiki/Predefined-Colors) -->
<select id="colorBrewer">
<option>OrRd</option>
<option>PuBu</option>
<option>BuPu</option>
<option>Oranges</option>
<option>RdPu</option>
<option>YlGnBu</option>
<option>GnBu</option>
<option>PuRd</option>
<option>PuBuGn</option>
<option>Spectral</option>
<option>RdYlGn</option>
<option>PiYG</option>
<option>Paired</option>
</select>
</li>
<li id="classesPanel" style="display:none;">
<label>Nº classes</label>
<input id="classes" type="text" value="5" style="width: 15px">
</li>
</ul>
</div>
<!-- CDN -->
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
<!--<script src="leaflet-src.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.0/chroma.min.js"></script>
<!-- Plugin -->
<script src="dist/leaflet.canvaslayer.field.js"></script>
<script>
var map = L.map('map');
/* Basemap */
var url = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png';
L.tileLayer(url, {
attribution: 'CartoDB & OSM',
subdomains: 'abc',
maxZoom: 19
}).addTo(map);
/*
Some ScalarField layers with custom styles
*/
d3.text('data/Bay_Speed.asc', function (asc) {
var s = L.ScalarField.fromASCIIGrid(asc);
var layer1 = L.canvasLayer.scalarField(s, {
color: chroma.scale(['white', 'black']).domain(s.range),
mouseMoveCursor: null
}).addTo(map);
map.fitBounds(layer1.getBounds());
var layer2 = L.canvasLayer.scalarField(s, {
color: chroma.scale('OrRd').domain(s.range),
mouseMoveCursor: null
});
var layer3 = L.canvasLayer.scalarField(s, {
color: chroma.scale('OrRd').classes(5),
mouseMoveCursor: null
});
var layers = {
'Two colors gradient': layer1,
'ColorBrewer2': layer2,
'Classes (n-equidistant)': layer3
};
L.control.layers(layers, {}, {
position: 'bottomleft',
collapsed: false
}).addTo(map);
/* Dynamic styles */
// gradient with two colors
let gradientColors = document.getElementsByTagName('input[type=color]');
let low = document.getElementById('lowColor');
let high = document.getElementById('highColor');
var updateGradient = function () {
var scale = chroma.scale([low.value, high.value]).domain(s.range);
layer1.setColor(scale);
}
low.addEventListener('input', updateGradient);
high.addEventListener('input', updateGradient);
// colorBrewer scale
let colorBrewer = document.getElementById('colorBrewer');
colorBrewer.addEventListener('change', function () {
var scale = chroma.scale(this.value).domain(s.range);
layer2.setColor(scale);
});
// classes
let classes = document.getElementById("classes");
classes.addEventListener("change", function () {
var scale = chroma.scale('OrRd').classes(parseInt(this.value));
layer3.setColor(scale);
});
// enable panels
map.on('baselayerchange', function (e) {
let gradientPanel = document.getElementById('gradientPanel');
gradientPanel.style.display = (e.layer === layer1) ? "block" : "none";
let colorBrewerPanel = document.getElementById('colorBrewerPanel');
colorBrewerPanel.style.display = (e.layer === layer2) ? "block" : "none";
let classesPanel = document.getElementById('classesPanel');
classesPanel.style.display = (e.layer === layer3) ? "block" : "none";
});
});
</script>
</body>
</html>