Filling contour levels with grain (texture) using Leaflet

Question

I created a program to draw temperature contour map of France:

This is the code:

library(ggplot2)
library(gstat)
library(sp)
library(maptools)
require(rgeos)
library(rgdal) 
library(foreign)
library(maptools)
library(knitr)
library(jsonlite)
library(raster)
library(leaflet)

#récupérer les données a partir de json
dataJson <- fromJSON(readLines('jsonallcoor.js'))
# Téléchargement du fond de carte
FRA=readShapePoly("FRA_adm0.shp")

#concour (interpolation idw)
x=data.frame(0)
y=data.frame(0)
t=data.frame(0)
for ( i in 1:103) { 
  x[i]<- as.data.frame.factor(dataJson[[i]]$longitude)# define x & y as longitude and latitude
  y[i]<- as.data.frame.factor(dataJson[[i]]$latitude)
  t[i]<- as.data.frame.factor(dataJson[[i]]$temperature)
}
#changer le nom de dataframe 

x<- as.numeric(x) 
y <- as.numeric(y) 
temperature<- as.numeric(t)
frame=as.data.frame(cbind(x,y,temperature))
frame.xy = frame[c("x", "y")]
coordinates(frame.xy ) <- ~x+y
plot(frame.xy )

#Define the grid extent
x.range <- as.numeric(c(-4.445833,9.484722))  # min/max longitude of the interpolation area
y.range <- as.numeric(c(40.50306,51.2))  # min/max latitude of the interpolation area

#Create a data frame from all combinations of the supplied vectors or factors. See the description of the return value for precise details of the way this is done. Set spatial coordinates to create a Spatial object. Assign gridded structure:
grd <- expand.grid(x = seq(from = x.range[1], to = x.range[2], by = 0.1), 
                   y = seq(from = y.range[1], to = y.range[2], by = 0.1)) 
# expand points to grid
coordinates(grd) <- ~x + y
#to pixel
gridded(grd) <- TRUE
#Plot the weather station locations and interpolation grid:
plot(grd, cex = 1.5, col = "grey")

#les lon et lat
points(frame.xy, pch =1, col = "black", cex = 0.1)
#Interpolate surface and fix the output
idw <- idw(formula = temperature ~ 1, locations = frame.xy, 
           newdata = grd)  # apply idw model for the data

residual_grid = raster(idw, "var1.pred")
contourr <- rasterToContour(residual_grid)

library(leaflet)
## Initialisation 
m <- leaflet(padding = 0)
m <- addTiles(m)## Ajout des pays-
m <- addPolygons(map = m, data = FRA, opacity = 100, 
                 color = "#FAFCFA", 
                 weight = 0.25,popup = NULL,
                 options = list(clickable = FALSE), 
                 fill = T, fillColor = "#B3C4B3", 
                 fillOpacity = 100)
## Ajout des cercles
for ( i in 1:103) { 
  m <-addCircleMarkers(map = m, 
                       lng = dataJson[[i]]$longitude,
                       lat = dataJson[[i]]$latitude,
                       radius=5, weight = 0.25, 
                       stroke = T, opacity = 100,
                       fill = T, fillColor = "#920000", 
                       fillOpacity = 100,
                       popup = dataJson[[i]]$station,
                       color = "white")
}  
m <- fitBounds(map = m, 
               lng1 = -4.445833,
               lat1 = 40.50306,
               lng2 = 9.484722, 
               lat2 =  50.56417)
m<-addPolylines(map=m,data =contourr,fillOpacity=5,fillColor = "transparent",opacity=10,weight=1)
m<-addRectangles(map=m,
                 lng1=9.484722, lat1=40.50306,
                 lng2=-4.445833, lat2=51.2,
                 fillColor = "transparent"
)

## Dimensions de la carte
m$width <- 1000
m$height <-700

library(htmlwidgets)
saveWidget(m, 'contour.html', selfcontained = FALSE)

This is the result:

Now, I am looking a method for filling the contour levels with grain (texture).

EDIT:

I show you what I've done I added a grid raster then I intersected with the card

but my ultimate goal is to combine texture with temperature value so the change in the value changes with grain like this :

I don't know how do it. please give me suggestion

Answer 1

My opinion is to display another layer on your map.

I would add a new layer just on top of the base layer which would be your residual_grid raster layer with a nice colour map on it. If it has a decent opacity assigned to it, you will still be able to see through it and the contours will be superimposed upon it. I would also suggest labelling the contours(if they are polylines then perhaps the labels would render along them instead of inside them as polygons do). I would also choose different display for your FRA polygons...perhaps just colour the boundaries of those. However, if you implement turning layers on and off, I would then put the FRA on top of the residual_grid raster.

Some example code and docs can be found here: https://rstudio.github.io/leaflet/raster.html As they mention, if your raster resolution is big, then you will take a hit on bandwidth when a user is downloading the page.