Add asynchronous loading and removing functionality

openstreetmap · Sep 5, 2024 · d8561c7 · d8561c7
1 parent 61737a7
commit d8561c7
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 4 deletions.
diff --git a/leaflet-osm.js b/leaflet-osm.js
@@ -82,7 +82,8 @@ L.OSM.DataLayer = L.FeatureGroup.extend({
   options: {
     areaTags: ['area', 'building', 'leisure', 'tourism', 'ruins', 'historic', 'landuse', 'military', 'natural', 'sport'],
     uninterestingTags: ['source', 'source_ref', 'source:ref', 'history', 'attribution', 'created_by', 'tiger:county', 'tiger:tlid', 'tiger:upload_uuid'],
-    styles: {}
+    styles: {},
+    asynchronous: false,
   },
 
   initialize: function (xml, options) {
@@ -101,7 +102,7 @@ L.OSM.DataLayer = L.FeatureGroup.extend({
     }
 
     for (var i = 0; i < features.length; i++) {
-      var feature = features[i], layer;
+      let feature = features[i], layer;
 
       if (feature.type === "changeset") {
         layer = L.rectangle(feature.latLngBounds, this.options.styles.changeset);
@@ -122,7 +123,12 @@ L.OSM.DataLayer = L.FeatureGroup.extend({
         }
       }
 
-      layer.addTo(this);
+      if (this.options.asynchronous) {
+        setTimeout(() => layer.addTo(this));
+      } else {
+        layer.addTo(this);
+      }
+
       layer.feature = feature;
     }
   },
@@ -188,7 +194,28 @@ L.OSM.DataLayer = L.FeatureGroup.extend({
     }
 
     return false;
-  }
+  },
+
+  onRemove: function(map) {
+    this.eachLayer(map.removeLayer, map, this.options.asynchronous);
+  },
+
+  onAdd: function(map) {
+    this.eachLayer(map.addLayer, map, this.options.asynchronous);
+  },
+
+  eachLayer: function (method, context, asynchronous = false) {
+    for (let i in this._layers) {
+      if (asynchronous) {
+        setTimeout(() => {
+          method.call(context, this._layers[i]);
+        });
+      } else {
+        method.call(context, this._layers[i]);
+      }
+    }
+    return this;
+  },
 });
 
 L.Util.extend(L.OSM, {

diff --git a/test/osm_test.js b/test/osm_test.js
@@ -136,6 +136,71 @@ describe("L.OSM.DataLayer", function () {
     layers(osm)[0].options.should.have.property("color", "blue");
   });
 
+  describe("asynchronously", function() {
+    function sleep(time = 0) {
+      return new Promise(res => {
+        setTimeout(() => res(), time);
+      });
+    }
+
+    it("can be added to the map", function () {
+      (new L.OSM.DataLayer(null, {asynchronous: true})).addTo(this.map);
+    });
+
+    it("creates a Polyline for a way", async function () {
+      var osm = new L.OSM.DataLayer(fixture("way"), {asynchronous: true});
+      await sleep(1);
+      layers(osm).length.should.eq(21);
+      layers(osm)[20].should.be.an.instanceof(L.Polyline);
+    });
+
+    it("creates a Polygon for an area", async function () {
+      var osm = new L.OSM.DataLayer(fixture("area"), {asynchronous: true});
+      await sleep(1);
+      layers(osm).length.should.eq(15);
+      layers(osm)[14].should.be.an.instanceof(L.Polygon);
+    });
+
+    it("creates a CircleMarker for an interesting node", async function () {
+      var osm = new L.OSM.DataLayer(fixture("node"), {asynchronous: true});
+      await sleep(1);
+      layers(osm).length.should.eq(1);
+      layers(osm)[0].should.be.an.instanceof(L.CircleMarker);
+    });
+
+    it("creates a Rectangle for a changeset", async function () {
+      var osm = new L.OSM.DataLayer(fixture("changeset"), {asynchronous: true});
+      await sleep(1);
+      layers(osm).length.should.eq(1);
+      layers(osm)[0].should.be.an.instanceof(L.Rectangle);
+    });
+
+    it("sets the feature property on a layer", async function () {
+      var osm = new L.OSM.DataLayer(fixture("node"), {asynchronous: true});
+      await sleep(1);
+      layers(osm)[0].feature.should.have.property("type", "node");
+      layers(osm)[0].feature.should.have.property("id", "356552551");
+    });
+
+    it("sets a way's style", async function () {
+      var osm = new L.OSM.DataLayer(fixture("way"), {styles: {way: {color: "red"}}, asynchronous: true});
+      await sleep(1);
+      layers(osm)[20].options.should.have.property("color", "red");
+    });
+
+    it("sets an area's style", async function () {
+      var osm = new L.OSM.DataLayer(fixture("area"), {styles: {area: {color: "green"}}, asynchronous: true});
+      await sleep(1);
+      layers(osm)[14].options.should.have.property("color", "green");
+    });
+
+    it("sets a node's style", async function () {
+      var osm = new L.OSM.DataLayer(fixture("node"), {styles: {node: {color: "blue"}}, asynchronous: true});
+      await sleep(1);
+      layers(osm)[0].options.should.have.property("color", "blue");
+    });
+  });
+
   describe("#buildFeatures", function () {
     it("builds a node object", function () {
       var features = new L.OSM.DataLayer().buildFeatures(fixture("node"));