2019-05-07 00:05:01 +00:00
|
|
|
|
<template>
|
|
|
|
|
<v-container fluid fill-height class="pa-0 map">
|
2019-05-08 02:37:45 +00:00
|
|
|
|
<l-map :zoom="zoom" :center="center" :bounds="bounds" :options="options">
|
|
|
|
|
<l-control position="bottomright">
|
|
|
|
|
<v-toolbar dense floating color="grey lighten-4" v-on:dblclick.stop v-on:click.stop>
|
|
|
|
|
<v-btn icon v-on:click="currentPosition()">
|
|
|
|
|
<v-icon>my_location</v-icon>
|
|
|
|
|
</v-btn>
|
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
|
<v-text-field class="pt-3 pr-3"
|
|
|
|
|
single-line
|
|
|
|
|
label="Search"
|
|
|
|
|
prepend-inner-icon="search"
|
|
|
|
|
clearable
|
|
|
|
|
color="blue-grey"
|
|
|
|
|
@click:clear="clearQuery"
|
|
|
|
|
v-model="query.q"
|
|
|
|
|
@keyup.enter.native="formChange"
|
|
|
|
|
></v-text-field>
|
|
|
|
|
</v-toolbar>
|
|
|
|
|
</l-control>
|
2019-05-07 00:05:01 +00:00
|
|
|
|
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
|
2019-05-08 02:37:45 +00:00
|
|
|
|
<l-marker v-for="photo in photos" v-bind:data="photo"
|
|
|
|
|
v-bind:key="photo.index" :lat-lng="photo.location" :icon="photo.icon"
|
|
|
|
|
:options="photo.options" @click="openPhoto(photo.index)"></l-marker>
|
2019-05-08 05:54:53 +00:00
|
|
|
|
<l-marker v-if="position" :lat-lng="position" :z-index-offset="1"></l-marker>
|
2019-05-07 00:05:01 +00:00
|
|
|
|
</l-map>
|
|
|
|
|
</v-container>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2019-05-08 02:37:45 +00:00
|
|
|
|
import * as L from "leaflet";
|
|
|
|
|
import Photo from "model/photo";
|
|
|
|
|
|
2019-05-07 00:05:01 +00:00
|
|
|
|
export default {
|
|
|
|
|
name: 'places',
|
|
|
|
|
data() {
|
2019-05-08 02:37:45 +00:00
|
|
|
|
const query = this.$route.query;
|
|
|
|
|
const order = query['order'] ? query['order'] : 'newest';
|
|
|
|
|
const q = query['q'] ? query['q'] : '';
|
|
|
|
|
|
2019-05-07 00:05:01 +00:00
|
|
|
|
return {
|
2019-05-08 02:37:45 +00:00
|
|
|
|
zoom: 15,
|
|
|
|
|
position: null,
|
|
|
|
|
center: L.latLng(52.5259279, 13.414496),
|
2019-05-07 15:02:15 +00:00
|
|
|
|
url: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
|
2019-05-07 00:05:01 +00:00
|
|
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
2019-05-08 02:37:45 +00:00
|
|
|
|
options: {
|
|
|
|
|
icon: {
|
|
|
|
|
iconSize: [40, 40]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
photos: [],
|
|
|
|
|
results: [],
|
|
|
|
|
query: {
|
|
|
|
|
order: order,
|
|
|
|
|
q: q,
|
|
|
|
|
},
|
|
|
|
|
offset: 0,
|
|
|
|
|
pageSize: 100,
|
|
|
|
|
lastQuery: {},
|
|
|
|
|
bounds: null,
|
|
|
|
|
minLat: null,
|
|
|
|
|
maxLat: null,
|
|
|
|
|
minLong: null,
|
|
|
|
|
maxLong: null,
|
2019-05-07 00:05:01 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
2019-05-08 02:37:45 +00:00
|
|
|
|
methods: {
|
|
|
|
|
openPhoto(index) {
|
|
|
|
|
this.$gallery.show(this.results, index)
|
|
|
|
|
},
|
|
|
|
|
currentPosition() {
|
|
|
|
|
if ("geolocation" in navigator) {
|
|
|
|
|
const self = this;
|
|
|
|
|
this.$alert.success('Finding your position...');
|
|
|
|
|
navigator.geolocation.getCurrentPosition(function(position) {
|
|
|
|
|
self.center = L.latLng(position.coords.latitude, position.coords.longitude);
|
|
|
|
|
self.position = L.latLng(position.coords.latitude, position.coords.longitude);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$alert.warning('Geolocation is not available');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
formChange() {
|
|
|
|
|
this.refreshList();
|
|
|
|
|
},
|
|
|
|
|
clearQuery() {
|
|
|
|
|
this.query.q = '';
|
|
|
|
|
this.refreshList();
|
|
|
|
|
},
|
|
|
|
|
resetBoundingBox() {
|
|
|
|
|
this.minLat = null;
|
|
|
|
|
this.maxLat = null;
|
|
|
|
|
this.minLong = null;
|
|
|
|
|
this.maxLong = null;
|
|
|
|
|
},
|
|
|
|
|
fitBoundingBox(lat, long) {
|
|
|
|
|
if(this.maxLat === null || lat > this.maxLat) {
|
|
|
|
|
this.maxLat = lat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(this.minLat === null || lat < this.minLat) {
|
|
|
|
|
this.minLat = lat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(this.maxLong === null || long > this.maxLong) {
|
|
|
|
|
this.maxLong = long;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(this.minLong === null || long < this.minLong) {
|
|
|
|
|
this.minLong = long;
|
|
|
|
|
}
|
|
|
|
|
},
|
2019-05-08 05:54:53 +00:00
|
|
|
|
updateMap(results) {
|
2019-05-08 02:37:45 +00:00
|
|
|
|
const photos = [];
|
|
|
|
|
|
|
|
|
|
this.resetBoundingBox();
|
|
|
|
|
|
2019-05-08 05:54:53 +00:00
|
|
|
|
for (let i = 0, len = results.length; i < len; i++) {
|
|
|
|
|
let result = results[i];
|
2019-05-08 02:37:45 +00:00
|
|
|
|
|
|
|
|
|
if (!result.hasLocation()) continue;
|
|
|
|
|
|
|
|
|
|
this.fitBoundingBox(result.PhotoLat, result.PhotoLong);
|
|
|
|
|
|
|
|
|
|
photos.push({
|
|
|
|
|
id: result.getId(),
|
|
|
|
|
index: i,
|
|
|
|
|
options: {
|
|
|
|
|
title: result.getTitle(),
|
|
|
|
|
clickable: true,
|
|
|
|
|
},
|
|
|
|
|
icon: L.icon({
|
2019-05-13 16:01:50 +00:00
|
|
|
|
iconUrl: result.getThumbnailUrl('tile_50'),
|
|
|
|
|
iconRetinaUrl: result.getThumbnailUrl('tile_100'),
|
2019-05-08 02:37:45 +00:00
|
|
|
|
iconSize: [50, 50],
|
2019-05-08 04:47:30 +00:00
|
|
|
|
className: 'leaflet-marker-photo',
|
2019-05-08 02:37:45 +00:00
|
|
|
|
}),
|
|
|
|
|
location: L.latLng(result.PhotoLat, result.PhotoLong),
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-08 05:54:53 +00:00
|
|
|
|
if (photos.length === 0) {
|
|
|
|
|
this.$alert.warning('No locations found');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.results = results;
|
|
|
|
|
this.photos = photos;
|
2019-05-08 02:37:45 +00:00
|
|
|
|
|
2019-05-08 05:54:53 +00:00
|
|
|
|
this.center = photos[0].location;
|
2019-05-08 02:37:45 +00:00
|
|
|
|
this.bounds = [[this.maxLat, this.minLong], [this.minLat, this.maxLong]];
|
|
|
|
|
|
|
|
|
|
this.$alert.info(photos.length + ' photos found');
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
refreshList() {
|
|
|
|
|
// Don't query the same data more than once
|
|
|
|
|
if (JSON.stringify(this.lastQuery) === JSON.stringify(this.query)) return;
|
|
|
|
|
|
|
|
|
|
Object.assign(this.lastQuery, this.query);
|
|
|
|
|
|
|
|
|
|
this.offset = 0;
|
|
|
|
|
|
|
|
|
|
this.$router.replace({query: this.query});
|
|
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
count: this.pageSize,
|
|
|
|
|
offset: this.offset,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Object.assign(params, this.query);
|
|
|
|
|
|
|
|
|
|
Photo.search(params).then(response => {
|
|
|
|
|
if (!response.models.length) {
|
|
|
|
|
this.$alert.warning('No photos found');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-08 05:54:53 +00:00
|
|
|
|
this.updateMap(response.models);
|
2019-05-08 02:37:45 +00:00
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.refreshList();
|
|
|
|
|
},
|
2019-05-07 00:05:01 +00:00
|
|
|
|
};
|
2019-05-08 02:37:45 +00:00
|
|
|
|
|
|
|
|
|
/* L.icon({
|
|
|
|
|
html: '<div style="background-image: url(/api/v1/thumbnails/square/40/cc1a022c30fff3d5603f1c3f722ec1960e3fa95e);"></div>',
|
|
|
|
|
className: 'leaflet-marker-photo' }), */
|
2019-05-07 00:05:01 +00:00
|
|
|
|
</script>
|
2019-05-08 02:37:45 +00:00
|
|
|
|
|