2

The map has a farmLayer of points and a paddockLayer of polygons. (In some countries farmers use the term field instead of paddock.) When the farm is selected with a double click the farmLayer is removed. How do I display the paddockLayer and zoom to the extent?

(The paddockLayer was setup in an almost identical way to the farmLayer using forEachFeature without the numerical extension.)

https://gis.stackexchange.com/a/182594/36168 uses map.fitBounds(event.layer.getBounds());. I understanding there is a map variable scope issue in the function but map.fitBounds(e.paddockLayer.getBounds()); does not work. (This is my first javascript experience and I'm still confused by how functions work.)

I tried setView as a workaround but it removed the paddockLayer from the map and I want to display paddocks for farms in other areas anyway.

function forEachFeature1(feature, layer) {
  layer.on("dblclick", function (e) {
    map.removeLayer(farmLayer);
    // zoom to paddocks **** fix this - See https://gis.stackexchange.com/a/182594/36168
    map.fitBounds(paddockLayer.getBounds());
    map.setView(L.LatLng([-37.045, 145.175], 15));
    // bug above disables next line
    paddockLayer.addTo(map);
  });
}

var farmLayer = L.geoJSON(null, {
  onEachFeature: forEachFeature1,

  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, {
      radius: 6,
    });
  },
});

$.getJSON(farmurl, function (data) {
  farmLayer.addData(data);
  // zoom to farmLayer
  map.fitBounds(farmLayer.getBounds(), { padding: [12, 12] });
  farmLayer.addTo(map);
});

farmLayer

{
   "type": "FeatureCollection",
   "features": [
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 145.08141,-37.029435 ]
    },
    "properties": {
    "No":1,
    "Name":"Landfill",
    "Address":"470 Seymour-Tooborac Road Hilldene",
    "Quality":"success"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 145.044388,-37.016336 ]
    },
    "properties": {
    "No":2,
    "Name":" Mitchell Fixed Wing Aero Club",
    "Address":" 470 Seymour-Tooborac Road Hilldene",
    "Quality":"doubt"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 145.190301,-37.0683 ]
    },
    "properties": {
    "No":3,
    "Name":" Brave Goose Vineyard Seymour",
    "Address":" 8803 Goulburn Valley Hwy Whiteheads Creek VIC 3660",
    "Quality":"success"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 145.168831,-37.048044 ]
    },
    "properties": {
    "No":4,
    "Name":" Reserve",
    "Address":" 9088 Goulburn Valley Hwy Seymour VIC 3660",
    "Quality":"success"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 145.14639,-37.026005 ]
    },
    "properties": {
    "No":5,
    "Name":" GVR Quarry",
    "Address":" 5 Selectors Rd Seymour VIC 3660",
    "Quality":"doubt"
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 145.192433,-37.02886 ]
    },
    "properties": {
    "No":6,
    "Name":" Masjid Al-Sahabah",
    "Address":" 22 Dempsey Rd Seymour VIC 3660",
    "Quality":"success"
    }
  }
]
}

PaddockData stripped from geoJSON file

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stroke": "#0000ff",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "fill": "#555555",
        "fill-opacity": 0,
        "Layer": "Paddock",
        "Name": "Motocross Track",
        "fill-opacity": 0,
        "stroke": "#0000ff"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [145.17590001225471,-37.04998716119057],
            [145.18051207065582,-37.05155092516036],
            [145.18172979354858,-37.05046346505919],
            [145.17880082130432,-37.04861817230589],
            [145.17590001225471,-37.04998716119057]
          ]
        ]
      }
    }
  ]
}
  • 1
    For starters, your farm data is not valid JSON: the coordinates key is repeated. Do you mean to have three different points? A MultiPoint geometry? Second thing: what's the relationship between farms and paddocks? Are they spatially related (i.e. one inside the other)? Clicking on a farm zooms to which paddock(s)? – IvanSanchez Oct 9 at 9:08
  • Put in actual farm data. Paddock data is a demonstration polygon. There is a relationship of many paddocks per farm which would be done with a query. I don't think that is the issue, I haven't presented it or even worked out how to do it yet. – nealei Oct 9 at 10:14
  • 1
    There's nothing obviously wrong, see plnkr.co/edit/j4kbFQJUEsJzXx1A . Maybe you should create a better reproducible example? Do read stackoverflow.com/help/minimal-reproducible-example – IvanSanchez Oct 9 at 11:07
  • Your example is very enlightening, testing that code thoroughly. I'm thinking it has something to do with my test environment - Chrome without web security. I'll test your code in my environment and vice versa. – nealei Oct 9 at 22:53
  • 1
    I have a general point: please name your functions with names that speak for themselves. Your forEachFeature1 could be named forEachFarmFeature, or, to be even less confusing, use the nomenclature of leaflet, where it is onEachFeature, so it should probably be onEachFarmFeature. – til_b Oct 12 at 11:16

Your Answer

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

Browse other questions tagged or ask your own question.