Is there any way to create two color border in lea

Question

How can I create a custom border to multipolygon with leaflet? I would like to have inner border black and outer red or vice versa.

Example picture to show what I mean:

Is there any way to do this?

Answer 1

You can use Leaflet Polyline Offset plugin to draw a duplicate polyline offset by a specified number of pixels and achieve somewhat the desired effect.

L.polyline([
  [48.3, 0.1],
  [48.3, 0.7],
  [48.7, 0.7],
  [48.7, 0.1],
  [48.3, 0.1]
], {
  fillColor: "none",
  weight: 4,
  lineJoin: "miter",
  color: "red"
}).addTo(map);

L.polyline([
  [48.3, 0.1],
  [48.3, 0.7],
  [48.7, 0.7],
  [48.7, 0.1],
  [48.3, 0.1]
], {
  fillColor: "none",
  weight: 4,
  lineJoin: "miter",
  color: "black",
  offset: -4 // Thanks to Leaflet Polyline Offset plugin
}).addTo(map);

There is however a "bug" at the polyline start and end, due to the fact that it is offset but not shorten / extended to close the gap with the beginning of the polyline.

Using an L.rectangle or an L.polygon shows a different bug, where the last segment is not offset. That could be a room for improvement for the plugin, if someone has the dedication to have a look, correct the bug and submit a Pull Request! :-)

Demo: http://jsfiddle.net/3v7hd2vx/42/