ptv-logistics / Leaflet.NonTiledLayer

A leaflet layer for non-tiled overlays.
https://ptv-logistics.github.io/Leaflet.NonTiledLayer/
ISC License
59 stars 19 forks source link

Different width and height of map and NonTileyLayer #25

Open Saarpit opened 5 years ago

Saarpit commented 5 years ago

Dear all,

I have an application with a map using a non standard CRS. I'm using proj4leaflet for EPSG:25832 or EPSG:31466. This is working great for TileLayers. But the canvas element of the NonTiledLayer has a different size than my map element.

Map element width: 2506px; height: 1231px; Canvas element width="2576" height="1075"

So the NonTiledLayer is not matching completely over my map. So the positions of the elements displayed in the NonTiledLayer aren't positioned correctly.

Can you please explain why you're calclulating the width and height in _update function (or other functions) and not using the width and height of the leaflet map element?

var pix1 = this._map.latLngToContainerPoint(bounds.getNorthWest());
var pix2 = this._map.latLngToContainerPoint(bounds.getSouthEast());

// get pixel size
var width = pix2.x - pix1.x;
var height = pix2.y - pix1.y;

Why don't you use

var pixelBounds = this._map.getPixelBounds();
var pix1 = pixelBounds.max;
var pix2 = pixelBounds.min;

???

Thanks in advance for your answer.

I'm not sure if this is a bug, so I'm sorry about the "noise".

Best regards Eric

oliverheilig commented 5 years ago

Hello,

NonTiledLayer doesn't simply use the screen size, it also considers the maximum geographic boundaries for which the WMS can deliver an image. Before a request the layer calculates the intersection of the map-view with the maxbounds, and also calculates the corresponding pixel widht and height (which can be smaller than the pixelBounds of the map).

The bounding box for a WMS layer is usually defined in the getCapabilities. If you don't know it you can try to set at the layer options L.latLngBounds([-90, -180], [90.0, 180])

When you say that your WMS works great with the LL tileLayer, are you sure your map is really at the correct location? What i mean is can you place a marker correctly on top of the map? AFAIK you would have to implement a custom crs class, see

https://leafletjs.com/reference-1.5.0.html#crs

and set it as crs for the map. Then NonTiledLayer should also work as expected. Leaflet works great with lat/lng push-pins on a "google-tiles" base map, but if you have to use different projections it may become a bit annoying. There is a similar question regarding this issuue https://github.com/ptv-logistics/Leaflet.NonTiledLayer/issues/23

Oli