Commit b6694f06 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

[WIP] add input on map linked to photon service

parent f9d38b10
......@@ -9,6 +9,7 @@
"email": "https://kong-dev.alpha.grandlyon.com/email",
"matomo": "https://kong-dev.alpha.grandlyon.com/analytics/pageStats",
"elasticsearch": "https://kong-dev.alpha.grandlyon.com/es-consumer-aware",
"catalogue": "https://kong-dev.alpha.grandlyon.com/catalogue"
"catalogue": "https://kong-dev.alpha.grandlyon.com/catalogue",
"geocoder": "https://download.data.grandlyon.com/geocoding/photon"
}
}
\ No newline at end of file
......@@ -9,6 +9,7 @@
"email": "https://kong-rec.alpha.grandlyon.com/email",
"matomo": "https://kong-rec.alpha.grandlyon.com/analytics/pageStats",
"elasticsearch": "https://kong-rec.alpha.grandlyon.com/es-consumer-aware",
"catalogue": "https://kong-rec.alpha.grandlyon.com/catalogue"
"catalogue": "https://kong-rec.alpha.grandlyon.com/catalogue",
"geocoder": "https://download.data.grandlyon.com/geocoding/photon"
}
}
\ No newline at end of file
......@@ -1374,6 +1374,7 @@
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
"dev": true,
"optional": true,
"requires": {
"delegates": "^1.0.0",
"readable-stream": "^2.0.6"
......@@ -2640,7 +2641,8 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true
"dev": true,
"optional": true
},
"constants-browserify": {
"version": "1.0.0",
......@@ -3038,7 +3040,8 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
"dev": true
"dev": true,
"optional": true
},
"depd": {
"version": "1.1.2",
......@@ -4077,7 +4080,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -4098,12 +4102,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -4118,17 +4124,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -4245,7 +4254,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -4257,6 +4267,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -4271,6 +4282,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -4278,12 +4290,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -4302,6 +4316,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -4382,7 +4397,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -4394,6 +4410,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -4479,7 +4496,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -4515,6 +4533,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -4534,6 +4553,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -4577,12 +4597,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......@@ -4591,6 +4613,7 @@
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
"integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
"dev": true,
"optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"inherits": "~2.0.0",
......@@ -4603,6 +4626,7 @@
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"dev": true,
"optional": true,
"requires": {
"aproba": "^1.0.3",
"console-control-strings": "^1.0.0",
......@@ -4619,6 +4643,7 @@
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -4628,6 +4653,7 @@
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -4667,7 +4693,8 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
"integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
"dev": true
"dev": true,
"optional": true
},
"get-stream": {
"version": "3.0.0",
......@@ -4899,7 +4926,8 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
"dev": true
"dev": true,
"optional": true
},
"has-value": {
"version": "1.0.0",
......@@ -6194,6 +6222,7 @@
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"dev": true,
"optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"parse-json": "^2.2.0",
......@@ -6206,7 +6235,8 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
"dev": true,
"optional": true
}
}
},
......@@ -6470,7 +6500,8 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
"dev": true
"dev": true,
"optional": true
},
"map-visit": {
"version": "1.0.0",
......@@ -7204,6 +7235,7 @@
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
"dev": true,
"optional": true,
"requires": {
"are-we-there-yet": "~1.1.2",
"console-control-strings": "~1.1.0",
......@@ -8355,6 +8387,7 @@
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
"integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
"dev": true,
"optional": true,
"requires": {
"load-json-file": "^1.0.0",
"normalize-package-data": "^2.3.2",
......@@ -8366,6 +8399,7 @@
"resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
"integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
"dev": true,
"optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"pify": "^2.0.0",
......@@ -8376,7 +8410,8 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
"dev": true,
"optional": true
}
}
},
......@@ -8385,6 +8420,7 @@
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
"integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
"dev": true,
"optional": true,
"requires": {
"find-up": "^1.0.0",
"read-pkg": "^1.0.0"
......@@ -8395,6 +8431,7 @@
"resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
"integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
"dev": true,
"optional": true,
"requires": {
"path-exists": "^2.0.0",
"pinkie-promise": "^2.0.0"
......@@ -8405,6 +8442,7 @@
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
"integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
"dev": true,
"optional": true,
"requires": {
"pinkie-promise": "^2.0.0"
}
......@@ -11418,6 +11456,7 @@
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
"dev": true,
"optional": true,
"requires": {
"string-width": "^1.0.2 || 2"
}
......
......@@ -12,6 +12,7 @@ export class AppConfig {
matomo: string;
elasticsearch: string;
catalogue: string;
geocoder: string;
};
}
......
......@@ -14,6 +14,14 @@
</ng-container>
</div>
</div>
<div class="column">
<input class="input" type="text" placeholder="Entrer un address" i18n-placeholder="@@map.enterLocation"
[formControl]="searchLocationInput" list="searchLocationResult">
<datalist id="searchLocationResult">
<option *ngFor="let result of searchLocationResult" [value]="result.caption">
{{ result.caption }}</option>
</datalist>
</div>
</div>
<div class="columns is-mobile is-marginless">
......@@ -46,8 +54,10 @@
<input type="text" class="input" id="mapUrlCopy" [value]="mapUrl()" #mapUrlElement>
<button type="button" (click)="copyMaplink(mapUrlElement)" class="button is-medium">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#818080" fill-rule="evenodd" d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z" clip-rule="evenodd"/>
</svg>
<path fill="#818080" fill-rule="evenodd"
d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
clip-rule="evenodd" />
</svg>
<span class="is-hidden-touch">{{ shareMessage }}</span>
</button>
</div>
......
......@@ -7,6 +7,10 @@ import { MapService } from '../services/map.service';
import { settings } from '../settings';
import { geosource } from '../../../i18n/traductions';
import { linkFormats } from '../../geosource/models/metadata.model';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
import { GeocoderService } from '../services/geocoder.service';
import { CompleterService, CompleterData } from 'ng2-completer';
@Component({
selector: 'app-map',
......@@ -49,9 +53,15 @@ export class MapComponent implements OnInit, OnDestroy {
fullscreen = false;
searchLocationInput = new FormControl();
searchLocationResult = [];
markerLocation: mapboxgl.Marker;
constructor(
private _datasetDetailService: DatasetDetailService,
private _mapService: MapService,
private _geocoderService: GeocoderService,
private completerService: CompleterService
) { }
ngOnInit() {
......@@ -92,6 +102,22 @@ export class MapComponent implements OnInit, OnDestroy {
this.totalData = totalData;
}
});
// Subscribe to search location input
this.searchLocationInput.valueChanges.pipe(
debounceTime(400),
).subscribe((data) => {
const item = this.searchLocationResult.find(e => e.caption === data);
if (item) {
this.flyTo(item.value);
} else {
// if (this.markerLocation) {
// this.markerLocation.;
// }
this._geocoderService.searchLocation(data).subscribe((response) => { this.searchLocationResult = response; });
}
});
}
// To avoid call the constructMap when we left the component
......@@ -102,6 +128,20 @@ export class MapComponent implements OnInit, OnDestroy {
this._mapService.destroyMap();
}
flyTo(value) {
console.log(value);
this.map.flyTo({
center: value,
zoom: 15,
speed: 1,
curve: 1,
});
if (this.markerLocation === undefined) {
this.markerLocation = new mapboxgl.Marker().setLngLat(value).addTo(this.map);
}
this.markerLocation.setLngLat(value);
}
// When we get a metadata, we display the following:
// - load Mapbox style file to get the styles and the base layers (vector, plan, satellite)
constructMap() {
......@@ -227,7 +267,7 @@ export class MapComponent implements OnInit, OnDestroy {
this.shareMessage = geosource.mapMessages.copied;
setTimeout(() => {
this.shareMessage = geosource.mapMessages.share;
}, 2000);
}, 2000);
}
mapUrl() {
......
......@@ -3,20 +3,22 @@ import { CommonModule, DatePipe } from '@angular/common';
import { MapComponent } from './components/map.component';
// tslint:disable-next-line:max-line-length
import { DataDetailPropertiesComponent } from './components/data-details/data-detail-properties/data-detail-properties.component';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { MapService } from './services/map.service';
import { DataDetailsComponent } from './components/data-details/data-details.component';
import { GeocoderService } from './services/geocoder.service';
@NgModule({
imports: [
CommonModule,
FormsModule,
SharedModule,
ReactiveFormsModule,
],
declarations: [MapComponent, DataDetailsComponent, DataDetailPropertiesComponent],
providers: [
MapService,
GeocoderService,
DatePipe,
],
exports: [
......
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { APP_CONFIG } from '../../core/services/app-config.service';
import { map } from 'rxjs/operators';
import { } from 'geojson';
@Injectable()
export class GeocoderService {
geoServiceUrl = APP_CONFIG.backendUrls.geocoder;
constructor(private http: HttpClient) {
}
searchLocation(term) {
// tslint:disable-next-line: max-line-length
return this.http.get<GeoJSON.FeatureCollection>(`${this.geoServiceUrl}/api?q=${term}&lat=45.75&lon=4.85&lang=fr&limit=5`).pipe(
map((res) => {
return res.features.map((item) => {
console.log(item)
// const stop = item.properties.osm_value === 'bus_stop' ? 'Arrêt ' : '';
const housenumber = item.properties.housenumber ? item.properties.housenumber : null;
const name = item.properties.name ? item.properties.name : '';
const street = item.properties.street ? item.properties.street : '';
const city = item.properties.city ? item.properties.city : '';
let caption = null;
if (housenumber && street) {
caption = `${housenumber} ${street}, ${city}`;
} else if (name) {
caption = `${name}, ${city}`;
} else if (street) {
caption = `${street}, ${city}`;
}
if (!caption) {
console.log("couldn't format caption");
return null;
}
const obj = {
caption,
value: (item.geometry as GeoJSON.Point).coordinates,
};
return obj;
});
}),
);
}
// reverseGeocode(coords: number[]) {
// // tslint:disable-next-line:max-line-length
// return this.http.get<FeatureCollection>(this.geoServiceUrl + `/reverse?distance_sort=true&lon=${coords[0]}&lat=${coords[1]}`).map(res => {
// const item = res.features[0];
// const stop = item.properties.osm_value === 'stop' ? 'Arrêt ' : '';
// const housenumber = item.properties.housenumber ? item.properties.housenumber + ', ' : '';
// const name = item.properties.name ? item.properties.name + ' ' : '';
// const street = item.properties.street ? item.properties.street : '';
// const city = item.properties.city;
// return `${stop}${housenumber}${name}${street}, ${city}`;
// }
// );
// }
}
......@@ -9,6 +9,7 @@
"email": "http://localhost:3001",
"matomo": "https://matomo-intothesky.alpha.grandlyon.com",
"elasticsearch": "https://kong-dev.alpha.grandlyon.com/es-consumer-aware",
"catalogue": "https://kong-dev.alpha.grandlyon.com/catalogue"
"catalogue": "https://kong-dev.alpha.grandlyon.com/catalogue",
"geocoder": "https://download.data.grandlyon.com/geocoding/photon"
}
}
\ No newline at end of file
......@@ -1260,6 +1260,10 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
<source>Contact us</source>
<target>Contactez-nous</target>
</trans-unit>
<trans-unit id="map.enterLocation" datatype="html">
<source>Enter an address</source>
<target>Enter an address</target>
</trans-unit>
</body>
</file>
</xliff>
......@@ -1268,6 +1268,10 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<source>Contact us</source>
<target>Contactez-nous</target>
</trans-unit>
<trans-unit id="map.enterLocation" datatype="html">
<source>Enter an address</source>
<target>Entrer une adresse</target>
</trans-unit>
</body>
</file>
</xliff>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment