tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Map improvements.

pull/442/head
Sebastian 6 years ago
parent
0add1794b2
commit
a13e1f1e9c
1 changed files with 74 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      frontend/app/shared/components/geolocation-editor.component.ts

135
frontend/app/shared/components/geolocation-editor.component.ts
View File

@ -33,6 +33,8 @@ interface Snapshot {
isMapHidden?: boolean; isMapHidden?: boolean;
} }
type UpdateOptions = { reset?: boolean; pan?: true; fire?: boolean };
@Component({ @Component({
selector: 'sqx-geolocation-editor', selector: 'sqx-geolocation-editor',
styleUrls: ['./geolocation-editor.component.scss'], styleUrls: ['./geolocation-editor.component.scss'],
@ -101,7 +103,7 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
} }
if (this.marker || (!this.marker && this.map && this.value)) { if (this.marker || (!this.marker && this.map && this.value)) {
this.updateMarker(true, false); this.updateMarker({ reset: !this.marker });
} }
} }
@ -124,8 +126,8 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
private setDisabledStateOSM(isDisabled: boolean): void { private setDisabledStateOSM(isDisabled: boolean): void {
const update: (t: any) => any = const update: (t: any) => any =
isDisabled ? isDisabled ?
x => x.enable() : x => x.disable() :
x => x.disable(); x => x.enable();
if (this.map) { if (this.map) {
update(this.map.zoomControl); update(this.map.zoomControl);
@ -159,7 +161,7 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
this.updateValue(lat, lng); this.updateValue(lat, lng);
if (lat && lng) { if (lat && lng) {
this.updateMarker(true, true); this.updateMarker({ pan: true, fire: true });
} else { } else {
this.callChange(this.value); this.callChange(this.value);
this.callTouched(); this.callTouched();
@ -177,9 +179,11 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
private ngAfterViewInitOSM() { private ngAfterViewInitOSM() {
this.searchBoxInput.nativeElement.remove(); this.searchBoxInput.nativeElement.remove();
this.resourceLoader.loadStyle('https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/1.9.0/Control.Geocoder.min.css');
this.resourceLoader.loadStyle('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css'); this.resourceLoader.loadStyle('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css');
this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js').then(
() => { this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js')
.then(() => {
this.map = L.map(this.editor.nativeElement).fitWorld(); this.map = L.map(this.editor.nativeElement).fitWorld();
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
@ -187,17 +191,32 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map); }).addTo(this.map);
this.map.on('click', this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/1.9.0/Control.Geocoder.min.js')
(event: any) => { .then(() => {
if (!this.marker && !this.snapshot.isDisabled) { L.Control.geocoder({
const latlng = event.latlng.wrap(); defaultMarkGeocode: false
})
this.updateValue(latlng.lat, latlng.lng); .on('markgeocode', (event: any) => {
this.updateMarker(false, true); const center = event.geocode.center;
}
if (!this.snapshot.isDisabled) {
this.updateValue(center.lat, center.lng);
this.updateMarker({ reset: true, fire: true });
}
})
.addTo(this.map);
}); });
this.updateMarker(true, false); this.map.on('click', (event: any) => {
if (!this.snapshot.isDisabled) {
const latlng = event.latlng.wrap();
this.updateValue(latlng.lat, latlng.lng);
this.updateMarker({ fire: true });
}
});
this.updateMarker({ reset: true });
if (this.snapshot.isDisabled) { if (this.snapshot.isDisabled) {
this.map.zoomControl.disable(); this.map.zoomControl.disable();
@ -210,25 +229,28 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
} }
private ngAfterViewInitGoogle(apiKey: string) { private ngAfterViewInitGoogle(apiKey: string) {
this.resourceLoader.loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`).then( this.resourceLoader.loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
() => { .then(() => {
this.map = new google.maps.Map(this.editor.nativeElement, this.map = new google.maps.Map(this.editor.nativeElement,
{ {
zoom: 1, zoom: 1,
fullscreenControl: false,
mapTypeControl: false, mapTypeControl: false,
mapTypeControlOptions: {},
streetViewControl: false, streetViewControl: false,
center: { lat: 0, lng: 0 } center: { lat: 0, lng: 0 }
}); });
const searchBox = new google.maps.places.SearchBox(this.searchBoxInput.nativeElement); const searchBox = new google.maps.places.SearchBox(this.searchBoxInput.nativeElement);
this.map.addListener('click', this.map.addListener('click', (event: any) => {
(event: any) => { if (!this.snapshot.isDisabled) {
if (!this.snapshot.isDisabled) { const latlng = event.latLng;
this.updateValue(event.latLng.lat(), event.latLng.lng());
this.updateMarker(false, true); this.updateValue(latlng.lat(), latlng.lng());
} this.updateMarker({ fire: true });
}); }
});
this.map.addListener('bounds_changed', () => { this.map.addListener('bounds_changed', () => {
searchBox.setBounds(this.map.getBounds()); searchBox.setBounds(this.map.getBounds());
@ -249,12 +271,12 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
const lng = place.geometry.location.lng(); const lng = place.geometry.location.lng();
this.updateValue(lat, lng); this.updateValue(lat, lng);
this.updateMarker(false, true); this.updateMarker({ pan: true, fire: true });
} }
} }
}); });
this.updateMarker(true, false); this.updateMarker({ reset: true });
if (this.snapshot.isDisabled) { if (this.snapshot.isDisabled) {
this.map.setOptions({ draggable: false, zoomControl: false }); this.map.setOptions({ draggable: false, zoomControl: false });
@ -264,20 +286,21 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
public reset() { public reset() {
this.value = null; this.value = null;
this.searchBoxInput.nativeElement.value = '';
this.updateMarker(true, true); this.updateMarker({ fire: true });
} }
private updateValue(lat: number, lng: number) { private updateValue(latitude: number, longitude: number) {
this.value = { latitude: lat, longitude: lng }; this.value = { latitude, longitude };
this.detectChanges();
} }
private updateMarker(zoom: boolean, fireEvent: boolean) { private updateMarker(opts?: UpdateOptions) {
if (!this.isGoogleMaps) { if (!this.isGoogleMaps) {
this.updateMarkerOSM(zoom); this.updateMarkerOSM(opts);
} else { } else {
this.updateMarkerGoogle(zoom); this.updateMarkerGoogle(opts);
} }
if (this.value) { if (this.value) {
@ -286,25 +309,22 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
this.geolocationForm.reset(undefined, { emitEvent: true, onlySelf: false }); this.geolocationForm.reset(undefined, { emitEvent: true, onlySelf: false });
} }
if (fireEvent) { if (opts && opts.fire) {
this.callChange(this.value); this.callChange(this.value);
this.callTouched(); this.callTouched();
} }
} }
private updateMarkerOSM(zoom: boolean) { private updateMarkerOSM(opts?: UpdateOptions) {
if (this.value) { if (this.value) {
if (!this.marker) { if (!this.marker) {
this.marker = L.marker([0, 90], { draggable: true }).addTo(this.map); this.marker = L.marker([0, 90], { draggable: true }).addTo(this.map);
this.marker.on('drag', (event: any) => { this.marker.on('dragend', (event: any) => {
const latlng = event.latlng.wrap(); const latlng = event.target.getLatLng().wrap();
this.updateValue(latlng.lat, latlng.lng); this.updateValue(latlng.lat, latlng.lng);
}); this.updateMarker({ fire: true });
this.marker.on('dragend', () => {
this.updateMarker(false, true);
}); });
if (this.snapshot.isDisabled) { if (this.snapshot.isDisabled) {
@ -314,9 +334,9 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
const latLng = L.latLng(this.value.latitude, this.value.longitude); const latLng = L.latLng(this.value.latitude, this.value.longitude);
if (zoom) { if (opts && opts.reset) {
this.map.setView(latLng, 8); this.map.setView(latLng, 15);
} else { } else if (opts && opts.pan) {
this.map.panTo(latLng); this.map.panTo(latLng);
} }
@ -326,12 +346,10 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
this.marker.removeFrom(this.map); this.marker.removeFrom(this.map);
this.marker = null; this.marker = null;
} }
this.map.fitWorld();
} }
} }
private updateMarkerGoogle(zoom: boolean) { private updateMarkerGoogle(opts?: UpdateOptions) {
if (this.value) { if (this.value) {
if (!this.marker) { if (!this.marker) {
this.marker = new google.maps.Marker({ this.marker = new google.maps.Marker({
@ -343,36 +361,31 @@ export class GeolocationEditorComponent extends StatefulControlComponent<Snapsho
draggable: true draggable: true
}); });
this.marker.addListener('drag', (event: any) => {
if (!this.snapshot.isDisabled) {
this.updateValue(event.latLng.lat(), event.LatLng.lng());
}
});
this.marker.addListener('dragend', (event: any) => { this.marker.addListener('dragend', (event: any) => {
if (!this.snapshot.isDisabled) { if (!this.snapshot.isDisabled) {
this.updateValue(event.latLng.lat(), event.LatLng.lng()); const latlng = event.latLng;
this.updateMarker(false, true);
this.updateValue(latlng.lat(), latlng.lng());
this.updateMarker({ fire: true });
} }
}); });
} }
const latLng = { lat: this.value.latitude, lng: this.value.longitude }; const latLng = new google.maps.LatLng(this.value.latitude, this.value.longitude);
if (zoom) { if (opts && opts.reset) {
this.map.setZoom(12);
this.map.setCenter(latLng);
} else if (opts && opts.pan) {
this.map.setCenter(latLng); this.map.setCenter(latLng);
} else {
this.map.panTo(latLng);
} }
this.marker.setPosition(latLng); this.marker.setPosition(latLng);
this.map.setZoom(12);
} else { } else {
if (this.marker) { if (this.marker) {
this.marker.setMap(null); this.marker.setMap(null);
this.marker = null; this.marker = null;
} }
this.map.setCenter({ lat: 0, lng: 0 });
} }
} }
} }
Write Preview
Loading…
Cancel
Save