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

View file

@ -1,21 +1,23 @@
import {
Map as MapInterface,
map,
tileLayer,
TileLayer,
} from 'leaflet';
import { Map as MapInterface, map, tileLayer, TileLayer } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { PROVIDER } from '$config/frontend';
import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
import { GestureHandling } from 'leaflet-gesture-handling';
import 'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';
interface Props {
container: string
container: string;
}
export class Map {
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?
this.tileLayer.addTo(this.map);
@ -25,12 +27,13 @@ export class Map {
tileLayer: TileLayer = tileLayer(PROVIDER.url, {
attribution: 'Независимое Велосообщество',
maxNativeZoom: 18,
maxZoom: 18,
maxZoom: 18
});
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);
}
};
}