From 4e26d94843521f0d8d9afb7f9a17b34e27267202 Mon Sep 17 00:00:00 2001 From: evlist Date: Tue, 6 Sep 2022 11:39:27 +0200 Subject: [PATCH] Correct algorithm for centering tiles. --- src/components/gpx-figure.tsx | 55 ---------------------------------- src/components/gpx-overlay.tsx | 27 ----------------- src/components/map.tsx | 25 +++++++++------- src/components/tile.tsx | 12 ++++++-- 4 files changed, 23 insertions(+), 96 deletions(-) delete mode 100644 src/components/gpx-figure.tsx delete mode 100644 src/components/gpx-overlay.tsx diff --git a/src/components/gpx-figure.tsx b/src/components/gpx-figure.tsx deleted file mode 100644 index ba12aaa..0000000 --- a/src/components/gpx-figure.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import { PigeonProps, Point } from 'pigeon-maps'; -import GPX from 'gpx-parser-builder'; -import { round } from 'lodash'; - -const GPXFigure: React.FC = (props: PigeonProps) => { - const gpx = GPX.parse(localStorage.getItem('gpx')); - - const dirtyLatLngToPixel = (point: Point) => { - if (props.mapState === undefined) { - return undefined; - } - const latRange = props.mapState.bounds.ne[0] - props.mapState.bounds.sw[0]; - const lonRange = props.mapState.bounds.ne[1] - props.mapState.bounds.sw[1]; - const x = round( - ((point[0] - props.mapState.bounds.sw[0]) * props.mapState.width) / - lonRange - ); - const y = round( - ((point[1] - props.mapState.bounds.sw[1]) * props.mapState.height) / - latRange - ); - return [x, props.mapState.height - y]; - }; - - const trkToPolyline = (gpxData: any) => { - const latLongs: string[] = gpxData.trk[0].trkseg[0].trkpt.map( - (trkpt: any) => { - if (props.latLngToPixel === undefined) { - return ''; - } - const point: Point = [trkpt.$.lat, trkpt.$.lon]; - const pixelPoint = dirtyLatLngToPixel(point); - if (pixelPoint === undefined) { - return ''; - } - return pixelPoint.join(' '); - } - ); - console.log('latLongs: ' + latLongs); - return latLongs.join(' '); - }; - - return ( - - ); -}; - -export default GPXFigure; diff --git a/src/components/gpx-overlay.tsx b/src/components/gpx-overlay.tsx deleted file mode 100644 index 0c8bfb0..0000000 --- a/src/components/gpx-overlay.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import { Overlay, PigeonProps } from 'pigeon-maps'; - -import GPXFigure from './gpx-figure'; - -const GPXOverlay: React.FC = (props: PigeonProps) => { - return ( - - {props.mapState && props.mapState.width > 0 && ( - - - - )} - - ); -}; - -export default GPXOverlay; diff --git a/src/components/map.tsx b/src/components/map.tsx index 5d73f09..d349d1b 100644 --- a/src/components/map.tsx +++ b/src/components/map.tsx @@ -1,7 +1,6 @@ import _, { round } from 'lodash'; import react, { useState, useEffect } from 'react'; -import GPXOverlay from './gpx-overlay'; import Tile from './tile'; import '../theme/map.css'; @@ -24,13 +23,13 @@ const lat2tile = (lat: number, zoom: number) => { Math.PI) / 2) * Math.pow(2, zoom); - const floor = Math.floor(real); - return [floor, real - floor]; - }; + const floor = Math.floor(real); + return [floor, real - floor]; +}; const Map: react.FC = () => { const initialCenter: [number, number] = [43.57029965, 3.94242897]; - const initialZoom: number = 15; + const initialZoom: number = 17; const [center, setCenter] = useState(initialCenter); const [zoom, setZoom] = useState(initialZoom); @@ -51,12 +50,16 @@ const Map: react.FC = () => { const nbTilesY = _.ceil(dimensions.height / tileSize) + 2; const nbTilesX = _.ceil(dimensions.width / tileSize) + 2; - const [tileCenterY, deltaY] = lat2tile(center[0], zoom); - const [tileCenterX, deltaX] = lon2tile(center[1], zoom); + const [tileCenterY, reminderY] = lat2tile(center[0], zoom); + const [tileCenterX, reminderX] = lon2tile(center[1], zoom); const firstTileY = tileCenterY - _.ceil(nbTilesY / 2); const firstTileX = tileCenterX - _.ceil(nbTilesX / 2); - - + const locationY = ((tileCenterY + reminderY - firstTileY ) * tileSize) ; + const locationX = ((tileCenterX + reminderX - firstTileX ) * tileSize) ; + const targetLocationY = dimensions.height / 2; + const targetLocationX = dimensions.width / 2; + const deltaY = - targetLocationY + locationY; + const deltaX = - targetLocationX + locationX; return (
@@ -69,8 +72,8 @@ const Map: react.FC = () => { ix={ix} x={firstTileX + ix} y={firstTileY + iy} - deltaX ={deltaX} - deltaY ={deltaY} + deltaX={deltaX} + deltaY={deltaY} zoom={zoom} /> ))} diff --git a/src/components/tile.tsx b/src/components/tile.tsx index d0701be..abbac5e 100644 --- a/src/components/tile.tsx +++ b/src/components/tile.tsx @@ -26,12 +26,18 @@ const Tile: React.FC<{ height: tileSize + 'px', transform: 'translate3d(' + - (props.ix - props.deltaX -1) * tileSize + + (props.ix * tileSize - props.deltaX) + 'px, ' + - (props.iy - props.deltaY -1) * tileSize + + (props.iy * tileSize - props.deltaY) + 'px, 0px)', }; - return ; + return ( + + ); }; export default Tile;