added gesture handling

This commit is contained in:
Fedor Katurov 2019-09-25 12:08:11 +07:00
parent 8e860f327a
commit a37afccca8
3 changed files with 5836 additions and 2810 deletions

8618
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -72,11 +72,13 @@
"file-saver": "^2.0.0", "file-saver": "^2.0.0",
"history": "^4.7.2", "history": "^4.7.2",
"http-errors": "~1.6.2", "http-errors": "~1.6.2",
"install": "^0.13.0",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"leaflet": "^1.4.0", "leaflet": "^1.4.0",
"leaflet-editable": "^1.1.0", "leaflet-editable": "^1.1.0",
"leaflet-editable-polyline": "muerwre/leaflet-editable-polyline#master", "leaflet-editable-polyline": "muerwre/leaflet-editable-polyline#master",
"leaflet-geometryutil": "^0.9.0", "leaflet-geometryutil": "^0.9.0",
"leaflet-gesture-handling": "^1.1.8",
"leaflet-routing-machine": "muerwre/leaflet-routing-machine#no-osrm-text", "leaflet-routing-machine": "muerwre/leaflet-routing-machine#no-osrm-text",
"leaflet.markercluster": "^1.4.1", "leaflet.markercluster": "^1.4.1",
"less": "^3.8.1", "less": "^3.8.1",
@ -85,6 +87,7 @@
"mongoose": "^5.3.14", "mongoose": "^5.3.14",
"morgan": "~1.9.0", "morgan": "~1.9.0",
"mysql": "^2.16.0", "mysql": "^2.16.0",
"npm": "^6.11.3",
"optimize-css-assets-webpack-plugin": "^5.0.1", "optimize-css-assets-webpack-plugin": "^5.0.1",
"pt-sans-cyrillic": "0.0.4", "pt-sans-cyrillic": "0.0.4",
"pug": "2.0.0-beta11", "pug": "2.0.0-beta11",

View file

@ -1,21 +1,23 @@
import { import { Map as MapInterface, map, tileLayer, TileLayer } from 'leaflet';
Map as MapInterface,
map,
tileLayer,
TileLayer,
} from 'leaflet';
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import { PROVIDER } from '$config/frontend'; import { PROVIDER } from '$config/frontend';
import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers'; import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
import { GestureHandling } from 'leaflet-gesture-handling';
import 'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';
interface Props { interface Props {
container: string container: string;
} }
export class Map { export class Map {
constructor({ container }: Props) { constructor({ container }: Props) {
this.map = map(container).setView([55.0153275, 82.9071235], 13); MapInterface.addInitHook('addHandler', 'gestureHandling', GestureHandling);
// Added gesture handling, but i don't like how it works
// @ts-ignore
this.map = map(container, { gestureHandling: true }).setView([55.0153275, 82.9071235], 13);
// todo: change coords? // todo: change coords?
this.tileLayer.addTo(this.map); this.tileLayer.addTo(this.map);
@ -25,12 +27,13 @@ export class Map {
tileLayer: TileLayer = tileLayer(PROVIDER.url, { tileLayer: TileLayer = tileLayer(PROVIDER.url, {
attribution: 'Независимое Велосообщество', attribution: 'Независимое Велосообщество',
maxNativeZoom: 18, maxNativeZoom: 18,
maxZoom: 18, maxZoom: 18
}); });
setProvider = (provider: string): void => { setProvider = (provider: string): void => {
const { url } = (provider && PROVIDERS[provider] && PROVIDERS[provider]) || PROVIDERS[DEFAULT_PROVIDER]; const { url } =
(provider && PROVIDERS[provider] && PROVIDERS[provider]) || PROVIDERS[DEFAULT_PROVIDER];
this.tileLayer.setUrl(url); this.tileLayer.setUrl(url);
} };
} }