CalvinBackup/deflock
1
0
Fork 0
mirror of https://github.com/FoggedLens/deflock.git synced 2026-02-12 15:02:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup, restore buttons, show current location

Browse Source
This commit is contained in:
Will Freeman
2024-12-22 20:14:41 -08:00
parent 572149e797
commit 53db867385
3 changed files with 110 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
webapp/src/components/LeafletMap.vue
View File

@@ -1,10 +1,18 @@
<template>
<div id="map"></div>
<div id="map">
<div class="topleft">
<slot name="topleft"></slot>
</div>
<div class="bottomright">
<slot name="bottomright"></slot>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, h, createApp, watch, type PropType } from 'vue';
import L from 'leaflet';
import { onMounted, h, createApp, watch } from 'vue';
import L, { type LatLngExpression } from 'leaflet';
import DFMapPopup from './DFMapPopup.vue';
@@ -22,12 +30,17 @@ const props = defineProps({
type: Number,
required: true,
},
alprs: Array
alprs: Array,
currentLocation: {
type: Object,
default: null,
},
});
let map: L.Map;
let circlesLayer: L.FeatureGroup;
let clusterLayer: L.MarkerClusterGroup;
let currentLocationLayer: L.FeatureGroup;
onMounted(() => {
initializeMap();
@@ -46,9 +59,33 @@ function initializeMap() {
populateMap();
}
function renderCurrentLocation() {
if (currentLocationLayer) {
map.removeLayer(currentLocationLayer);
}
currentLocationLayer = L.featureGroup();
const clMarker = L.circleMarker([props.currentLocation.lat, props.currentLocation.lng], {
radius: 10,
color: '#ffffff',
fillColor: '#007bff',
fillOpacity: 1,
weight: 4
});
clMarker.bindPopup('Current Location');
currentLocationLayer.addLayer(clMarker);
map.addLayer(currentLocationLayer);
}
function populateMap() {
const showFov = props.zoom >= 16;
if (props.currentLocation) {
renderCurrentLocation();
}
if (clusterLayer) {
map.removeLayer(clusterLayer);
}
@@ -159,9 +196,10 @@ function hasCrossedZoomThreshold(oldZoom: number, newZoom: number, threshold: nu
}
function registerWatchers() {
watch(() => props.center, (newCenter) => {
if (newCenter !== props.center) // TODO: is this necessary?
map.setView(newCenter);
watch(() => props.center, (newCenter: any, oldCenter: any) => {
if (newCenter.lat !== oldCenter.lat || newCenter.lng !== oldCenter.lng) {
map.setView(newCenter as LatLngExpression);
}
});
watch(() => props.zoom, (newZoom, oldZoom) => {
@@ -172,6 +210,10 @@ function registerWatchers() {
}
}
});
watch(() => props.currentLocation, (newLocation, oldLocation) => {
renderCurrentLocation();
});
}
@@ -183,13 +225,28 @@ function registerWatchers() {
@import 'leaflet.markercluster/dist/MarkerCluster.css';
#map {
height: 100%;
height: calc(100dvh - 64px);
margin-top: 64px;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.topleft {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
.bottomright {
position: absolute;
bottom: 50px;
right: 60px;
z-index: 1000;
}
</style>
<style> /* (Global) */
@@ -199,13 +256,13 @@ function registerWatchers() {
cursor: default;
}
.svgMarker {
pointer-events: none;
cursor: default;
pointer-events: none;
cursor: default;
}
/* Enables clicks only on actual SVG path */
.someSVGpath {
pointer-events: all;
cursor: pointer;
pointer-events: all;
cursor: pointer;
}
</style>

92
webapp/src/components/NewVisitor.vue
View File

@@ -1,92 +0,0 @@
<template>
<v-dialog :fullscreen="smAndDown" v-model="show" max-width="900">
<v-card>
<v-card-title class="text-center py-4 font-weight-bold">
<span class="headline">Welcome to DeFlock</span>
</v-card-title>
<p class="mx-8">
DeFlock is a tool to help you learn about Automated License Plate Readers (ALPRs) in your area. Here's how it works:
</p>
<v-container>
<v-row>
<v-col cols="12" sm="6">
<v-card flat class="pa-4">
<v-row class="align-center">
<v-col>
<v-img width="140" src="/step1.png" />
</v-col>
<v-col>
<h4 class="no-small">
Each Circle represents an Automated License Plate Reader.
</h4>
</v-col>
</v-row>
</v-card>
</v-col>
<v-col cols="12" sm="6">
<v-card flat class="pa-4">
<v-row class="align-center">
<v-col>
<v-img width="140" src="/step2.png" />
</v-col>
<v-col >
<h4 class="no-small">
Zoom in to see which direction each ALPR is facing.
</h4>
</v-col>
</v-row>
</v-card>
</v-col>
<v-col cols="12" sm="6">
<v-card flat class="pa-4">
<v-row class="align-center">
<v-col>
<v-img width="140" src="/step3.png" />
</v-col>
<v-col>
<h4 class="no-small">
Please check our list of <a href="/operators">Known Operators</a> and report missing ALPRs near you.
</h4>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
</v-container>
<div class="text-center mx-4 mb-2">Map data from <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>. By using this site, you agree to our <router-link to="/legal">Terms of Service</router-link>.</div>
<v-card-actions>
<v-btn class="w-100" size="x-large" color="primary" variant="elevated" @click="acknowledge">Got it</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useDisplay } from 'vuetify';
const { smAndDown } = useDisplay();
const show = ref(false);
onMounted(() => {
if (!localStorage.getItem('acknowledged')) {
show.value = true;
}
});
function acknowledge() {
show.value = false;
localStorage.setItem('acknowledged', 'true');
}
</script>
<style scoped>
.no-small {
min-width: 160px;
}
</style>

51
webapp/src/views/Map.vue
View File

@@ -1,18 +1,47 @@
<template>
<div class="map-container" @keyup="handleKeyUp">
<!-- <NewVisitor /> -->
<v-card class="map-notif" v-show="isLoadingALPRs && !showClusters">
<v-card-title><v-progress-circular indeterminate color="primary" /></v-card-title>
</v-card>
<!-- use-global-leaflet=false is a workaround for a bug in current version of vue-leaflet -->
<leaflet-map
v-if="center"
v-model:center="center"
v-model:zoom="zoom"
:current-location="currentLocation"
@update:bounds="updateBounds"
/>
>
<!-- SEARCH -->
<template v-slot:topleft>
<form @submit.prevent="onSearch">
<v-text-field
:rounded="xs || undefined"
:density="xs ? 'compact' : 'default'"
class="map-search"
ref="searchField"
prepend-inner-icon="mdi-magnify"
placeholder="Search for a location"
single-line
variant="solo"
clearable
hide-details
v-model="searchQuery"
type="search"
>
<template v-slot:append-inner>
<v-btn :disabled="!searchQuery" variant="text" flat color="#0080BC" @click="onSearch">
Go<v-icon end>mdi-chevron-right</v-icon>
</v-btn>
</template>
</v-text-field>
</form>
</template>
<!-- CURRENT LOCATION -->
<template v-slot:bottomright>
<v-fab icon="mdi-crosshairs-gps" @click="goToUserLocation" />
</template>
</leaflet-map>
<div v-else class="loader">
<span class="mb-4 text-grey">Loading Map</span>
<v-progress-circular indeterminate color="primary" />
@@ -22,7 +51,6 @@
<script setup lang="ts">
import 'leaflet/dist/leaflet.css';
import { LMap, LTileLayer, LControl } from '@vue-leaflet/vue-leaflet';
import { ref, onMounted, computed, watch } from 'vue';
import { useRouter } from 'vue-router'
import type { Ref } from 'vue';
@@ -30,12 +58,10 @@ import { BoundingBox } from '@/services/apiService';
import type { Cluster } from '@/services/apiService';
import { getALPRs, geocodeQuery, getClusters } from '@/services/apiService';
import { useDisplay, useTheme } from 'vuetify';
import DFMapMarker from '@/components/DFMapMarker.vue';
import type { ALPR } from '@/types';
import L from 'leaflet';
globalThis.L = L;
import 'leaflet/dist/leaflet.css'
import 'vue-leaflet-markercluster/dist/style.css'
import LeafletMap from '@/components/LeafletMap.vue';
const DEFAULT_ZOOM = 12;
@@ -48,6 +74,8 @@ const center: Ref<any|null> = ref(null);
const bounds: Ref<BoundingBox|null> = ref(null);
const searchField: Ref<any|null> = ref(null);
const searchQuery: Ref<string> = ref('');
const currentLocation: Ref<any|null> = ref(null);
const router = useRouter();
const { xs } = useDisplay();
@@ -56,7 +84,7 @@ const mapTileUrl = computed(() =>
theme.global.name.value === 'dark' ?
'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png' :
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
);
); // TODO: implement dark mode in LeafletMap.vue
const alprs: Ref<ALPR[]> = ref([]);
const clusters: Ref<Cluster[]> = ref([]);
@@ -96,6 +124,7 @@ function onSearch() {
function goToUserLocation() {
getUserLocation()
.then(location => {
console.log('User location:', location);
center.value = { lat: location[0], lng: location[1] };
zoom.value = DEFAULT_ZOOM;
}).catch(error => {
@@ -108,6 +137,7 @@ function getUserLocation(): Promise<[number, number]> {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
currentLocation.value = { lat: position.coords.latitude, lng: position.coords.longitude };
resolve([position.coords.latitude, position.coords.longitude]);
},
(error) => {
@@ -223,13 +253,14 @@ onMounted(() => {
.map-container {
width: 100%;
height: calc(100dvh - 64px);
overflow: auto;
}
.map-search {
width: calc(100vw - 22px);
max-width: 400px;
@media (min-width: 600px) {
max-width: 320px;
}
z-index: 1000;
}