leaflet - LeafletJS: How to make layer not movable?

Question

I'd like to make a simple canvas layer (not tiled canvases, but one big canvas), but I can not find how can I put layer outside mapPane to make it non-draggable in a documented way.

Should I use 'non-documented' methods or should I use 'reverse-tranform' hack ?

question from:https://stackoverflow.com/questions/65893452/overlay-static-image-on-top-of-leaflet-map

Answer 1

If I understand correctly, you would like to overlay your own canvas onto a Leaflet map, but so that it does not pan (is being dragged) with the rest of the map like the Tile Layers or Markers.

Therefore it would be like a Control (like the Zoom, Layers switching and attribution Controls) that remains at the same position relative to the map container, except that it would cover the entire map view port.

As you seem to have figured out, as soon as you insert your element into the map pane, it will move with the rest of the map elements as user drags / pans around.

Therefore you could simply append it into the map container, as a sibling of the map pane:

// http://leafletjs.com/reference-1.3.0.html#map-getcontainer
map.getContainer().appendChild(myCanvasElement);

Then you need to adjust the CSS of your canvas element:

• position it absolutely
• above the other siblings (the map pane has a z-index of 400, but you probably want to remain below other controls, which have a z-index of 1000)
• let mouse events go through (so that user can still use map objects like clicking on Markers, etc.)

#myCanvasElement {
  position: absolute;
  /* Let mouse events go through to reach the map underneath */
  pointer-events: none;
  /* Make sure to be above the map pane (.leaflet-pane) */
  z-index: 450;
}

A working code snippet example:

var map = L.map('map').setView([48.86, 2.35], 11);

var myCanvasElement = document.getElementById('myCanvasElement');

// Adjust the canvas size, assuming we want to cover the entire map.
var mapSize = map.getSize(); // http://leafletjs.com/reference-1.3.0.html#map-getsize
myCanvasElement.width = mapSize.x;
myCanvasElement.height = mapSize.y;

// Move the canvas inside the map container.
var mapContainer = map.getContainer(); // http://leafletjs.com/reference-1.3.0.html#map-getcontainer
mapContainer.appendChild(myCanvasElement);

// Draw on the canvas...
var context = myCanvasElement.getContext('2d');
context.strokeStyle = 'rgb(0, 0, 200)';
var w = 200;
var h = 100;
var x = (mapSize.x - w) / 2;
var y = (mapSize.y - h) / 2;
context.strokeRect(x, y, w, h);

L.marker([48.86, 2.35]).bindPopup('Paris').addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

#myCanvasElement {
  position: absolute;
  /* Let mouse events go through to reach the map underneath */
  pointer-events: none;
  /* Make sure to be above the map pane (.leaflet-pane) */
  z-index: 450;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

<canvas id="myCanvasElement"></canvas>