feat: add target location
This commit is contained in:
parent
5de3797797
commit
ccbe2e2213
BIN
public/goal.png
Normal file
BIN
public/goal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
|
|
@ -23,10 +23,7 @@ import LocationButton from '@/components/LockedContent';
|
|||
<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>
|
||||
<p>Aşağıdaki konuma gitmen</p>
|
||||
</CardContent>
|
||||
<CardFooter className="gap-2">
|
||||
<CalendarIcon />
|
||||
|
|
@ -43,6 +40,7 @@ import LocationButton from '@/components/LockedContent';
|
|||
</Layout>
|
||||
|
||||
<script>
|
||||
// TODO: Move script to a seperate file
|
||||
import distance from '../utils/distance';
|
||||
|
||||
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
|
||||
|
|
@ -65,6 +63,21 @@ import LocationButton from '@/components/LockedContent';
|
|||
const currentLocationIcon = document.createElement('img');
|
||||
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({
|
||||
map,
|
||||
position: { lat: 37.434, lng: -122.082 },
|
||||
|
|
@ -72,6 +85,13 @@ import LocationButton from '@/components/LockedContent';
|
|||
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();
|
||||
|
||||
const locationButton = document.createElement('button');
|
||||
|
|
@ -95,17 +115,20 @@ import LocationButton from '@/components/LockedContent';
|
|||
lng: position.coords.longitude,
|
||||
};
|
||||
|
||||
const mapPos = map.getCenter();
|
||||
|
||||
const totalDistanceInKM = distance(
|
||||
pos.lat,
|
||||
pos.lng,
|
||||
mapPos?.lat(),
|
||||
mapPos?.lng()
|
||||
41.045227057192136,
|
||||
28.98791224002213
|
||||
).toFixed(0);
|
||||
|
||||
currentLocationMarkerView.position = pos;
|
||||
|
||||
targetLocationMarkerView.position = {
|
||||
lat: 41.045227057192136,
|
||||
lng: 28.98791224002213,
|
||||
};
|
||||
|
||||
locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
|
||||
},
|
||||
() => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,19 +1,16 @@
|
|||
.custom-map-control-button {
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
|
||||
margin: 10px;
|
||||
padding: 0 0.5em;
|
||||
font:
|
||||
400 18px Roboto,
|
||||
Arial,
|
||||
sans-serif;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
|
||||
margin: 10px;
|
||||
padding: 0 0.5em;
|
||||
font: 400 18px Roboto, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-map-control-button:hover {
|
||||
background: rgb(235, 235, 235);
|
||||
}
|
||||
.custom-map-control-button:hover {
|
||||
background: rgb(235, 235, 235);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user