This tutorial is oriented to draw raster data using d3js, but the used libraries can be used along with leaflet too, which can be a good option in most cases.
You can find the whole code here. This example includes all the layer types.
The example doesn’t use d3js for any of its parts, so no extra libraries are used.
Isobands and isolines
The example with only isolines and isobands is here.
- To show the wind isobands, the raster-marching-squares library is used
- The color scale is calculated manually with the getColor function, so no d3js color scales are needed.
- The style includes a fillOpacity option that allows to see the background
- Adding the isolines is easier, since no styling is needed for each line
Let’s create the map:
- A grey base layer is added as in all the leaflet examples
- The map instance is added with the base layer and wind layer
- Adding the wind layer here will make it to be selected by default
- The contro.layers function formats the available layers, with the shown names
- The tooltip is created with an on(‘click’) event over the map
- Most examples will show how to query the layers, but in our case, we want to calculate this by ourselves
- The selected point can be get at the e.latlng.lng and e.latlng.lat properties
- The values at the selected point are calculated as in the tooltip section
- A popup() is created an opened, since the click event has already been fired and handled before
The example with only interpolated raster is here. The technique used here uses the base explained at the drawing raster data section.
The important changes are:
- Creates the color scale as a hidden canvas (read the detailed expanation)
- I’ve tried to use the same scale as in the isobands. A better method to define scales should be find, maybe creating a function to do it.
- The image is calculated as in the d3 example, but note the geoTransform path-properties
- The created image ahs an arbitrary size (then it will be wrapped to fit the map) width and height
- The geotransform is calculated dividing the GeoTIFF original size by the created image size
- The imageOverlay is added to the map
- The image bounds must be the ones of the GeoTIFF