iamtekson / leaflet-geoserver-request Goto Github PK

Hi there,

I'm getting a odd problem with callbacks that more often than not don't work. If I disable caching and empty cache and force a refresh it will occassionally work which is very frustraing that it's not 100% repeatable. The vast majority of the time though this error is thrown. It's as if it hasn't picked up the definition of getJson before it's used. As I say incognito or forcing clearing cache does seem to work occassionaly then I make a change deploy again and get error back.

I'm using Leaflet 1.9.4 and JQuery 3.5.1.

my code is:

surveyDates = L.Geoserver.wfs("https://maps.redacted-server-name-here.com/geoserver/wfs", {
    layers: "poa:SurveyDates",
    onEachFeature: function (feature, layer) {
        if (feature.properties?.name && feature.properties?.lastSurvey) {
            let survey = " last surveyed: " + new Date(feature.properties.lastSurvey);
            layer.bindTooltip(feature.properties.name + survey);
        }
        if (feature.properties.surveyType == 1) {
            layer.setStyle({ fillColor: '#dc4405' });
        } else {
            layer.setStyle({ fillColor: '#477A7B' });
        }
    }
});

Error is:

Object 'parsererror' Error: getJson was not called
at Function.error (jquery.js:334:9)
at s.converters.script json (jquery.js:10232:12)
at ajaxConvert (jquery.js:9260:19)
at done (jquery.js:9736:15)
at HTMLScriptElement.callback (jquery.js:10170:8)
at HTMLScriptElement.dispatch (jquery.js:5429:27)
at elemData.handle (jquery.js:5233:28)
wfs?callback=getJson&service=WFS&version=1.1.0&request=GetFeature&typename=poa%3ASurveyDates&CQL_FILTER=INCLUDE&srsname=EPSG%3A4326&outputFormat=text%2Fjavascript&format_options=callback%3A%20getJson&=1687773981153:1 Uncaught ReferenceError: getJson is not defined
at wfs?callback=getJson&service=WFS&version=1.1.0&request=GetFeature&typename=poa%3ASurveyDates&CQL_FILTER=INCLUDE&srsname=EPSG%3A4326&outputFormat=text%2Fjavascript&format_options=callback%3A%20getJson&=1687773981153:1:2
(anonymous) @ wfs?callback=getJson&service=WFS&version=1.1.0&request=GetFeature&typename=poa%3ASurveyDates&CQL_FILTER=INCLUDE&srsname=EPSG%3A4326&outputFormat=text%2Fjavascript&format_options=callback%3A%20getJson&_=1687773981153:1

In case it's relevant I'm also seeing this error

L.Geoserver.js:106 Uncaught TypeError: Cannot read properties of undefined (reading 'fitBounds')
at Object.success (L.Geoserver.js:106:31)
at fire (jquery.js:3496:31)
at Object.fireWith [as resolveWith] (jquery.js:3626:7)
at done (jquery.js:9786:14)
at HTMLScriptElement.callback (jquery.js:10170:8)
at HTMLScriptElement.dispatch (jquery.js:5429:27)
at elemData.handle (jquery.js:5233:28)

This is my call to L.Geoserver and I have an issue, with two different messages on Chrome and Geoserver
I'm using Leaflet.motion as well

var dataCoords = [];

function doMotion() {
  var seqGroup = L.motion.seq([
    L.motion.polyline(dataCoords, {
    color: "MediumVioletRed",
    weight: 10,
    opacity: 0.8
    }, {
      easing: L.Motion.Ease.easeInOutQuad
    }, {
      removeOnEnd: false,
      icon: L.divIcon({html: "<i class='fa fa-hiking fa-2x' aria-hidden='true'></i>", iconSize: L.point(27.5, 24)})
    }).motionDuration(8000)
  ]).addTo(map);
  seqGroup.on("click", function(){
    seqGroup.motionStart();
  });
  seqGroup.on("dblclick", function(e){
    seqGroup.motionToggle();
  });
  setTimeout(function () {
    seqGroup.motionStart();
  }, 1000);
};



var wfsLayer = L.Geoserver.wfs("https://mappingforyou.eu/geoserver/worldmap/ows", {
 layers: "worldmap:debra",
});


wfsLayer.on('layeradd', function(evt) {
  var coords;
  var geometry = evt.layer.feature.geometry;
  if (geometry.type = 'MultiLineString')
    coords = geometry.coordinates[0];
  else if (geometry.type = 'LineString')
    coords = geometry.coordinates;
  else {
    return;
  }
  coords.forEach(function(coords) {
     dataCoords.push([coords[1], coords[0]]);
  });
  doMotion();
});

Hello,

I am using your leaflet-geoserver-request code (thank you for providing it !!!!) on a huge bunch of layers that are controled/displayed via a Layer Control.

I would like to open the according Legend each time a Layer is Added to the map.

I tried to use a layerGroup to associate both the WMS layer and it's Legend in a single Layer triggered by the Control Layer, but unfortunately I have a message that states that the "The provided object is not a Layer".

DO you see a work-around to achieve what I tent to do ???

Thank you for your help.

Regards

Raphael

Here is the code I am using :

var norway_map = L.Geoserver.wms('http://15.236.29.28:8080/geoserver/cymo/wms', {
layers: 'cymo:norway_floodmap' ,
format: 'image/png',
transparent: true,});
var norway_Legend = L.Geoserver.legend("http://15.236.29.28:8080/geoserver/cymo/wms", {
layers: "cymo:norway_floodmap",
});
var norway_flood = L.layerGroup([norway_map, norway_Legend]);

the following message appears when I try to display norway_flood.

Layer.js:163 Uncaught Error: The provided object is not a Layer.
at i.addLayer (Layer.js:163)
at i.eachLayer (LayerGroup.js:123)
at i.onAdd (LayerGroup.js:107)
at i._layerAdd (Layer.js:114)
at i.whenReady (Map.js:1465)
at i.addLayer (Layer.js:176)
at i._onInputClick (Control.Layers.js:383)
at HTMLInputElement.c (DomEvent.js:92)

Thank you for your help one more time !!!!!

I am wondering if there are particular use cases for Using leaflet-geoserver-request over leaflet.tileLayer.wms or if both exist just due to development history and features coming available at different times.

I'm trying to use the Geoserver with WMS 1.3.0 of the german weather service "DWD".
Getting the layer itself with

    var wmsLayer = L.Geoserver.wms('https://maps.dwd.de/geoserver/ows?', {
        layers: 'dwd:Warnungen_Gemeinden',
        version: '1.3.0',
        opacity: 0.5,
        attribution: 'DWD'
    }).addTo(map);

works.

But when I try to get the legend with

    var layerLegend = L.Geoserver.legend('https://maps.dwd.de/geoserver/ows?', {
        layers: 'dwd:Warnungen_Gemeinden',
        style: `stylefile`,
    });
    layerLegend.addTo(map);

I only get the "broken graphic" symbol. When I inspect the source of the page I see that the wrong URI gets built:

<img src="https://maps.dwd.de/geoserver/ows?/wms?REQUEST=GetLegendGraphic&amp;VERSION=1.1.0&amp;FORMAT=image/png&amp;LAYER=dwd:Warnungen_Gemeinden&amp;style=stylefile" alt="legend" data-toggle="tooltip" title="Map legend">

The right URI according to the "getCapabilities" document is

<LegendURL width="306" height="160">
<Format>image/png</Format>
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:href="https://maps.dwd.de/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dwd%3AWarnungen_Gemeinden"/>
</LegendURL>

Or short:
Worngly built: https://maps.dwd.de/geoserver/ows?/wms?REQUEST=GetLegendGraphic&VERSION=1.1.0&FORMAT=image/png&LAYER=dwd:Warnungen_Gemeinden&style=stylefile
Correct according to GeoServer; https://maps.dwd.de/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dwd%3AWarnungen_Gemeinden

When I try to make two or more layers with L.Geoserver.wfs, my layers break (The first layers don't show in the map, and the last layer shows the first layer instead of the correct one.

I want to fix it, but I need assistance, I don't understand the source of the bug

To reproduce see this fork where I tried to define 2 layers wfs1 and wfs2 https://github.com/nez/leaflet-geoserver-request/blob/e1bd8687147950fbc514d9f07e2f27e985a2b6f8/examples/maps.html#L61-L89
(In this example I am trying to make two layers with the same dataset, the first is red, and the second is white with half transparency, so the color should look pale red but it shows white.

There is also the following error in the browser
parsererror Error: getJson was not called
Uncaught ReferenceError: getJson is not defined

Thanks for the great lib and for your assistance

Hi!

I'm using your plugin to load both WMS and WFS layers from a GeoServer instance on a leaflet map inside an Angular app.
WMS are working fine, but when I switched to WFS, I got this error:

JSONP for GeoServer is enabled.
If I try to preview the WFS "Levels" layer from GeoServer web UI, I got the following JSONP data back:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "V_Levels.fid-6ecc0c01_1813d891570_169",
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                7.7826615200000008,
                                45.3871735
                            ],
                            [
                                7.79106001,
                                45.38629957
                            ],
                            ...other coordinates...
                        ]
                    ]
                ]
            },
            "geometry_name": "Geom",
            "properties": {
                "Id": 1,
                "CodRip": 1,
                "CodRegione": 1,
                "CodProvincia": 1,
                "CodComune": 201,
                "CodUts": 201,
                "CodProvinciaComune": 1001,
                "CodIstatComune": "001001",
                "Comune": "Agliè",
                "ComuneAltro": null,
                "Area": 13314604.171518622,
                "Perimetro": 16102.469408787643,
                "ConcentrazioneMedia": 71
            }
        },
        ...other features...
    ],
    "totalFeatures": 7904,
    "numberMatched": 7904,
    "numberReturned": 50,
    "timeStamp": "2022-06-07T10:04:08.658Z",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:EPSG::4326"
        }
    }
}

Layers' configuration

// WORKS!
let boundaries = L.Geoserver.wms('https://mygeoserver.dev/geoserver/wms', {
    layers: 'boundaries:all',
    attribution: '<a href="https://mygeoserver.dev">My data</a>'
});
boundaries.addTo(this.map);

// WORKS!
let wmsLevels = L.Geoserver.wms('https://mygeoserver.dev/geoserver/wms', {
     layers: 'rad:Levels',
     attribution: '<a href="https://mygeoserver.dev">My levels</a>'
});
wmsLevels.addTo(this.map);

// DOESN'T WORK!
let wfsLevels = L.Geoserver.wfs("https://mygeoserver.dev/geoserver/wfs", {
    layers: "rad:Levels",
    attribution: '<a href="https://mygeoserver.dev">My levels</a>'
});
wfsLevels.addTo(this.map);

Since the issue seems to be related to $ jQuery function not being found, I've also tried to add a reference to jquery in my module, but with no success. The jquery npm package is already installed in my application.

import * as $_ from 'jquery';
const $ = $_;