feat: add MapLibre GL map to property form and detail page
- Install maplibre-gl; use OpenFreeMap tiles (no API key) - PropertyMapPickerInner: address search via Nominatim, draggable marker, click-to-place, geolocation, clear button - PropertyMapPicker/View: dynamic next/dynamic wrappers (ssr: false) - PropertyMapViewInner: read-only marker view with navigation control - PropertyFormSheet: hidden mapLat/mapLng inputs, picker renders only when sheet is open, resets on property change - Property detail page: Konum section with PropertyMapView + Google Maps link - Sunum page: Google Maps deep link on PropertyCard when coordinates exist
This commit is contained in:
@@ -21,6 +21,7 @@ import {
|
||||
import { createAdminClient } from "@/lib/appwrite/server";
|
||||
import { getPropertyImagePreviewUrl, parseImageIds } from "@/lib/appwrite/storage-utils";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { PropertyMapView } from "@/components/map/property-map-view";
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>;
|
||||
@@ -166,6 +167,17 @@ export default async function PropertyDetailPage({ params }: Props) {
|
||||
{property.address}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{property.mapLat != null && property.mapLng != null && (
|
||||
<a
|
||||
href={`https://www.google.com/maps?q=${property.mapLat},${property.mapLng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-blue-600 hover:underline"
|
||||
>
|
||||
Google Maps'te aç ↗
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{property.description && (
|
||||
@@ -177,6 +189,18 @@ export default async function PropertyDetailPage({ params }: Props) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{property.mapLat != null && property.mapLng != null && (
|
||||
<div className="rounded-lg border overflow-hidden">
|
||||
<h2 className="px-4 pt-4 pb-2 text-sm font-semibold">Konum</h2>
|
||||
<PropertyMapView
|
||||
lat={property.mapLat}
|
||||
lng={property.mapLng}
|
||||
title={property.title}
|
||||
className="h-64 rounded-none border-0"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Activities */}
|
||||
{activities.length > 0 && (
|
||||
<div className="rounded-lg border p-4">
|
||||
|
||||
Reference in New Issue
Block a user