CalvinBackup/deflock
1
0
Fork 0
mirror of https://github.com/FoggedLens/deflock.git synced 2026-05-14 20:48:07 +02: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
webapp/src/components/LeafletMap.vue
+69 -12
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>
webapp/src/components/NewVisitor.vue
-92
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>