render: cleanup

package-lock.json

@@ -7620,9 +7620,9 @@
       }
     },
     "leaflet": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.3.tgz",
-      "integrity": "sha512-R9Cu5s0bdEXb9zh0nU17pV00IEvRh4xpWR9g1Oqz17jEDuMtkhy6DoYN1Q5WjvoDMRmq389zDVueUs9A2uWZSg=="
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.4.tgz",
+      "integrity": "sha512-FYL1LGFdj6v+2Ifpw+AcFIuIOqjNggfoLUwuwQv6+3sS21Za7Wvapq+LhbSE4NDXrEj6eYnW3y7LsaBICpyXtw=="
     },
     "leaflet-editable": {
       "version": "1.1.0",

package.json

@@ -51,7 +51,7 @@
     "classnames": "^2.2.6",
     "clean-webpack-plugin": "^0.1.9",
     "history": "^4.7.2",
-    "leaflet": "^1.3.3",
+    "leaflet": "^1.3.4",
     "leaflet-editable": "^1.1.0",
     "leaflet-geometryutil": "^0.9.0",
     "leaflet-routing-machine": "muerwre/leaflet-routing-machine#no-osrm-text",

src/components/renderer/Renderer.jsx

@@ -12,12 +12,6 @@ export class Renderer extends React.Component {
 
     this.fetchImages(ctx, geometry)
       .then(images => this.composeImages({ geometry, images, ctx }));
-
-    // myimage = new Image();
-    // myimage.onload = function() {
-    //   ctx.drawImage(myimage, x, y);
-    // }
-    // myimage.src = 'http://myserver/nextimage.cgi';
   }
 
   fetchImages = (ctx, geometry) => {
@@ -60,12 +54,13 @@ export class Renderer extends React.Component {
 
       return ctx.drawImage(image, posX, posY, 256, 256);
     });
+
   };
 
   render() {
     return (
       <div className="renderer-shade" onClick={this.props.onClick}>
-        <canvas width={window.innerWidth} height={window.innerWidth} ref={el => { this.canvas = el; }} />
+        <canvas width={window.innerWidth} height={window.innerHeight} ref={el => { this.canvas = el; }} />
       </div>
     );
   }

src/utils/renderer.js

@@ -20,8 +20,6 @@ const tileToLatLng = point => {
   return { lat, lng };
 };
 
-window.tileToLatLng = tileToLatLng;
-
 export const getTilePlacement = () => {
   const width = window.innerWidth;
   const height = window.innerHeight;
@@ -39,43 +37,20 @@ export const getTilePlacement = () => {
 
   // actual coords of file's corners (they're shifted from view)
   const southWestTileCoords = tileToLatLng(southWestTile);
-  const northEastTileCoords = tileToLatLng(northEastTile);
-
-  // console.log({ southWestTileCoords, northEastTileCoords });
-
-  const rsw = map.latLngToContainerPoint(southWestTileCoords);
-  const msw = map.latLngToContainerPoint(southWest);
 
   const tileTransformTranslate = map.latLngToLayerPoint(southWestTileCoords);
   const msw2 = map.latLngToLayerPoint(southWest);
 
-  console.log({ rsw, msw, tileTransformTranslate, msw2, });
-  // console.log({x: rsw.x-msw.x, y: h+rsw.y-msw.y, orig_x: sw.x, orig_y: sw.y})
-  // console.log('going from '+sw.x+','+sw.y+' to '+ne.x+','+ne.y+' shift '+(rsw.x-msw.x)+','+(h+rsw.y-msw.y));
-  // console.log('original shift: '+map.latLngToContainerPoint(original_shift))
-  const data = {
+  return {
     minX,
     maxX,
     minY,
     maxY,
-
-    // shiftX: (rsw.x - msw.x),
-    // shiftY: (height + (rsw.y - msw.y)),
-
     shiftX: tileTransformTranslate.x - msw2.x,
     shiftY: window.innerHeight + (tileTransformTranslate.y - msw2.y),
-    // shiftY: 815,
-
-
     size: 256,
     width,
     height,
-
     zoom,
-    // provider: current_map_style
   };
-
-  console.log('DATA IS', data);
-
-  return data;
 };