feat: add target location

This commit is contained in:
log101 2024-01-16 18:23:46 +03:00
parent 5de3797797
commit ccbe2e2213
4 changed files with 45 additions and 223 deletions

BIN
public/goal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 766 B

View File

@ -23,10 +23,7 @@ import LocationButton from '@/components/LockedContent';
<CardTitle>Ayşe</CardTitle> <CardTitle>Ayşe</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p> <p>Aşağıdaki konuma gitmen</p>
Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen
lazım 😘
</p>
</CardContent> </CardContent>
<CardFooter className="gap-2"> <CardFooter className="gap-2">
<CalendarIcon /> <CalendarIcon />
@ -43,6 +40,7 @@ import LocationButton from '@/components/LockedContent';
</Layout> </Layout>
<script> <script>
// TODO: Move script to a seperate file
import distance from '../utils/distance'; import distance from '../utils/distance';
let map: google.maps.Map, infoWindow: google.maps.InfoWindow; let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
@ -65,6 +63,21 @@ import LocationButton from '@/components/LockedContent';
const currentLocationIcon = document.createElement('img'); const currentLocationIcon = document.createElement('img');
currentLocationIcon.src = '/blue-dot.png'; currentLocationIcon.src = '/blue-dot.png';
const targetLocationIcon = document.createElement('img');
targetLocationIcon.src = '/goal.png';
targetLocationIcon.height = 32;
targetLocationIcon.width = 32;
const parser = new DOMParser();
// A marker with a custom inline SVG.
const pinSvgString =
'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-goal"><path d="M12 13V2l8 4-8 4"/><path d="M20.55 10.23A9 9 0 1 1 8 4.94"/><path d="M8 10a5 5 0 1 0 8.9 2.02"/></svg>';
const pinSvg = parser.parseFromString(
pinSvgString,
'image/svg+xml'
).documentElement;
const currentLocationMarkerView = new AdvancedMarkerElement({ const currentLocationMarkerView = new AdvancedMarkerElement({
map, map,
position: { lat: 37.434, lng: -122.082 }, position: { lat: 37.434, lng: -122.082 },
@ -72,6 +85,13 @@ import LocationButton from '@/components/LockedContent';
title: 'Current Location', title: 'Current Location',
}); });
const targetLocationMarkerView = new AdvancedMarkerElement({
map,
position: { lat: 37.434, lng: -122.082 },
content: pinSvg,
title: 'A marker using a custom PNG Image',
});
infoWindow = new google.maps.InfoWindow(); infoWindow = new google.maps.InfoWindow();
const locationButton = document.createElement('button'); const locationButton = document.createElement('button');
@ -95,17 +115,20 @@ import LocationButton from '@/components/LockedContent';
lng: position.coords.longitude, lng: position.coords.longitude,
}; };
const mapPos = map.getCenter();
const totalDistanceInKM = distance( const totalDistanceInKM = distance(
pos.lat, pos.lat,
pos.lng, pos.lng,
mapPos?.lat(), 41.045227057192136,
mapPos?.lng() 28.98791224002213
).toFixed(0); ).toFixed(0);
currentLocationMarkerView.position = pos; currentLocationMarkerView.position = pos;
targetLocationMarkerView.position = {
lat: 41.045227057192136,
lng: 28.98791224002213,
};
locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`; locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
}, },
() => { () => {

View File

@ -1,198 +0,0 @@
---
import '@/styles/globals.css';
import Layout from '../layouts/Layout.astro';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { CalendarIcon } from '@radix-ui/react-icons';
import { LockClosedIcon } from '@radix-ui/react-icons';
import '../styles/locked-page.css';
---
<Layout>
<main class="flex flex-col gap-3 my-4 items-center">
<Card className="w-full">
<CardHeader>
<CardTitle>Ayşe</CardTitle>
</CardHeader>
<CardContent>
<p>
Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen
lazım 😘
</p>
</CardContent>
<CardFooter className="gap-2">
<CalendarIcon />
<p>5 saat önce</p>
</CardFooter>
</Card>
<div id="map" class="w-full h-[450px]"></div>
<div class="module w-full h-[450px] p-4">
<div
class="module-inside flex flex-col justify-center items-center gap-2"
>
<Button>
<LockClosedIcon className="mr-2 h-4 w-4" />İçerik Kilitli
</Button>
<Card className="p-2">
<CardContent className="pb-0 text-center">
İçeriği görmek için konuma gitmelisin!
</CardContent>
</Card>
</div>
</div>
<Button className="w-full">Paylaş</Button>
</main>
</Layout>
<script>
import distance from '../utils/distance';
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
const { Map } = (await google.maps.importLibrary(
'maps'
)) as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = (await google.maps.importLibrary(
'marker'
)) as google.maps.MarkerLibrary;
map = new Map(document.getElementById('map') as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
mapId: 'DEMO_MAP_ID',
mapTypeControl: false,
});
const currentLocationIcon = document.createElement('img');
currentLocationIcon.src = '/blue-dot.png';
const currentLocationMarkerView = new AdvancedMarkerElement({
map,
position: { lat: 37.434, lng: -122.082 },
content: currentLocationIcon,
title: 'Current Location',
});
infoWindow = new google.maps.InfoWindow();
const locationButton = document.createElement('button');
const locationInfo = document.createElement('button');
locationButton.textContent = 'Konumuma Git';
locationInfo.textContent = 'Mesafe hesaplanıyor...';
locationButton.classList.add('custom-map-control-button');
locationInfo.classList.add('custom-map-control-button');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(locationInfo);
setInterval(
() =>
navigator.geolocation.getCurrentPosition(
(position: GeolocationPosition) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
const mapPos = map.getCenter();
const totalDistanceInKM = distance(
pos.lat,
pos.lng,
mapPos?.lat(),
mapPos?.lng()
).toFixed(0);
if (totalDistanceInKM === '0') window.location.assign('/unlocked');
currentLocationMarkerView.position = pos;
locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
},
() => {
handleLocationError(true, infoWindow, map.getCenter()!);
}
),
3000
);
locationButton.addEventListener('click', () => {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position: GeolocationPosition) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
map.setCenter(pos);
map.setZoom(12);
},
() => {
handleLocationError(true, infoWindow, map.getCenter()!);
}
);
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter()!);
}
});
}
function handleLocationError(
browserHasGeolocation: boolean,
infoWindow: google.maps.InfoWindow,
pos: google.maps.LatLng
) {
infoWindow.setPosition(pos);
infoWindow.setContent(
browserHasGeolocation
? 'Error: Konumunuz tespit edilemedi.'
: 'Error: Tarayıcınız konum tespitini desteklemiyor.'
);
infoWindow.open(map);
}
initMap();
</script>
<style>
.module {
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.module::before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-image: url('/sample-selfie.webp');
background-position: center;
background-repeat: no-repeat;
filter: blur(20px);
}
.module-inside {
position: relative;
}
</style>

View File

@ -1,19 +1,16 @@
.custom-map-control-button { .custom-map-control-button {
background-color: #fff; background-color: #fff;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px; margin: 10px;
padding: 0 0.5em; padding: 0 0.5em;
font: font: 400 18px Roboto, Arial, sans-serif;
400 18px Roboto, overflow: hidden;
Arial, height: 40px;
sans-serif; cursor: pointer;
overflow: hidden; }
height: 40px;
cursor: pointer;
}
.custom-map-control-button:hover { .custom-map-control-button:hover {
background: rgb(235, 235, 235); background: rgb(235, 235, 235);
} }