Working on optimizing polygons

Geocodio · Feb 9, 2019 · 1c7d88c · 1c7d88c
1 parent 982aa09
commit 1c7d88c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 43 deletions.
diff --git a/docs/polygons.html b/docs/polygons.html
@@ -22,11 +22,11 @@
       source: function (x, y, z) {
         return `https://maps.geocod.io/tiles/base/${z}/${x}/${y}.png`;
       },
-      zoom: 5,
-      center: [38.86530697026126, -77.20057854052735]
+      zoom: 10,
+      center: [37.8, -122.4]
     });
 
-    map.addPolygon(new LightningMaps.Polygon('data/tl_2018_us_cd116.json'));
+    map.addPolygon(new LightningMaps.Polygon('https://gistcdn.githack.com/mpmckenna8/af23032b41f0ea1212563b523e859228/raw/0cbceeedf57d9bf2e723f57d19e923591b9249a0/schoolsca.topojson', 'caschools'));
     </script>
   </body>
 </html>
diff --git a/src/Polygon.js b/src/Polygon.js
@@ -1,20 +1,19 @@
 import { defaultPolygonOptions } from './defaultOptions';
 import TileConversion from './TileConversion';
 import { geoPath, geoTransform } from 'd3-geo';
-import { mesh } from 'topojson-client';
-
-const POLYGON_CACHE = {};
+import { feature } from 'topojson-client';
 
 export default class Polygon {
-  constructor(sourceUrl, options = {}) {
+  constructor(sourceUrl, objectName, options = {}) {
     this._sourceUrl = sourceUrl;
+    this._objectName = objectName;
     this._options = Object.assign({}, defaultPolygonOptions, options);
     this._geometry = null;
 
     fetch(this._sourceUrl)
       .then(response => response.json())
       .then(json => {
-        this._geometry = json;
+        this._geometry = feature(json, json.objects[this._objectName]);
       })
       .catch(err => console.log(`Could not load ${this._sourceUrl}: ${err.message || err}`));
   }
@@ -35,51 +34,52 @@ export default class Polygon {
     context.fillStyle = this.options.color;
     context.strokeStyle = this.options.color;
 
-    this.mapState = mapState;
+    if (!this._projectedGeometry) {
+      this._projectedGeometry = this._geometry.features.map(feature => {
+        return {
+          ...feature,
+          geometry: this.projectGeometry(feature.geometry)
+        };
+      })
+    }
 
-    const center = [
-      this.mapState.canvasDimensions[0] / 2,
-      this.mapState.canvasDimensions[1] / 2
-    ];
+    /*
+    if (!this.path) {
+      this.mapState = mapState;
 
-    const transform = geoTransform({point: this.projectPoint, mapState, center });
+      const center = [
+        this.mapState.canvasDimensions[0] / 2,
+        this.mapState.canvasDimensions[1] / 2
+      ];
 
-    const path = geoPath(transform).context(context);
+      const transform = geoTransform({point: this.projectPoint, mapState, center });
+
+      this.path = geoPath(transform).context(context);
+    }
 
     context.beginPath();
-    path(mesh(this._geometry));
+    this.path(this._geometry);
+    context.fill();
     context.stroke();
+    */
   }
 
-  projectPoint(x, y) {
-    const cachedPosition = (x, y, mapState) => {
-      const cacheKey = JSON.stringify([
-        [y, x], this.mapState.center, this.mapState.zoom,
-        this.mapState.tileSize, this.mapState.canvasDimensions
-      ]);
-
-      if (cacheKey in POLYGON_CACHE) {
-        return POLYGON_CACHE[cacheKey];
-      }
-
-      const position = TileConversion.latLonToPixel(
-        [y, x],
-        this.mapState.center,
-        this.mapState.zoom,
-        this.mapState.tileSize,
-        this.mapState.canvasDimensions
-      );
-
-      POLYGON_CACHE[cacheKey] = position;
-
-      return position;
-    };
+  projectGeometry(geometry) {
+    console.log(geometry);
+  }
 
-    const position = cachedPosition(x, y, this.mapState);
+  projectPoint(mapState, center, x, y) {
+    const position = TileConversion.latLonToPixel(
+      [y, x],
+      mapState.center,
+      mapState.zoom,
+      mapState.tileSize,
+      mapState.canvasDimensions
+    );
 
-    const projectedX = this.center[0] - position[0] + this.mapState.moveOffset[0];
-    const projectedY = this.center[1] - position[1] + this.mapState.moveOffset[1];
+    const projectedX = center[0] - position[0] + mapState.moveOffset[0];
+    const projectedY = center[1] - position[1] + mapState.moveOffset[1];
 
-    this.stream.point(projectedX, projectedY);
+    return [projectedY, projectedY];
   }
 }