ptv-logistics / leaflet.nontiledlayer Goto Github PK
View Code? Open in Web Editor NEWA leaflet layer for non-tiled overlays.
Home Page: https://ptv-logistics.github.io/Leaflet.NonTiledLayer/
License: ISC License
A leaflet layer for non-tiled overlays.
Home Page: https://ptv-logistics.github.io/Leaflet.NonTiledLayer/
License: ISC License
I'm using your plugin for create a v-leaftlet plugin.When i add nontiledlayer i receive this error message:
this.callInitHooks is not a functioncom.google.gwt.core.client.JavaScriptException: (TypeError) : this.callInitHooks is not a function
Is it possible to develop an event handler for when a WMS process ends? I don't mean the existing error or (EDITED: load) events; simply an end-of-process event. I ask because we use an external weather overlay service which will sometimes do a quiet cancellation when a subsequent request arrives before the old one completes. Specifically, fast scrollwheel zooming is the behavior that leads to this.
Great work!
Is there a possibility to implement the WMS Option for mobile devices : detectRetina: true.
Because the SingleTiles looking very blurry.
It would be nice to have license information associated with this module. What is the license associated to this module ?
If the generated image URL leads to a WMS error (invalid range or something), the image will never be loaded and the load event never fired.
This can be problematic when using it with something that wait for that event (TimeDimension for example)
The noWrap option is not available with non tiled layers, correct ?
Hello,
Thank you for this very useful plugin which saved my day on leaflet development.
It seems that setParams() method of L.NonTiledLayer.WMS does not work when noRedraw is false or not given because line 59 of NonTiledLayer.WMS.js referring to an undefined method redraw(). (Replicated with Leaflet 0.7.3)
I needed this to work because my WMS single-tiled layer updates frequently and periodic refresh by setParams({ foo: random }, false) was crucial for my app.
Ultimately, the issue has sorted out by replacing line 59 with the following
this._update()
Cheers,
Thank you for your suggestion on the other thread (Leaflet/Leaflet#558). Eventually, I came back to NonTiledLayer.
In my app, the L.Map instance and layer instances are instantiated asynchronously (ie NonTiledLayer could be generated before the map is instantiated), so I modified the default pane to tilePane to get around this.
I wonder if the pane option allows some predefined strings (eg. 'tilePane', 'markerPane') as well as pane instances, it will be useful in such circumstances.
Or perhaps a simple 'addAsOverlay' (true = overlayPane / false = tilePane) option would be sufficient because nobody will want to add WMS to the other panes.
http://ptv-logistics.github.io/Leaflet.NonTiledLayer/
When moving on the map nonTiled layers are blinking in Mozilla Firefox 50.1.0. In Chrome all right.
L.Mixin.Events is deprecated and will be removed in future Leaflet builds.
There is one occurance of L.Mixin.Events in src/NonTiledLayer.js which causes a warning when I use the library with the current (1.2.0) Leaflet version.
var L = require('leaflet');
L.NonTiledLayer = (L.Layer \|\| L.Class).extend({
includes: L.Mixin.Events,
I replace L.Mixin.Events with L.Evented.prototype as suggested by @IvanSanchez in this case. However, I am not sure whether this might break compatibility with older Leaflet versions.
ps. I absolutely love your plugin. Been using this for years with pretty much every Leaflet map I make.
Here's a good start for leaflet-nontiledlayer.d.ts.
If this is something you'd like to do, let me know if a pull request is preferred.
I was wondering if NonTiledLayer should not be added to the tilePane
of the map instead of the default one overlayPane
.
Sure I can change it with pane
option.
But I believe theses layers should not belong to overlay by default.
I would be nice to have a package.json with actual version that follows semantic versionning.
And git tags that matches release versions.
It allows a better control on dependencies with npm.
Maybe you want to add your Plugin to https://leafletjs.com/plugins.html. You need only to create a PR in Leaflet
I get the error -
Cannot read property 'insertBefore' of undefined
(line 107 of L.nonTiledLayer.js)
It appears that 'this._pane' is undefined and the functions is trying to add the layer to the beginning (or end) of the undefined array of layers.
I've been looking to try and find what I could use instead of this._pane but have found nothing so far. Please let me know if you can point me in the right direction.
Cheers.
This plugin has support for getfeatureinfo?
Hi!
Thank you for the plugin, great thing!
Tiles are loaded correct and very fast, there is only one problem with my WMS Layer: when I zoom in, the layer(image) is not getting bigger, so the layer seems to move to the upper left corner of the map.
Here you can see what I mean: https://www.gis4event.at/stveit/
This is my code, what am I doing wrong?
map = L.map('map', {
worldCopyJump: true,
zoomSnap: 0.25,
zoomDelta: 0.5,
wheelPxPerZoomLevel: 50,
bounceAtZoomLimits: false,
fadeAnimation: true,
inertia: true,
crs: crs3857,
maxBounds: maxArea,
minZoom: 16,
maxZoom: 20
});
...
layer = new L.NonTiledLayer.WMS("https://www.gis4event.at/...", {
layers: "layername",
format: "image/png",
transparent: true,
maxZoom: 25,
crs: L.CRS.EPSG4326
}).addTo(map);
Since the 'load' event (triggered when all tiles finish loading) is supported, it would make sense to also support the 'loading' event (triggered when a tile starts loading).
I assume the implementation is very easy. As a workaround I simply added
this.fire('loading');
to the _update function, though I'm not sure that is the correct approach.
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
In the getImageUrl the bounding bbox is using the pixel location (as appose to lat/lng) for the corner points in the URL. It's my understand that the WMS bounding box is suppose to be lat/lngs, am I miss understanding something?
When we made the following changes it worked with our wms server:
`
wmsParams.width = width
wmsParams.height = height
const degNW = bounds.getNorthWest()
const degSE = bounds.getSouthEast()
const url = this._wmsUrl
const bbox = (this._wmsVersion >= 1.3 && this._crs === L.CRS.EPSG4326 ?
[degSE.lat, degNW.lng, degNW.lat, degSE.lng] :
[degNW.lng, degSE.lat, degSE.lng, degNW.lat]).join(',')`
I could use your NonTiledLayer with the default projection EPSG3857 but when I change it in the map creation to L.CRS.EPSG4326, I get a distorted image.
Here is a screenshot calling the WMS with Tiled layer: https://www.dropbox.com/s/bnsau2s5nvhubwq/LeafletTiled-4326.png?dl=0
Here is the screenshot with the NonTiledWMSLayer: https://www.dropbox.com/s/deqxzzzwi50vpt2/LeafletNonTiled-4326.png?dl=0
I get a bad height (and width ?) for the image in the WMS request ?
there it is: http://eumetview.eumetsat.int/geoserv/wms?service=WMS&request=GetMap&version=1.3.0&layers=meteosat%3Anatural&styles=&format=image%2Fpng8&transparent=true&maxZoom=8&crs=EPSG%3A4326&time=2015-11-27T09%3A30%3A00.000Z&width=1904&height=383&bbox=-167.34375,-33.75,167.34375,33.57421875
Beware the images are only kept for 3 days.
Just in case the quikc and dirty source code is here: https://github.com/gaubert/mapivor/blob/master/mapivor-server/eumetview.js
look for the draw_map function which is creating all the layers.
Any idea why the computed height is so small ?
Why does it work for the tiled version ?
Any lead would be great.
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.