Search code examples
node.jselectronleafletzooming

Leaflet JS: the ZOOM moves the elements

I created an app using Electron, Node & Leaflet JS version 1.7.1.

I realized I have this problem related to ZOOM, Polylines, and OverlayImages:

enter image description here

It looks like when I zoom IN the elements move to the left-top corner of the map, and when I zoom OUT they move to the right-bottom of the map. So, to get rid of this problem I changed to version 0.7.7 and everything was beautifull.

The problem is that now I need to use Canvas (more specific "Leaflet-canvas-markers") and it requires the latest version of leafletjs (v 1.7.1) because it uses Canvas.

Does anyone experienced the same problem? any ideas how to solve this?

  • If I use Leaflet-canvas-markers with LeafletJS v 0.7.7 I get an error like this:

Uncaught TypeError: Cannot read property 'include' of undefined

  • This error refers to the file leaflet-canvas-markers.js line 12:

L.Canvas.include(...

FYI: In this App I´m also using:

  • Jquery
  • Bootstrap
  • leaflet-liveupdate
  • leaflet-corridor
  • fs
  • underscore
Solution

  • This is a typical symptom of loading Leaflet JS version 1.x with its CSS file version 0.x

    See for example https://github.com/Leaflet/Leaflet/issues/4247 and https://github.com/Leaflet/Leaflet/issues/4774

    This easily explains why when you downgrade the Leaflet JS file to version 0.7.7, this effect disappears.

    Hence the good news is that you should be good by just using the appropriate matching CSS file version. Then your compatibility issue with Canvas Markers plugin is gone.