Use background-image on GeoJSON Layer

Question

I'm creating a Leaflet map of the State of Wisconsin and the counties. I have a layer for the entire US, one for the state of Wisconsin and one for each individual county. I have 3 different styles and I'm setting them appropriately. Everything works as you would think.

function setStyle(feature) {
return {
    opacity: 1,
    color: "#fff",
    fillColor: "#c5050c",
    fillOpacity: 1
}
}
function setUS(feature) {
return {
    opacity: .5,
    color: "#a5a5a5",
    fillColor: "#ebebeb",
    fillOpacity: 0.2
}
}
function setState(feature) {
return {
    opacity: 1,
    color: "#fff",
    fillOpacity: .1
}
}
L.geoJson(state, { style: setState}).addTo(map);
L.geoJson(states, { style: setUS}).addTo(map);
L.geoJson(Adams, { style: setStyle}).addTo(map)

What I'd like to do is update the State layer to have a background image. I can't figure out how to do this Leaflet using a GeoJSON layer. Does anyone have any suggestions? I tried adding a class and giving it a background image. I tried using imageOverlay, but that only creates a rectangle.

This is what I'd like it to look like.

ghybs ghybs · Accepted Answer · 2016-07-19T17:11:23

Note that you can easily use the Image Overlay with a PNG image with transparency (alpha channel) on the borders.

You would also probably be interested in TileLayer.BoundaryCanvas plugin, especially if your background image can be provided as tiles.

BoundaryCanvas is a plugin for Leaflet mapping library to draw tiled raster layers with arbitrary boundary. HTML5 Canvas is used for rendering. Works with both Leaflet 0.7.x and 1.0beta versions.

In the new Tile Layer provided by the plugin, you can simply add a boundary option with your overall GeoJSON shape.

Use background-image on GeoJSON Layer

1 Answers