Git Product home page Git Product logo

leaflet.nontiledlayer's Introduction

Leaflet.NonTiledLayer

Build status NPM version Leaflet compatible!

Purpose

While Leaflet handles the de-facto standard for stitching a map from tiles very well, there is no concept for imagery data that cannot be queried in tiles.

Not all imagery providers can handle tiles properly, for example if they render labels dynamically. So we've added a Leaflet.NonTiledLayer, which gets the imagery for the complete map viewport whenever it changes. Leaflet.NonTiledLayer.WMS is the implementation that makes WMS requests, similar to the TileLayer.WMS.

You can see a demo here:

https://ptv-logistics.github.io/Leaflet.NonTiledLayer/index.html

It uses the WMS service of PTV xServer internet, which requires a tiled/non-tiled hybrid approach (and that is the reason we've built this). The sample also displays some 3rd-party WMS overlays that also cannot be requested in tiles.

The layer supports Leaflet 1.7.x.

Installation

Install using npm:

npm install leaflet.nontiledlayer

Or yarn:

yarn add leaflet.nontiledlayer

Or use the latest build at https://unpkg.com/leaflet.nontiledlayer/dist/

The supported options

  • attribution - the attribution text for the layer data. Default: ''
  • opacity - the opacity value between 0.0 and 1.0. Default: 1.0
  • minZoom - the minimum zoom level for which the overlay is requested. Default: 0
  • maxZoom - the maximum zoom level for which the overlay is requested. Default: 18
  • bounds - the geographic bounds of the layer. Default: L.latLngBounds([-85.05, -180], [85.05, 180])
  • zIndex - z-index of the overlay. Default: undefined
  • pane - the name of the pane where the child div is inserted. Default: 'overlayPane'
  • pointerEvents - the pointer-events style for the overlay. Default: null
  • errorImageUrl - the url of the image displayed when the layer fails to load (invalid request or server error). Default: 1px transparent gif data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==
  • useCanvas - use the canvas to render the images, fixes flickering issues with Firefox, doesn't work on IE8. Setting it to undefined will use canvas, if available. Default: undefined
  • detectRetina - doubles the actual image size requested, if the Browser is in retina mode. Default: false
  • crossOrigin - enables cross origin capabilities. Valid values are 'anonymous' and 'use-credentials'. Default: undefined

The pane and zIndex properties allow to fine-tune the layer ordering. For example, it is possible to insert a NonTiledLayer between two layers of the tilePane, like the labels here, or on top of the vector shapes, like the labels here or here.

You can build your own NonTiledLayer by inheriting from NonTiledLayer and implementing either the function getImageUrl or getImageUrlAsync. The getImageUrl just returns an uri and is used by the WMS implementation. The getImageUrlAsync can be used for services that not only return images, but also additional context information for interaction. The project here uses this method.

leaflet.nontiledlayer's People

Contributors

bielfrontera avatar cacaocow avatar dependabot[bot] avatar jonkoops avatar marcoschmitt avatar oliverheilig avatar ram-one avatar xserverinternet avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

leaflet.nontiledlayer's Issues

Default pane invalid

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.

Event handler for end of process

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.

Issue when using EPSG4326 Projection

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

this.reset() seems not implemented

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,

Vaadin Plugin

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

Version control (npm)

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.

WMS getImageUrl Question

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(',')`

Support the 'loading' event

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.

Replace L.Mixin.Events with L.Evented

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.

Different width and height of map and NonTileyLayer

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

WMS goes to upper left corner when zooming in

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);

Pane option

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.

bringToBack and bringToFront not working

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.

Licence information

It would be nice to have license information associated with this module. What is the license associated to this module ?

WMS Option detectRetina

Great work!

Is there a possibility to implement the WMS Option for mobile devices : detectRetina: true.

Because the SingleTiles looking very blurry.

Error Handling

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.