heigeo / leaflet.wms Goto Github PK

Expand #1 to support tiled layers.

Is there a solution/suggestion/plugin for drill down identify for displaying results?
I noticed that when there are some WMS layers activated and I click anywhere, one identify task for each layer is executed, but only the last processed is displayed.

Thanks in advance

Currently the only thing that this plugin does not have is proxy option to set the proxy file, so that someone can by pass the cors issue. So, if you add this option that will be great.

thanks

When using the leaflet.wms example with the latest version of leaflet (either git master or the 0.8-dev zip file), in the tiled mode the tiles load visibly and then become blank within about one second (their opacity gets set to 0).

When zooming the map in and out or moving the map around, the tiles become visible again.

It does not happen with the version of leaflet that comes with leaflet.wms.

I'd like to recreate this example (http://leafletjs.com/examples/choropleth/) with a WMS layer in stead of a geoJSON.

Is it possible to let the user hover his mouse over the rastercells, get the FeatureInfo and display this into the infobox?

The featureinfo is only capable of responding in application/json.

Hello, I am using the plugin and I would like to remove a sublayers from the map. Is this possible or do I have to remove the entire layer and then add the rest of sublayers that I already had?

	alumbrado = L.WMS.source("http://localhost:8080/geoserver/Malaga/wms", {
		format : 'image/png',
		maxZoom : 30,
		transparent : true,
		continuousWorld : true,
		identify : false,
		cql_filter : "(cod_mun = 29007);(cod_mun = 29007)"

	});
	
	alumbrado.getLayer("redes_distribucion_l").addTo(map);	
	alumbrado.getLayer("alumbrado").addTo(map);	

Should support upscaled image loading for high resolution devices, like L.TileLayer.WMS does.

The one caveat is that vector-backed layers (labels etc.) might need to be rendered at their normal size even on retina displays or they'll be too small.

var options = {
        transparent: true,
        format: 'image/png'
      }
 var source = window.L.WMS.source(
        'http://e/geoserver/FAST/wms',
        options
      )
      source.addSubLayer('layer')

works fine. but
var options = {
transparent: true,
format: 'image/png',
tiled:true }
the tile is 0*256 and not show
leaflet 1.3 ,chrome latest

Incorporate/enable/test the ability to specify a custom leaflet pane for a source (and it's underlying Overlay/Tile layer).

• Ordering WMS layers within a source is discussed in #19
• Ordering a WMS source among other leaflet layers is handled by #28 (edit: but see #6 (comment))

It seems that the delete button doesn't work in leaflet.draw after scrolling and while L.WMS.source is active. I put together a quick jsfiddle. http://jsfiddle.net/ysggo1b5/

Steps to replicate:

1. Draw a polygon.
2. Press the delete button. You should be able to delete the polygon if you haven't scrolled and/or zoomed yet.
3. Scroll/zoom on the map. You will no longer be able to delete the polygon.
4. If you comment out the line "overlays['Counties']={layer:source.getLayer('county_borders').addTo(map)};" (or just .addTo(map)), reload, and repeat the steps the polygon is now always removable.

So In my setup I have a GeoServer setup to provide WMS.

When I provide my source I generally want to source the cached tiles using the GeoWebCache url for GeoServer (eg. http://myserver.com/geoserver/gwc/service/wms)

However, GeoServer does not provide GetFeatureInfo capability at that url. Instead you have to use the standard wms url (which is not cached).

So could we add a parameter to the GetFeatureInfo to provide an optional url which the GetFeatureInfo would use rather than the base source url?

Thanks.

Andrew you mentioned this in your email. I have a series of layers using the same service, but they all have different opacities. Instead of using the same L.WMS.Source I'm forced to add each one as a L.WMS.Overlay. I would like to be able to support having opacities defined per layer so that only a single request is called to the server instead of a request per layer.

In L.WMS.Overlay, it would be useful to be able to specify a geographic (or pixel) buffer around the WMS request to avoid any edge artifacts and provide a nicer panning experience. The image requested would thus be larger than the viewport size - potentially much larger if a geographic buffer is used. This is roughly analogous to (but not quite the same as) the keepBuffer option in L.GridLayer and L.TileLayer.WMS.

This could be implemented in conjunction with #11.

Hi,

thanks for you great peace of code. I love the embedded popup function.
But it's not working as expected.
Clicking on a WMS feature gives me
"X and Y incorrectly specified".
The WMS is coming from my hosted geoserver with ESPG: 3857
Do you have a clue what I have to change?
Thanks

edit: If you need the code I can publish it on a JSFiddle

I have access to MYGEOSERVER and have activated CORDS. Nevertheless, the following error message appears:

Load denied by X-Frame-Options: http://MYGEOSERVER:8080/geoserver/wms?service=W…254406%2C7472483.88515883&query_layers=MYLAYER&X=766&Y=222 does not permit cross-origin framing.

What do I have to do?

How could I add extra parameters to the getFeatureInfo request

var source = L.WMS.source(
"http://maps.nationalparks.gov.uk/geoserver/wms",
{
"format": "image/png",
"transparent": "true",
"identify": false
}
)

var planapps = source.getLayer('dartmoor:dnpa_planapps');
planapps.addTo(map);

L.WMS.Source.extend({
'getFeatureInfoParams': function(point,layers){
info_format': 'text/html',
feature_count: 10,
propertyName: 'appcode,url'
}
});

Great plugin by the way.

L.WMS.TileLayer supports maxNativeZoom (since it's a L.TileLayer option) but L.WMS.Overlay does not. This could be implemented in conjunction with #11 and #35.

Notes on how to replace code using L.tiledLayer.wms with L.WMS.source.

I done whole process and finally get information from wms layer but now put Leaflet.draw plugin in my code. but laeflet.wms toolbar is not showing.
Any one have idea regarding this....

http://webservices.nationalatlas.gov/ is not available. Temporary or new URL?

Is it possible to programmatically know how many Identify (GetFeatureInfo) are going to be fired when user clicks the map? I ask this as a starting point to solve #45.

Thanks

The original leaflet function to set opacities on layers isn't working

In both the tiled and untiled mode, toggling the layers in the layer switcher rearrange the order of the layers in the WMS request.

How to reproduce:

• Load example and notice the order of the layers param: timezones,lakesrivers,airports,statecap
• Uncheck and subsequently check the 'Time Zones' layer
• Notice that the layers param is now: lakesrivers,airports,statecap,timezones

This may be related to #6.

Add support for a simple identify function, using the WMS GetFeatureInfo API.

In refreshOverlay Object.keys is used which is available in IE9 onwards but not in IE8.

IIRC, Leaflet still plans to support IE8 in version 1.x. Are you planning on staying in line with Leaflet by supporting IE8 for leaflet.wms?

Currently L.WMS is only assigned when using Leaflet as a global, so you can't do this:

define(['leaflet', 'leaflet.wms'], function(L) {
    var source = L.WMS.source(...);
});

Instead you have to do this:

define(['leaflet', 'leaflet.wms'], function(L, wms) {
    var source = wms.source(...);
});

It might be less confusing (and more consistent with other plugins) to support both options when running in AMD.

There has been no activity on this plugin for quite some time. Is this plugin dead or just dormant?

First say that is a wonderful plugin that works perfectly with wms layers, but to be perfect how it could be implemented this plugin to view information of a request getfeaturelegend ?

To enable geoserver wms service with geowebcache is needed to pass tiled=true as param, but this is filtered by leaflet.wms :(
http://docs.geoserver.org/stable/en/user/webadmin/tilecache/defaults.html#enable-direct-integration-with-geoserver-wms

I'm trying to switch from L.TileLayer.wms to L.WMS. However, nodata pixels which were rendered transparent in L.TileLayer.wms are black with L.WMS. Here is my old and new code:

var overlay_GBRBGS1625kBedrockLithology_0 = L.tileLayer.wms('http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms?', {
    layers: 'GBR_BGS_625k_BLT',
    format: 'image/png',
    uppercase: true,
    transparent: true,
    continuousWorld : true,
    opacity: 1.0
});

var overlay_GBRBGS1625kBedrockLithology_0 = L.WMS.source("http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms?", {
    'transparent': true,
    tiled: true
});
overlay_GBRBGS1625kBedrockLithology_0.getLayer("GBR_BGS_625k_BLT").addTo(map);

Am I missing something?

Hey there, setting minZoom and maxZoom is really important for big layers, in order to handle performance. These appear to not be handled properly with this addon.

This might be a little hard to describe, and it also may be particular to my environment, but in the first section of code where there is the function factory stuff, my site is failing with an error like 'this.L is not defined'. Changing that first section as follows fixes my issue:

(function (factory) {
    // Module systems magic dance, Leaflet edition
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['leaflet'], factory);
    } else if (typeof module !== 'undefined') {
        // Node/CommonJS
        module.exports = factory(require('leaflet'));
    } else {
        // Browser globals
        if (typeof window.L === 'undefined')
            throw 'Leaflet must be loaded first!';
        // Namespace
        window.L.WMS = window.L.wms = factory(window.L);
    }
}(function (L) {

I'd be happy to submit a pull request with this trivial change, but I'm not sure if it's a sane fix.

Now that Leaflet 1.0.0 is released, could this be updated to a regular Leaflet release version? Right now I'm forcing all bower resolutions to 1.0.1 in my projects.

Don't know how to import L.WMS in React. I am new to this React and leaflet.

Here is the code:

import 'leaflet/dist/leaflet.css';
import L from 'leaflet.wms/lib/leaflet';
import 'leaflet.wms/dist/leaflet.wms';
import 'leaflet.wms/lib/require';

class App extends Component {
  componentDidMount() {   
   var map1 = L.map("map").setView([27.664198, 85.361624], 5);
    var BaseOsm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map1);
    map1.setView([-29.764377375163114, 147.3486328125
    ]);

    // var stComerciaisLayer= L.tileLayer.wms("http://localhost:8080/geoserver/nyc/wms", {
    //     layers: 'nyc:wind_direction',
    //     format: 'image/png',
    //     transparent: true,
    //     attribution: "Algum texto de teste"
    //   }).addTo(map1);

    var source = L.WMS.source("http://localhost:8080/geoserver/nyc/wms", {
      'transparent': true
    });


    source.getLayer('nyc:wind_direction').addTo(map1);

  }

  render() {
    return (
      <div style={{ width: 600, height: 600 }} id="map">

      </div>
    );
  }
}
export default App; ```

Integrate legend support (edit: using GetLegendGraphic). The main question is where to put the legend - probably in a custom control that defaults to the bottom left.

I needed an option to add Options to each layer I add with getLayer() funcion. My solution was:

Under

wms.Source = L.Layer.extend({

add this:

        getLayerWithOptions: function(name, options) {
            return wms.layerWithOptions(this, name, options)
        }, 

then below:

    wms.layer = function(source, options) {
        return new wms.Layer(source, options)
    }

add this:

    wms.layerWithOptions = function(source, layerName, options) {
        return new wms.Layer(source, layerName, options)
    }; 

Initialize layers like this e.g.:

source.getLayerWithOptions("layer1",{time: "1990-2001").addTo(map);

which adds TIME option to this layer only.

There are some cases when map view should be updated without user action (for example when object was deleted on server and client needs to refresh map view automatically).
My simple solution is adding forceUpdate() function to wms.Source class, which adds dummy timestamp parameter to list of WMS parameters, updates overlay and than removes parameter:

'forceUpdate': function () {
    if (this._overlay) {
        this._overlay.setParams({ '_t': ((new Date()).getTime()) });
        delete this._overlay.wmsParams['_t'];
    }
},

Is there any simpler and cleaner solution?

Hello,
I am using leaflet.wms on the next page:

https://lockesoft.ovh/campo/pruebassigpac.php

The problem is that when I retrieve the information with GetFeaturedInfo sometimes I retrieve it as < html >< head >< / head > < body > * Here I receive the information < /body > < / html >

and other times I receive it in the following format:

Why do I receive it one way each time?

I would always be interested in receiving it in the same way, if we cannot format the information

1
In this link tools tab will navigate to the add layer then wms layer opetion will come in that user supposed to add url . In this how the url is being processed can you explain to me . From form user will pass url and layer name i want the code of being processed how the layer is adding to base map and how they are swiping on it can you expalin with reference code Thanks

Hello,

I am trying to use your plugin and activate the getFeatureInfo request on a button click, a separate button using easyButton. I red the docs but there was no mention on how to activate the request on a button press, only on map click event.

Thanks in advance

Hi,
can one show me how to correctly limit the amount of layers that are identified.
I´ve tried an extend like this which unfortunately is not working.

var MySource = L.WMS.Source.extend({
 'getIdentifyLayers': function() {
      var a = ['geonode:tl_2016_us_tbg']
      console.log(a);
      return a;
    }
    }
});


var source = new MySource("http://node.local/geoserver/wms", {
    'transparent': true
});

Hello,

I am currently using leaflet 1.3.1 and I am loading the WMS in a single image, but when I try to go through the sld_body a style that I have had to generate dynamically tells me that the URL is too large, would there be any way to pass the parameters by the POST method instead of the GET method? I want the WMS images to geoserver. Here is an example:

            url = url_geoserver + "/wms/reflect?sld_body=" + sld_body;

            var capa_wms = L.WMS.source(url, {
                format: 'image/gif',
                version: '1.3.0',
                maxZoom: 30,
                transparent: true,
                cql_filter: valor_filtrado,
                zIndex: zIndex_elemento,
                env: env,
                test: val,
                tiled: false,
            });

            capa_wms.getLayer(nombre_capa).addTo(map);

Thank you

It looks like somethings not right with the example from git. The time slider is static. I copied over the code from your working example on github pages and that is working fine for me, but the clone has the broken slider.

Ensure any important events are properly propagated from the "real" layers to the virtual layers.

Hey there. Thx for a great plugin. I´m testing on wms by my wms setup from qgiscloud.com, but fails (nothing shows up in layer), Maybe it´s my CRS. Is there restrictions on CRS, and is it only working with CRS 4326?

This should just work, but has not been tested.

When adding multiple WMS layers to one source, a new request gets sent for every layer added, potentially resulting very slow layer loading.

Example: when adding layers a, b, and c, there will be the following 3 WMS requests:

• layers=a
• layers=a,b
• layers=a,b,c

It would be desirable to have something like wms.source.addLayers() that would only send a request once all layers have been added.

In the update function it looks like the opacity is set to 1 instead of using what was defined in the options.

This is with Leaflet 1.0.0-rc3 (not tried any other versions):

If you create an instance of Leaflet map and add one or more wms layers, then try to remove the map instance with map.remove() an error is generated: Uncaught TypeError: layer.onRemove is not a function

I'll rephrase, as I opened this issue in leaflet repo.

It shows that leaflet does not do any reprojection. So if using layers with different CRSs, although both references are known (basemap in 3857, and overlay in 4326) no reprojection is made.