0

I'm back with my Leaflet.motion service because I'd like to link it to an existing WFS service for easier and live updating.

The Javascript plugin for WFS and Leaflet motion are:

  <script src="https://iamtekson.github.io/leaflet-geoserver-request/src/L.Geoserver.js"></script>
 <script src="https://mappingforyou.eu/javascript/leaflet.motion.min.js"></script>

I have the error: "Uncaught TypeError: wfsLayer.features is undefined"

The code successfully loads the WFS onto the map:

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

dataCoords = [];

wfsLayer.features[0].geometry.coordinates.forEach(function(coords) {   dataCoords.push([coords[1], coords[0]]); });

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

But it's not showing the motion

the wfs service is https://mappingforyou.eu/geoserver/worldmap/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=worldmap%3Adebra&maxFeatures=50&outputFormat=text%2Fjavascript

Any help please?

page is at https://mappingforyou.eu/italia/test1.html

12
  • is there any response from the server? if so what is it? what is sent to the server?
    – Ian Turton
    Jun 9 at 13:25
  • @IanTurton from the console I have Uncaught TypeError: featureLayer.features is undefined
    – Vincent Dc
    Jun 9 at 13:27
  • what about in the network tab? and please use the edit button to update your question
    – Ian Turton
    Jun 9 at 14:07
  • @IanTurton the WFS is found but not showing, I edited the question, It's found at mappingforyou.eu/italia/test1.html
    – Vincent Dc
    Jun 9 at 14:58
  • Your are loading WFS layer featureLayer async, so featureLayer.features[0] is available only after layer is loaded. You are probably referencing it before that.
    – TomazicM
    Jun 9 at 16:53

1 Answer 1

1

L.Geoserver.wfs is async method, so any data in wfsLayer is accessible only after layer is loaded. L.Geoserver.wfs is extension of L.FeatureGroup which means it fires layeradd event after layer is loaded/added.

Since the above L.Geoserver.wfs call returns MultiLineString, this has to be checked when converting geometry to array of coordinates.

Taking all this into account, code could look something like this (tested):

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-male 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();
});

wfsLayer.addTo(map);
1
  • Thank you for your time @TomazicM . It's working . Now I'll try my best to study and understand what has changed between the two versions.It'll be very useful to me. By the way I still havve trouble to understand the word "asynchronous" in this matter..
    – Vincent Dc
    Jun 10 at 21:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.