Show marker on map

kevinsimper · Nov 9, 2023 · 4774909 · 4774909
1 parent 07816b6
commit 4774909
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/pages/climbs.tsx b/pages/climbs.tsx
@@ -21,20 +21,7 @@ function ClimbsPage({
         {mountains.map((climb) => {
           return (
             <div className="border p-4">
-              <a
-                href={`https://www.google.com/maps/place/${climb.endLat},${climb.endLon}`}
-                className="block"
-                target={'_blank'}
-              >
-                {climb.name} - {climb.country}
-              </a>
-              <a
-                href={`https://www.google.com/maps/dir/${climb.startLat},${climb.startLon}/${climb.endLat},${climb.endLon}`}
-                className="block"
-                target={'_blank'}
-              >
-                See route
-              </a>
+              {climb.name} - {climb.country}
               <Link href={`/climbs/` + climb.id} className="block">
                 Details
               </Link>
@@ -48,7 +35,9 @@ function ClimbsPage({
 
 export const getServerSideProps = async () => {
   const xata = getXataClient()
-  const page = await xata.db.mountains.getAll()
+  const page = await xata.db.mountains.getAll({
+    sort: 'id',
+  })
   return {
     props: {
       mountains: page.map((p) => {

diff --git a/pages/climbs/[id].tsx b/pages/climbs/[id].tsx
@@ -12,13 +12,36 @@ function ClimbsPage({
   if (!GOOGLE_MAPS_PK) return false
   return (
     <div className="space-y-4">
-      <Link href="/climbs">Back</Link>
+      <Link href="/climbs">← Back</Link>
       <h1 className="text-2xl">{mountain.name}</h1>
+      <div>
+        <a
+          href={`https://www.google.com/maps/dir/${mountain.startLat},${mountain.startLon}/${mountain.endLat},${mountain.endLon}`}
+          className="block text-purple underline"
+          target={'_blank'}
+        >
+          See route on Google Maps
+        </a>
+      </div>
+      <div>
+        <div className="font-bold">Details</div>
+        <div>Length: {mountain.length && mountain.length / 1000} km</div>
+        <div>Country: {mountain.country}</div>
+      </div>
       <div className="flex" style={{ height: 500 }}>
         <MapSimple
           apiKey={GOOGLE_MAPS_PK}
           focusCenter={{ lat: mountain.endLat || 0, lon: mountain.endLon || 0 }}
-          onMapReady={() => {}}
+          onMapReady={(map) => {
+            const marker = new google.maps.Marker({
+              map: map,
+              position: {
+                lat: mountain.endLat || 0,
+                lng: mountain.endLon || 0,
+              },
+              title: mountain.name || '',
+            })
+          }}
           centerChanged={() => {}}
           mapOptions={{
             zoom: 11,