Merge pull request #64 from Propy/dev

feat(LeafletMap): make pins open asset pages
Propy · Jan 5, 2024 · ec36928 · ec36928
2 parents c9e768c + ae5da8f
commit ec36928
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/src/assets/img/map-marker-3d-compressed.png b/src/assets/img/map-marker-3d-compressed.png
diff --git a/src/assets/img/map-marker-3d.png b/src/assets/img/map-marker-3d.png
diff --git a/src/components/LeafletMap.tsx b/src/components/LeafletMap.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
 import { MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { latLngBounds, latLng } from 'leaflet';
 
 import MarkerClusterGroup from 'react-leaflet-cluster'
 
-import markerIconPropyBlue from "../assets/svg/map_marker_propy_blue_stroked.svg";
+// import markerIconPropyBlue from "../assets/svg/map_marker_propy_blue_stroked.svg";
+import markerIconPropy3D from "../assets/img/map-marker-3d-compressed.png";
 import {Icon} from 'leaflet'
 
 import {
@@ -46,9 +48,9 @@ const LeafletMap = (props: PropsFromRedux & ILeafletMap) => {
   // zoom = 6 = US zoom on desktop
   // center = [38.171368, -95.430112] = middle area US
 
-  // let corner1 = leaflet.latLng(53.466832, -133.789535);
-  // let corner2 = leaflet.latLng(21.583438, -57.764142);
-  // let bounds = leaflet.latLngBounds(corner1, corner2);
+  let corner1 = latLng(85, -180);
+  let corner2 = latLng(-85, 180);
+  let bounds = latLngBounds(corner1, corner2);
 
   return (
     <MapContainer
@@ -61,7 +63,7 @@ const LeafletMap = (props: PropsFromRedux & ILeafletMap) => {
       scrollWheelZoom={scrollWheelZoom}
       center={center}
       boundsOptions={{padding: [50, 50]}}
-      // maxBounds={bounds}
+      maxBounds={bounds}
       minZoom={2}
       maxBoundsViscosity={0.7}
     >
@@ -72,9 +74,25 @@ const LeafletMap = (props: PropsFromRedux & ILeafletMap) => {
       <MarkerClusterGroup
         chunkedLoading
         // iconCreateFunction={createClusterCustomIcon}
+        maxClusterRadius={(zoom: number) => {
+          if(zoom === 18) {
+            return 10;
+          }
+          return 80;
+        }}
       >
         {markers && markers.map((marker) =>
-          <Marker position={[marker.latitude, marker.longitude]} icon={new Icon({iconUrl: markerIconPropyBlue, iconSize: [25, 41], iconAnchor: [12, 41]})}>
+          <Marker 
+            position={[marker.latitude, marker.longitude]} 
+            icon={new Icon({iconUrl: markerIconPropy3D, iconSize: [50, 50], iconAnchor: [25, 50]})}
+            eventHandlers={{
+              click: (e) => {
+                if(marker?.link) {
+                  window.open(`${window.location.origin}/#/${marker.link}`, '_blank');
+                }
+              },
+            }}
+          >
             {/* <Popup>
               A pretty CSS3 popup. <br /> Easily customizable.
             </Popup> */}

diff --git a/src/components/ReserveAnAddressHomeBanner.tsx b/src/components/ReserveAnAddressHomeBanner.tsx
@@ -115,7 +115,8 @@ const ReserveAnAddressHomeBanner = (props: PropsFromRedux) => {
               if(nftRecord.longitude && nftRecord.latitude && (renderResults.length < maxEntries)) {
                 renderResults.push({
                   latitude: Number(nftRecord.latitude),
-                  longitude: Number(nftRecord.longitude)
+                  longitude: Number(nftRecord.longitude),
+                  link: `token/${nftRecord.network_name}/${nftRecord.asset_address}/${nftRecord.token_id}`,
                 });
               }
             }

diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
@@ -122,6 +122,7 @@ export interface INFTRecord {
 export interface ICoordinate {
     longitude: number
     latitude: number
+    link: string
 }
 
 export interface IPagination {
@@ -159,6 +160,9 @@ export interface INFTCoordinateResponse {
 export interface INFTCoordinateEntry {
     longitude: string;
     latitude: string;
+    asset_address: string;
+    token_id: string;
+    network_name: string;
 }
 
 export interface IOwnedBalancesResult {
@@ -222,6 +226,7 @@ export interface IOfferRecord {
 export interface ILeafletMapMarker {
     longitude: number;
     latitude: number;
+    link?: string;
 }
 
 export interface IHorizontalScrollingTextEntry {