From 0bea2a7ee034e10d1deacedc1d79007929d59718 Mon Sep 17 00:00:00 2001
From: maximo <maximo@nimiq.com>
Date: Fri, 22 Sep 2023 14:48:51 +0700
Subject: [PATCH] added cryptocities flower

---
 database/getters.ts                           |  24 +--
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |  19 +-
 shared/compute-cluster.ts                     |   1 +
 shared/geo-utils.ts                           |  13 ++
 src/assets-dev/cryptocities-assets.ts         |   9 +-
 src/assets-dev/stories/locations.ts           |   5 +-
 .../cards/cryptocity/BasicInfoCryptocity.vue  |  13 +-
 .../cards/cryptocity/CryptocityCard.story.vue |  28 ++-
 .../cards/cryptocity/CryptocityCard.vue       |  43 ++---
 src/components/elements/Controls.vue          |  13 ++
 src/components/elements/TheMapInstance.vue    |   2 +-
 src/components/markers/ClusterMarkers.vue     |  32 +++-
 src/components/markers/CryptocityMarkers.vue  |  40 ++--
 src/components/markers/MapMarkers.vue         |  12 +-
 src/interfaces.ts                             | 176 ------------------
 src/stores/cluster.ts                         |  20 +-
 src/stores/cryptocity.ts                      |  75 ++++++++
 .../generate-locations-clusters-set/index.ts  |  39 ++--
 types/cryptocity.ts                           |  20 ++
 types/database.ts                             |   7 +-
 types/index.ts                                |   7 +-
 types/location.ts                             |   3 +-
 types/map.ts                                  |   9 +-
 24 files changed, 273 insertions(+), 340 deletions(-)
 delete mode 100644 src/interfaces.ts
 create mode 100644 src/stores/cryptocity.ts
 create mode 100644 types/cryptocity.ts

diff --git a/database/getters.ts b/database/getters.ts
index ec1641ba..dfb6a533 100644
--- a/database/getters.ts
+++ b/database/getters.ts
@@ -1,14 +1,16 @@
-import type { BoundingBox, Cluster, ComputedClusterSet, DatabaseArgs, DatabaseAuthArgs, DatabaseStatistics, Location, Suggestion } from '../types/index.ts'
-import { Category, Currency, DbReadFunction, Provider } from '../types/index.ts'
+import type { FeatureCollection } from '@turf/helpers'
+import type { BoundingBox, ComputedClusterSet, DatabaseArgs, DatabaseAuthArgs, Location, Suggestion } from '../types/index.ts'
+import { Category, Cryptocity, Currency, DbReadFunction, Provider } from '../types/index.ts'
 import { fetchDb } from './fetch.ts'
 
 /**
- * We hardcode the Currencies, Categories and Providers here, because they are rarely updated.
+ * We hardcode these values here, because they are rarely updated.
  * Even if we update those values in the database, we always need to update UI regardless.
  */
 export const CURRENCIES = Object.values(Currency)
 export const CATEGORIES = Object.values(Category)
 export const PROVIDERS = Object.values(Provider)
+export const CRYPTOCITIES = Object.values(Cryptocity)
 
 // Maximum number of rows from the database
 const MAX_N_ROWS = 1000
@@ -27,7 +29,7 @@ export async function getLocations(dbArgs: DatabaseArgs | DatabaseAuthArgs, bbox
   return locations.map(parseLocations)
 }
 
-export async function getLocation(dbArgs: DatabaseArgs, uuid: string, parseLocation: (l: Location) => Location): Promise<Location | undefined> {
+export async function getLocation(dbArgs: DatabaseArgs | DatabaseAuthArgs, uuid: string, parseLocation: (l: Location) => Location): Promise<Location | undefined> {
   const params = new URLSearchParams()
   params.append('location_uuid', uuid)
   const location = await fetchDb<Location>(DbReadFunction.GetLocation, dbArgs, params.toString())
@@ -38,21 +40,19 @@ export async function getLocation(dbArgs: DatabaseArgs, uuid: string, parseLocat
   return parseLocation(location)
 }
 
-export async function searchLocations(dbArgs: DatabaseArgs, query: string) {
+export async function searchLocations(dbArgs: DatabaseArgs | DatabaseAuthArgs, query: string) {
   const params = new URLSearchParams()
   params.append('p_query', query)
   return await fetchDb<Omit<Suggestion, 'type'>[]>(DbReadFunction.SearchLocations, dbArgs, params.toString()) ?? []
 }
 
-type GetClustersReturn = ComputedClusterSet & { cryptocities: Cluster[] }
-export async function getClusters(dbArgs: DatabaseArgs, bbox: BoundingBox, zoom: number, parseLocation: (l: Location) => Location = l => l): Promise<GetClustersReturn> {
+export async function getClusters(dbArgs: DatabaseArgs | DatabaseAuthArgs, bbox: BoundingBox, zoom: number, parseLocation: (l: Location) => Location = l => l): Promise<ComputedClusterSet> {
   const params = new URLSearchParams()
   Object.entries(bbox).forEach(([key, value]) => params.append(key.toLocaleLowerCase(), value.toString()))
   params.append('zoom_level', zoom.toString())
   const res = await fetchDb<ComputedClusterSet>(DbReadFunction.GetLocationsClustersSet, dbArgs, params.toString())
   return {
     clusters: res?.clusters ?? [],
-    cryptocities: res?.cryptocities ?? [],
     singles: res?.singles.map(parseLocation) ?? [],
   }
 }
@@ -61,10 +61,12 @@ export async function getClusters(dbArgs: DatabaseArgs, bbox: BoundingBox, zoom:
  * The maximum zoom level at which the clusters are computed in the database.
  * If the user zooms in more than this, the clusters will be computed in the client.
  */
-export async function getClusterMaxZoom(dbArgs: DatabaseArgs): Promise<number> {
+export async function getClusterMaxZoom(dbArgs: DatabaseArgs | DatabaseAuthArgs): Promise<number> {
   return await fetchDb<number>(DbReadFunction.GetMaxZoom, dbArgs) ?? -1 // FIXME: Show error to user instead of using -1
 }
 
-export async function getStats(dbArgs: DatabaseArgs): Promise<DatabaseStatistics | undefined> {
-  return await fetchDb<DatabaseStatistics>(DbReadFunction.GetStats, dbArgs)
+export async function getCryptocityPolygon(dbArgs: DatabaseArgs | DatabaseAuthArgs, city: Cryptocity): Promise<FeatureCollection | undefined> {
+  const params = new URLSearchParams()
+  params.append('city', city)
+  return await fetchDb<FeatureCollection>(DbReadFunction.GetCryptocityPolygon, dbArgs, params.toString())
 }
diff --git a/package.json b/package.json
index da2f2539..18126548 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@turf/boolean-point-in-polygon": "^6.5.0",
     "@turf/boolean-within": "^6.5.0",
     "@turf/helpers": "^6.5.0",
+    "@turf/intersect": "^6.5.0",
     "@turf/points-within-polygon": "^6.5.0",
     "@turf/union": "^6.5.0",
     "@types/google.maps": "^3.54.0",
@@ -37,7 +38,7 @@
     "@vueuse/math": "^10.4.1",
     "@vueuse/router": "^10.4.1",
     "pinia": "^2.1.6",
-    "radix-vue": "^0.1.33",
+    "radix-vue": "^0.2.3",
     "supercluster": "^8.0.1",
     "vue": "^3.3.4",
     "vue-i18n": "^9.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4af8340..f202b77d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ dependencies:
   '@turf/helpers':
     specifier: ^6.5.0
     version: 6.5.0
+  '@turf/intersect':
+    specifier: ^6.5.0
+    version: 6.5.0
   '@turf/points-within-polygon':
     specifier: ^6.5.0
     version: 6.5.0
@@ -60,8 +63,8 @@ dependencies:
     specifier: ^2.1.6
     version: 2.1.6(typescript@5.1.6)(vue@3.3.4)
   radix-vue:
-    specifier: ^0.1.33
-    version: 0.1.33(vue@3.3.4)
+    specifier: ^0.2.3
+    version: 0.2.3(vue@3.3.4)
   supercluster:
     specifier: ^8.0.1
     version: 8.0.1
@@ -763,6 +766,14 @@ packages:
     resolution: {integrity: sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==}
     dev: false
 
+  /@turf/intersect@6.5.0:
+    resolution: {integrity: sha512-2legGJeKrfFkzntcd4GouPugoqPUjexPZnOvfez+3SfIMrHvulw8qV8u7pfVyn2Yqs53yoVCEjS5sEpvQ5YRQg==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+      '@turf/invariant': 6.5.0
+      polygon-clipping: 0.15.3
+    dev: false
+
   /@turf/invariant@6.5.0:
     resolution: {integrity: sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==}
     dependencies:
@@ -4274,8 +4285,8 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
-  /radix-vue@0.1.33(vue@3.3.4):
-    resolution: {integrity: sha512-2nwcjrXNXML//iOxUeqyh2bBXQtQt3Xy1NqM2oHZJTNNEaL2QnMjlSN51DXMzx3QB2uex2IwqA1cFTHbJ34tyw==}
+  /radix-vue@0.2.3(vue@3.3.4):
+    resolution: {integrity: sha512-kA+3XCO5zXStbTrzbibhyKh62TlL+5Nq5FMAfPjS5/Ni8Qf0FGfWb924O2q2sV85HfZKHa9XcACuMN1NKZz0KA==}
     dependencies:
       '@floating-ui/dom': 1.5.1
       '@floating-ui/vue': 1.0.2(vue@3.3.4)
diff --git a/shared/compute-cluster.ts b/shared/compute-cluster.ts
index 9017a83d..4a1abf26 100644
--- a/shared/compute-cluster.ts
+++ b/shared/compute-cluster.ts
@@ -23,6 +23,7 @@ export function computeCluster(algorithm: Supercluster, locations: Location[], {
         lng: c.geometry.coordinates[0],
         lat: c.geometry.coordinates[1],
         count,
+        diameter: Math.max(24, Math.min(48, 0.24 * count + 24)),
 
         // Compute it lazily
         get expansionZoom() { return algorithm.getClusterExpansionZoom(clusterId) },
diff --git a/shared/geo-utils.ts b/shared/geo-utils.ts
index beea2b69..16b3f2a5 100644
--- a/shared/geo-utils.ts
+++ b/shared/geo-utils.ts
@@ -3,6 +3,7 @@ import type { MultiPolygon } from '@turf/helpers'
 import { featureCollection, multiPolygon, point } from '@turf/helpers'
 import pointsWithinPolygon from '@turf/points-within-polygon'
 import union from '@turf/union'
+import intersect from '@turf/intersect'
 import booleanWithin from '@turf/boolean-within'
 import type { BoundingBox, Point } from '../types/index.ts'
 
@@ -70,3 +71,15 @@ export function addBBoxToArea(bbox: BoundingBox, multiPoly?: MultiPolygon) {
 export function getItemsWithinBBox<T extends Point>(items: T[], bbox: BoundingBox) {
   return pointsWithinPolygon(featureCollection(items.map(toPoint)), toMultiPolygon(bbox)).features.flatMap(f => f.properties)
 }
+
+/**
+ * Checks if a bounding box is intersecting another bounding box.
+ * Since bounding boxes can cross the antimeridian, we need to check if any of the polygons created by toPolygon
+ * is within the othe multipolygon
+ */
+export function bBoxesIntersect(bbox1: BoundingBox, bbox2: BoundingBox) {
+  const [polygon1, polygon2] = [bbox1, bbox2].map(toPolygon)
+  return polygon1.some(p1 => polygon2.some(p2 => intersect(p1, p2)))
+}
+
+export const distance = ({ lat: x1, lng: y1 }: Point, { lat: x2, lng: y2 }: Point) => Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2)
diff --git a/src/assets-dev/cryptocities-assets.ts b/src/assets-dev/cryptocities-assets.ts
index 82bc87fb..1bf8d763 100644
--- a/src/assets-dev/cryptocities-assets.ts
+++ b/src/assets-dev/cryptocities-assets.ts
@@ -1,12 +1,13 @@
 import { Cryptocity } from 'types'
-import type { CryptocityContent } from 'types'
+import type { CryptocityData } from 'types'
 import { i18n } from '@/i18n/i18n-setup'
 
 // Note that description is defined as a getter to be able to use the i18nKeyPassThrough, as the actual translation
 // for providerLabel is happening in i18n-t in MapMarkers
-export const cryptocitiesContent: Record<Exclude<Cryptocity, Cryptocity.None>, CryptocityContent> = {
+export const cryptocitiesData: Record<Cryptocity, CryptocityData> = {
   [Cryptocity.SanJose]: {
-    name: `Criptociudad ${Cryptocity.SanJose}`,
+    cryptocity: Cryptocity.SanJose,
+    name: 'Criptociudad San José',
     get description() {
       return [
         i18n.t('The San Jose Cryptocity Initiative is part of the Cryptocity endeavour led by Nimiq and its partners.'),
@@ -15,5 +16,7 @@ export const cryptocitiesContent: Record<Exclude<Cryptocity, Cryptocity.None>, C
       ]
     },
     url: 'https://www.criptociudad.cr/',
+    centroid: { lat: 9.935, lng: -84.102 },
+    boundingBox: { neLat: 9.9720332, neLng: -84.0467977, swLat: 9.8998796, swLng: -84.1800327 },
   },
 }
diff --git a/src/assets-dev/stories/locations.ts b/src/assets-dev/stories/locations.ts
index 51f37a19..6d2ca9dc 100644
--- a/src/assets-dev/stories/locations.ts
+++ b/src/assets-dev/stories/locations.ts
@@ -1,9 +1,9 @@
 import { CATEGORIES } from 'database'
-import { Category, Cryptocity, Currency, type Location, LocationLink, Provider } from 'types'
+import { Category, Currency, type Location, LocationLink, Provider } from 'types'
 import { providersAssets } from '../provider-assets'
 import { translateCategory } from '@/translations'
 
-type ExtraFields = Pick<Location, 'isAtm' | 'isDark' | 'isLight' | 'provider' | 'category' | 'category_label' | 'providerLabel' | 'providerTooltip' | 'theme' | 'bg' | 'hasBottomBanner' | 'sells' | 'url' | 'linkTo' | 'cryptocity'>
+type ExtraFields = Pick<Location, 'isAtm' | 'isDark' | 'isLight' | 'provider' | 'category' | 'category_label' | 'providerLabel' | 'providerTooltip' | 'theme' | 'bg' | 'hasBottomBanner' | 'sells' | 'url' | 'linkTo'>
 export function getExtra(provider: Provider, sells: Currency[] = [], linkTo: LocationLink = LocationLink.GMaps): ExtraFields {
   const assets = providersAssets[provider]
   if (!assets)
@@ -33,7 +33,6 @@ export function getExtra(provider: Provider, sells: Currency[] = [], linkTo: Loc
     sells,
     url,
     linkTo,
-    cryptocity: Cryptocity.None,
   }
 }
 
diff --git a/src/components/cards/cryptocity/BasicInfoCryptocity.vue b/src/components/cards/cryptocity/BasicInfoCryptocity.vue
index fcdb9353..c9d8ca7a 100644
--- a/src/components/cards/cryptocity/BasicInfoCryptocity.vue
+++ b/src/components/cards/cryptocity/BasicInfoCryptocity.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { Component, PropType } from 'vue'
-import type { CryptocityCluster } from 'types'
 import CryptocityIcon from '@/components/icons/icon-cryptocity.vue'
 
 defineProps({
-  cryptocity: {
-    type: Object as PropType<CryptocityCluster>,
-    required: true,
-  },
+  // cryptocity: {
+  //   type: Object as PropType<CryptocityCluster>,
+  //   required: true,
+  // },
   icon: {
     type: Object as PropType<Component>,
   },
@@ -22,8 +21,8 @@ defineEmits({
   <div class="flex items-center gap-x-2">
     <CryptocityIcon class="w-[31px] h-[27px]" />
     <div>
-      <h3 class="text-base text-space">{{ cryptocity.name }}</h3>
-      <span class="text-sm text-space/60">{{ $tc('{count} locations', cryptocity.count) }}</span>
+      <h3 class="text-base text-space">cryptocity.name</h3>
+      <span class="text-sm text-space/60">{{ $tc('{count} locations', -1) }}</span>
     </div>
     <component :is="icon" class="text-[#C9CAD3] p-1 w-6 h-6 ml-auto transition hover:bg-space/10 focus-visible:bg-space/10 rounded-full" data-cryptocity-trigger @click="$emit('iconClick', $event)" />
   </div>
diff --git a/src/components/cards/cryptocity/CryptocityCard.story.vue b/src/components/cards/cryptocity/CryptocityCard.story.vue
index 8ed2f692..dc9c7dd7 100644
--- a/src/components/cards/cryptocity/CryptocityCard.story.vue
+++ b/src/components/cards/cryptocity/CryptocityCard.story.vue
@@ -1,25 +1,19 @@
 <script setup lang="ts">
-import type { CryptocityCluster } from 'types'
-import { Cryptocity } from 'types'
-import { ref } from 'vue'
-import CryptocityCard from './CryptocityCard.vue'
-import { cryptocitiesContent } from '@/assets-dev/cryptocities-assets'
+// const cryptocity: CryptocityCluster = {
+//   ...cryptocitiesContent[Cryptocity.SanJose],
+//   count: 12,
+//   id: 1,
+//   lng: 1,
+//   lat: 1,
+//   expansionZoom: 4,
+//   city: Cryptocity.SanJose,
+// }
 
-const cryptocity: CryptocityCluster = {
-  ...cryptocitiesContent[Cryptocity.SanJose],
-  count: 12,
-  id: 1,
-  lng: 1,
-  lat: 1,
-  expansionZoom: 4,
-  city: Cryptocity.SanJose,
-}
-
-const open = ref(false)
+// const open = ref(false)
 </script>
 
 <template>
   <Story title="Cryptocity Card" :layout="{ type: 'grid', width: '360px' }">
-    <CryptocityCard :cryptocity="cryptocity" :show-description="open" @icon-click="open = !open" />
+    <!-- <CryptocityCard :cryptocity="cryptocity" :show-description="open" @icon-click="open = !open" /> -->
   </Story>
 </template>
diff --git a/src/components/cards/cryptocity/CryptocityCard.vue b/src/components/cards/cryptocity/CryptocityCard.vue
index e19762fd..e85e0f2d 100644
--- a/src/components/cards/cryptocity/CryptocityCard.vue
+++ b/src/components/cards/cryptocity/CryptocityCard.vue
@@ -1,18 +1,9 @@
 <script setup lang="ts">
-import type { CryptocityCluster } from 'types'
-import type { PropType } from 'vue'
-import { useBreakpoints } from '@vueuse/core'
-import { screens } from 'tailwindcss-nimiq-theme'
-import InfoIcon from '@/components/icons/icon-info.vue'
-import ChevronDownIcon from '@/components/icons/icon-chevron-down.vue'
-import BasicInfoCryptocity from '@/components/cards/cryptocity/BasicInfoCryptocity.vue'
-import Button from '@/components/atoms/Button.vue'
-
 defineProps({
-  cryptocity: {
-    type: Object as PropType<CryptocityCluster>,
-    required: true,
-  },
+  // cryptocity: {
+  //   type: Object as PropType<CryptocityCluster>,
+  //   required: true,
+  // },
   showDescription: {
     default: false,
     type: Boolean,
@@ -23,9 +14,9 @@ defineEmits({
   iconClick: (e: MouseEvent) => true,
 })
 
-const { smaller } = useBreakpoints(screens)
-const DESKTOP_LAYOUT = 'md' // FIXME This is suppose to be the same value as in the tailwind config
-const isMobile = smaller(DESKTOP_LAYOUT)
+// const { smaller } = useBreakpoints(screens)
+// const DESKTOP_LAYOUT = 'md' // FIXME This is suppose to be the same value as in the tailwind config
+// const isMobile = smaller(DESKTOP_LAYOUT)
 </script>
 
 <template>
@@ -37,14 +28,14 @@ const isMobile = smaller(DESKTOP_LAYOUT)
     @pointerdown.capture.stop.prevent
     @dblclick.capture.stop.prevent
   >
-    <BasicInfoCryptocity
-      :cryptocity="cryptocity"
-      :icon="isMobile ? InfoIcon : ChevronDownIcon"
-      :class="{
-        '[&_[data-cryptocity-trigger]]:rotate-180': showDescription,
-      }"
-      @icon-click.stop="$emit('iconClick', $event)"
-    />
+    <div class="flex items-center gap-x-2">
+      <CryptocityIcon class="w-[31px] h-[27px]" />
+      <div>
+        <h3 class="text-base text-space">cryptocity.name</h3>
+        <span class="text-sm text-space/60">{{ $tc('{count} locations', -1) }}</span>
+      </div>
+      <!-- <component :is="icon" class="text-[#C9CAD3] p-1 w-6 h-6 ml-auto transition hover:bg-space/10 focus-visible:bg-space/10 rounded-full" data-cryptocity-trigger @click="$emit('iconClick', $event)" /> -->
+    </div>
     <div
       class="grid transition-[grid-template-rows] grid-cols-[mEin(290px,calc(100vh-48px))] duration-300" :class="{
         'grid-rows-[0fr]': !showDescription,
@@ -52,12 +43,12 @@ const isMobile = smaller(DESKTOP_LAYOUT)
       }"
     >
       <div class="overflow-hidden delay-[2s]" :class="{ '[&>*]:opacity-0': !showDescription, '[&>*]:opacity-100': showDescription }">
-        <p v-for="(p, i) in cryptocity.description" :key="i" class="pt-2 text-xs text-space/70">{{ p }}</p>
+        <!-- <p v-for="(p, i) in cryptocity.description" :key="i" class="pt-2 text-xs text-space/70">{{ p }}</p>
         <Button :href="cryptocity.url" class="mt-2 !p-0 !h-auto" bg-color="transparent" size="sm" text-color="sky">
           <template #label>
             {{ cryptocity.url }}
           </template>
-        </Button>
+        </Button> -->
       </div>
     </div>
   </div>
diff --git a/src/components/elements/Controls.vue b/src/components/elements/Controls.vue
index d5bd86cb..d4b84592 100644
--- a/src/components/elements/Controls.vue
+++ b/src/components/elements/Controls.vue
@@ -29,6 +29,19 @@ async function setBrowserPosition() {
 
 <template>
   <div class="flex flex-col gap-y-4">
+    <!-- <PopoverRoot v-if="showCryptocity">
+      <PopoverTrigger class="!w-8 !h-8 shadow bg-white rounded-full p-1.5" :aria-label="$t('Information about this Cryptocity')"><CryptocityIcon /></PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent
+          side="bottom" :side-offset="-32" class="will-change-[transform,opacity] animate-slideUpAndFade mr-6"
+          @close-auto-focus.prevent @interact-outside.prevent
+        >
+          <PopoverClose class="rounded-full outline-none cursor-default" :aria-label="$t('Close')"><CrossIcon /></PopoverClose>
+          <CryptocityCard :cryptocity="cryptocity!" :show-description="true" />
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot> -->
+
     <Button
       v-if="browserPositionIsSupported"
       class="!w-8 !h-8 shadow"
diff --git a/src/components/elements/TheMapInstance.vue b/src/components/elements/TheMapInstance.vue
index 03a627c0..ffcacd9f 100644
--- a/src/components/elements/TheMapInstance.vue
+++ b/src/components/elements/TheMapInstance.vue
@@ -60,7 +60,7 @@ const isDark = useDark()
 
   <GoogleMap
     ref="mapInstance" v-bind="$attrs" :api-key="GOOGLE_MAP_KEY" :language="i18n.locale" disable-default-ui :gesture-handling="mapGestureBehaviour"
-    :keyboard-shortcuts="false" :styles="googleMapStyles" :max-zoom="21" :min-zoom="3" :restriction="restriction" :clickable-icons="false"
+    :keyboard-shortcuts="false" :styles="googleMapStyles" :max-zoom="21" :min-zoom="3" :restriction="restriction" :clickable-icons="false" :libraries="['places', 'maps'] as unknown as ['places']"
     @idle.once="() => { mapLoaded = true; setInitialMapPosition() }"
   >
     <MapMarkers />
diff --git a/src/components/markers/ClusterMarkers.vue b/src/components/markers/ClusterMarkers.vue
index fab5116a..11ab89de 100644
--- a/src/components/markers/ClusterMarkers.vue
+++ b/src/components/markers/ClusterMarkers.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import type { Cluster, Point } from 'types'
+import type { Cluster, CryptocityMarker, Point } from 'types'
 import { CustomMarker } from 'vue3-google-map'
 import type { PropType } from 'vue'
+import { createReusableTemplate } from '@vueuse/core'
 import { useMap } from '@/stores/map'
+import CryptocityIcon from '@/components/icons/icon-cryptocity.vue'
 
 defineProps({
   clusters: {
     type: Object as PropType<Cluster[]>,
     required: true,
   },
+  cryptocities: {
+    type: Object as PropType<CryptocityMarker>,
+    required: true,
+  },
 })
 
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{ cluster: Cluster }>()
+
 const { setPosition } = useMap()
 const { zoom } = storeToRefs(useMap())
 
@@ -26,13 +34,27 @@ function onClusterClick(center: Point, proposedZoom: number) {
 </script>
 
 <template>
+  <DefineTemplate v-slot="{ cluster: { count, diameter } }">
+    <div class="grid text-sm font-bold text-white transition-colors rounded-full shadow cursor-pointer aspect-square place-content-center bg-space hover:bg-[#35395A] focus:bg-[#35395A] ring-white/20 ring-2 ring-offset-1 ring-offset-white/40 max-desktop:clickable" :style="`width: ${diameter}px; font-size: clamp(14px, ${0.14 * count + 4}px, 18px)`">
+      {{ count < 100 ? count : '99+' }}
+    </div>
+  </DefineTemplate>
+
   <CustomMarker
-    v-for="({ lat, lng, count, expansionZoom, id }) in clusters" :key="id"
+    v-for="({ lat, lng, count, expansionZoom, diameter, id }) in clusters"
+    :key="`${cryptocities?.[id]?.length > 0 ? cryptocities[id][0].cryptocity : 'c'}-${id}`"
     :options="{ position: { lat, lng }, anchorPoint: 'CENTER' }"
     data-custom-marker
   >
-    <div class="grid text-sm font-bold text-white transition-colors rounded-full shadow cursor-pointer aspect-square place-content-center bg-space hover:bg-[#35395A] focus:bg-[#35395A] ring-white/20 ring-2 ring-offset-1 ring-offset-white/40 max-desktop:clickable" :style="`width: clamp(24px, ${0.24 * count + 24}px, 48px); font-size: clamp(14px, ${0.14 * count + 4}px, 18px)`" @click="onClusterClick({ lat, lng }, expansionZoom)">
-      {{ count < 100 ? count : '99+' }}
-    </div>
+    <ReuseTemplate v-if="cryptocities[id] === undefined" :cluster="{ lat, lng, count, expansionZoom, diameter, id }" @click="onClusterClick({ lat, lng }, expansionZoom)" />
+
+    <ul v-else class="relative group">
+      <li class="relative z-10"><ReuseTemplate :cluster="{ lat, lng, count, expansionZoom, diameter, id }" @click="onClusterClick({ lat, lng }, expansionZoom)" /></li>
+      <li v-for="city in cryptocities[id]" :key="city.cryptocity" class="clickable-sm absolute top-0 z-0 transition-transform scale-[0.85] translate-x-3 group-hover:scale-100 group-hover:translate-x-[calc(100%+8px)]">
+        <div class="grid p-1 bg-white rounded-full shadow cursor-pointer aspect-square place-content-center" :style="`width: ${diameter}px`">
+          <CryptocityIcon class="w-full transition-transform translate-x-0.5 group-hover:translate-x-0 -rotate-45 group-hover:rotate-0" />
+        </div>
+      </li>
+    </ul>
   </CustomMarker>
 </template>
diff --git a/src/components/markers/CryptocityMarkers.vue b/src/components/markers/CryptocityMarkers.vue
index 5ba876ac..afa304fa 100644
--- a/src/components/markers/CryptocityMarkers.vue
+++ b/src/components/markers/CryptocityMarkers.vue
@@ -1,38 +1,32 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import type { CryptocityCluster } from 'types'
-import { type PropType, ref } from 'vue'
-import { CustomMarker } from 'vue3-google-map'
-import { useMap } from '@/stores/map'
-import CryptocityCard from '@/components/cards/cryptocity/CryptocityCard.vue'
-
 // import SheetModal from '@/components/atoms/SheetModal.vue'
 
-defineProps({
-  cryptocities: {
-    type: Object as PropType<CryptocityCluster[]>,
-    required: true,
-  },
-})
+// defineProps({
+//   cryptocities: {
+//     type: Object as PropType<CryptocityContent[]>,
+//     required: true,
+//   },
+// })
 
-const { setPosition } = useMap()
-const { zoom } = storeToRefs(useMap())
+// const { setPosition } = useMap()
+// const { zoom } = storeToRefs(useMap())
 
-function onClusterClick({ expansionZoom: proposedZoom, lat, lng }: CryptocityCluster) {
-  // To make it more fluid if zoom is lower than 13, the minimum zoom change must be 3
-  const newZoom = proposedZoom < 13 ? Math.max(proposedZoom, zoom.value + 3) : proposedZoom
-  setPosition({ center: { lat, lng }, zoom: newZoom })
-}
+// function onClusterClick({ expansionZoom: proposedZoom, lat, lng }: CryptocityCluster) {
+//   // To make it more fluid if zoom is lower than 13, the minimum zoom change must be 3
+//   const newZoom = proposedZoom < 13 ? Math.max(proposedZoom, zoom.value + 3) : proposedZoom
+//   setPosition({ center: { lat, lng }, zoom: newZoom })
+// }
 
 // const { smaller } = useBreakpoints(screens)
 // const DESKTOP_LAYOUT = 'md' // FIXME This is suppose to be the same value as in the tailwind config
 // const isMobile = smaller(DESKTOP_LAYOUT)
 
-const cryptocityOpen = ref<CryptocityCluster | undefined>()
+// const cryptocityOpen = ref<CryptocityCluster | undefined>()
 </script>
 
 <template>
-  <CustomMarker
+  <h1>1</h1>
+  <!-- <CustomMarker
     v-for="cryptocity in cryptocities" :key="cryptocity.id"
     :options="{ position: { lat: cryptocity.lat, lng: cryptocity.lng }, anchorPoint: 'CENTER' }" data-custom-marker
   >
@@ -40,5 +34,5 @@ const cryptocityOpen = ref<CryptocityCluster | undefined>()
       :cryptocity="cryptocity" :show-description="cryptocity.city === cryptocityOpen?.city"
       @icon-click="cryptocityOpen = cryptocity.city === cryptocityOpen?.city ? undefined : cryptocity" @click="onClusterClick(cryptocity)"
     />
-  </CustomMarker>
+  </CustomMarker> -->
 </template>
diff --git a/src/components/markers/MapMarkers.vue b/src/components/markers/MapMarkers.vue
index 4e791d3a..fde5406a 100644
--- a/src/components/markers/MapMarkers.vue
+++ b/src/components/markers/MapMarkers.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import ClusterMarkers from './ClusterMarkers.vue'
-import CryptocityMarkers from './CryptocityMarkers.vue'
 import SingleMarkers from './SingleMarkers.vue'
 import { useCluster } from '@/stores/cluster'
-import { useMap } from '@/stores/map'
+import { useCryptocity } from '@/stores/cryptocity'
 
-const { clusters, singles, cryptocities } = storeToRefs(useCluster())
+const { clusters, singles } = storeToRefs(useCluster())
+const { cryptocities } = storeToRefs(useCryptocity())
 
-const { zoom } = storeToRefs(useMap())
+// const { zoom } = storeToRefs(useMap())
 </script>
 
 <template>
-  <ClusterMarkers :clusters="clusters" />
+  <ClusterMarkers :clusters="clusters" :cryptocities="cryptocities" />
   <SingleMarkers :singles="singles" />
-  <CryptocityMarkers v-if="zoom <= 12" :cryptocities="cryptocities" />
+  <!-- <CryptocityMarkers v-if="zoom <= 12" :cryptocities="cryptocities" /> -->
 </template>
diff --git a/src/interfaces.ts b/src/interfaces.ts
deleted file mode 100644
index 79e00bfb..00000000
--- a/src/interfaces.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-// TODO Redo this interfaces
-
-/*
-  General
-*/
-export interface HTMLElement {
-  requestFullscreen?: () => Promise<void>
-  msRequestFullScreen?: () => Promise<void>
-  mozRequestFullScreen?: () => Promise<void>
-  webkitRequestFullScreen?: () => Promise<void>
-}
-
-/*
-  Maps related
-*/
-export interface bounds {
-  Ra: {
-    hi: number
-    lo: number
-  }
-  ub: {
-    hi: number
-    lo: number
-  }
-}
-
-export interface coords {
-  lat: number | undefined
-  lng: number | undefined
-}
-
-export interface boundingBox {
-  swLng: number | null
-  swLat: number | null
-  neLng: number | null
-  neLat: number | null
-}
-
-/*
-  merchant-map-client
-*/
-export interface pickupData {
-  created_at: string
-  geo_location: {
-    coordinates: number[]
-    type: string
-  }
-  id: number
-  label: string | null
-  place_id: string | null
-  place_information: string
-  place_information_parsed: geoInfrmation
-}
-
-export interface geoInfrmation {
-  address_components: {
-    long_name: string
-    short_name: string
-    types: string[]
-  }[]
-  adr_address: string // <span class=\"street-address\">Street 1</span>, <span class=\"postal-code\">1234</span> <span class=\"locality\">City</span>, <span class=\"country-name\">Country</span>
-  business_status: string // OPERATIONAL
-  formatted_address: string // "Street 1, 1234 City, Country"
-  formatted_phone_number: string // "12345 1234567"
-  geometry: {
-    location: coords
-    viewport: {
-      northeast: coords
-      southwest: coords
-    }
-  }
-  icon: string // https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/restaurant-71.png
-  icon_background_color: string // "#FF9E67"
-  icon_mask_base_uri: string // "https://maps.gstatic.com/mapfiles/place_api/icons/v2/restaurant_pinlet"
-  international_phone_number: string // "+23 2334 12323"
-  name: string // "Super Restaurant X"
-  opening_hours: {
-    open_now: boolean
-    periods: {
-      close: {
-        day: number
-        time: string // 2200
-      }
-      open: {
-        day: number
-        time: string // 1800
-      }
-    }[]
-    weekday_text: string[] // Monday: 6:00 – 10:00 PM
-  }
-  photos?: {
-    height: number
-    html_attributions: string[] // <a href=\"https://maps.google.com/maps/contrib/113921935049083142308\">STEAK&#39;S BAR Restaurant</a>,
-    photo_reference: string // CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU
-  }[]
-  place_id: string
-  plus_code: {
-    compound_code: string
-    global_code: string
-  }
-  price_level: number // 2
-  rating: number // 4.6
-  reference: string // "ChIJzbnO-Zjyc0cRB6fNXpoJH58"
-  reviews: Record<string, unknown>[] // todo, not sure how this looks as no entry currently has reviews
-  types: string[] // "restaurant", "food", "point_of_interest"
-  url: string // "https://maps.google.com/?cid=11465893734928721671"
-  user_ratings_total: number // 186
-  utc_offset: number // 120
-  vicinity: string // Street 1, City
-  website: string // URL
-}
-
-/*
-  made a seperate interface to declare it properly
-  on the ListItem component
-*/
-export interface itemData {
-  id: number
-  label: string
-  description: string
-  website: string | null
-  email: string | null
-  phone: string | null
-  zip: string | null
-  city: string | null
-  country: string | null
-  digital_goods: boolean
-  created_at: string
-  updated_at: string
-  address_line_1: string | null
-  address_line_2: string | null
-  address_line_3: string | null
-  pickups: pickupData[]
-  shippings: pickupData[] // todo: no data, yet (assuming the same as pickups)
-}
-
-export interface merchant_map_result {
-  current_page: number
-  data: itemData[]
-  first_page_url: string
-  from: number
-  last_page: number
-  last_page_url: string
-  links:
-  | [
-    {
-      url: string | null
-      label: string
-      active: boolean
-    },
-  ]
-  | []
-  next_page_url: string | null
-  path: string
-  per_page: number
-  prev_page_url: string | null
-  to: number
-  total: number
-}
-
-/*
-  Content Elements
-*/
-export interface selectEntry {
-  id: string
-  name: string
-}
-
-/*
-  Filter
-*/
-export interface searchFilter {
-  bounding_box?: string
-  limit?: number
-  accepts?: string[] // todo: not filterable, yet (backend-wise)
-}
diff --git a/src/stores/cluster.ts b/src/stores/cluster.ts
index 6433c104..24a444b7 100644
--- a/src/stores/cluster.ts
+++ b/src/stores/cluster.ts
@@ -1,6 +1,6 @@
 import { getClusterMaxZoom, getClusters } from 'database'
 import { defineStore, storeToRefs } from 'pinia'
-import type { Cluster, ComputedClusterSet, CryptocityCluster, Location, LocationClusterParams, LocationClusterSet } from 'types'
+import type { Cluster, ComputedClusterSet, Location, LocationClusterParams, LocationClusterSet } from 'types'
 import { CLUSTERS_MAX_ZOOM, addBBoxToArea, algorithm, bBoxIsWithinArea, getItemsWithinBBox, toMultiPolygon } from 'shared'
 import { computed, shallowRef } from 'vue'
 import { useLocations } from './locations'
@@ -8,7 +8,6 @@ import { useFilters } from './filters'
 import { useMap } from './map'
 import { DATABASE_ARGS, parseLocation } from '@/shared'
 import { computeCluster } from '@/../shared/compute-cluster'
-import { cryptocitiesContent } from '@/assets-dev/cryptocities-assets'
 
 export const useCluster = defineStore('cluster', () => {
   const { setLocations, getLocations } = useLocations()
@@ -30,8 +29,6 @@ export const useCluster = defineStore('cluster', () => {
    */
   const clusters = shallowRef<Cluster[]>([])
   const clustersInView = computed(() => boundingBox.value ? getItemsWithinBBox(clusters.value, boundingBox.value) : [])
-  const cryptocities = shallowRef<CryptocityCluster[]>([]) // same as cluster
-  const cryptocitiesInView = computed(() => boundingBox.value ? getItemsWithinBBox(cryptocities.value, boundingBox.value) : [])
   const singles = shallowRef<Location[]>([])
   const singlesInView = computed(() => boundingBox.value ? getItemsWithinBBox(filterLocations(singles.value), boundingBox.value) : [])
 
@@ -55,7 +52,6 @@ export const useCluster = defineStore('cluster', () => {
     // Update the memoized item if it exists
     if (!needsToUpdate) {
       clusters.value = item.memoizedClusters
-      cryptocities.value = item.memoizedCryptocities
       singles.value = item.memoizedSingles
     }
 
@@ -81,15 +77,14 @@ export const useCluster = defineStore('cluster', () => {
 
   async function getClusterFromClient(): Promise<ComputedClusterSet> {
     const locations = await getLocations(boundingBox.value!)
-    const res = computeCluster(algorithm(80), locations, { boundingBox: boundingBox.value!, zoom: zoom.value })
-    return { ...res, cryptocities: [] } // When zoom is high, user does not see cryptocities
+    return computeCluster(algorithm(80), locations, { boundingBox: boundingBox.value!, zoom: zoom.value })
   }
 
   async function getClusterFromDatabase(): Promise<ComputedClusterSet> {
     const res = await getClusters(DATABASE_ARGS, boundingBox.value!, zoom.value, parseLocation)
     setLocations(res.singles)
-    const cryptocities = res.cryptocities.map(c => ({ ...cryptocitiesContent[c.city], ...c } as CryptocityCluster))
-    return { ...res, cryptocities }
+    res.clusters.forEach(c => c.diameter = Math.max(24, Math.min(48, 0.24 * c.count + 24)))
+    return res
   }
 
   async function cluster() {
@@ -105,37 +100,32 @@ export const useCluster = defineStore('cluster', () => {
     if (!needsToUpdate)
       return
 
-    const { clusters: newClusters, singles: newSingles, cryptocities: newCryptocities } = await shouldRunInClient(key)
+    const { clusters: newClusters, singles: newSingles } = await shouldRunInClient(key)
       ? await getClusterFromClient()
       : await getClusterFromDatabase()
 
     if (item) {
       item.memoizedArea = addBBoxToArea(boundingBox.value!, item.memoizedArea)
       item.memoizedClusters.push(...newClusters.filter(c => item.memoizedClusters.every(i => i.id !== c.id)))
-      item.memoizedCryptocities.push(...newCryptocities.filter(c => item.memoizedCryptocities.every(i => i.id !== c.id)))
       item.memoizedSingles.push(...newSingles.filter(s => item.memoizedSingles.every(i => i.uuid !== s.uuid)))
     }
     else {
       memoized.set(key, {
         memoizedArea: toMultiPolygon(boundingBox.value!).geometry,
         memoizedClusters: newClusters,
-        memoizedCryptocities: newCryptocities,
         memoizedSingles: newSingles,
       })
     }
 
     clusters.value = newClusters
-    cryptocities.value = newCryptocities
     singles.value = newSingles
   }
 
   return {
     cluster,
     clusters,
-    cryptocities,
     singles,
     clustersInView,
-    cryptocitiesInView,
     singlesInView,
     needsToUpdate,
   }
diff --git a/src/stores/cryptocity.ts b/src/stores/cryptocity.ts
new file mode 100644
index 00000000..6fd58df2
--- /dev/null
+++ b/src/stores/cryptocity.ts
@@ -0,0 +1,75 @@
+import { useDebounceFn, useLocalStorage } from '@vueuse/core'
+import { defineStore, storeToRefs } from 'pinia'
+import type { BoundingBox, CryptocityMarker, CryptocityMemoized } from 'types'
+import { getCryptocityPolygon } from 'database'
+import { addBBoxToArea, bBoxIsWithinArea, bBoxesIntersect, distance } from 'shared'
+import { ref, watch } from 'vue'
+import { useMap } from './map'
+import { useCluster } from './cluster'
+import { cryptocitiesData } from '@/assets-dev/cryptocities-assets.ts'
+import { DATABASE_ARGS } from '@/shared'
+
+export const useCryptocity = defineStore('cryptocities', () => {
+  const { map, boundingBox, zoom } = storeToRefs(useMap())
+  const { clustersInView } = storeToRefs(useCluster())
+
+  const cryptocities = useLocalStorage('cryptocities', cryptocitiesData)
+
+  // The cryptocities markers will be set:
+  // - In the centroid position if they do not clash with any cluster
+  // - Attached to the cluster if they clash with any cluster
+  const cryptocitiesMarkers = ref<CryptocityMarker>({})
+  const memoizedMarkers = new Map<number /* zoom */, CryptocityMemoized>()
+
+  async function loadCryptocities(boundingBox: BoundingBox, zoom: number, map: google.maps.Map) {
+    const memoized = memoizedMarkers.get(zoom) || { area: { type: 'MultiPolygon', coordinates: [] }, markers: {} }
+    if (bBoxIsWithinArea(boundingBox, memoized.area)) {
+      cryptocitiesMarkers.value = memoized.markers
+      return
+    }
+
+    // Check if the bounding box of any cryptocity is in the view
+    const cryptocitiesInView = Object.values(cryptocities.value).filter(p => bBoxesIntersect(p.boundingBox, boundingBox))
+    if (cryptocitiesInView.length === 0)
+      return
+
+    await Promise.allSettled(cryptocitiesInView.map(async city => city.polygon ||= await getCryptocityPolygon(DATABASE_ARGS, city.cryptocity)!))
+
+    const markers: CryptocityMarker = {}
+    for (const city of cryptocitiesInView) {
+      city.polygon ||= await getCryptocityPolygon(DATABASE_ARGS, city.cryptocity)!
+
+      // check if it clashes
+      const clusterToBeAttached = clustersInView.value.filter(c => distance(c, city.centroid) < c.diameter + 8 /* padding */)[0]
+
+      // Add it to
+      const key = clusterToBeAttached?.id ?? -1
+      if (!markers[key])
+        markers[key] = []
+      markers[key].push(city)
+    }
+
+    memoized.area = addBBoxToArea(boundingBox, memoized.area)
+    memoized.markers = markers
+    cryptocitiesMarkers.value = markers
+
+    // map.data.addGeoJson(city.polygon as object)
+    map.data.setStyle({
+      fillColor: 'rgb(31 35 72)',
+      fillOpacity: 0.4,
+      strokeWeight: 0,
+    })
+  }
+
+  const loadCryptocitiesDebouncer = useDebounceFn(loadCryptocities, 600)
+
+  watch(clustersInView, async () => {
+    if (!boundingBox.value || !map.value)
+      return
+    loadCryptocitiesDebouncer(boundingBox.value, zoom.value, map.value)
+  })
+
+  return {
+    cryptocities: cryptocitiesMarkers,
+  }
+})
diff --git a/supabase/functions/generate-locations-clusters-set/index.ts b/supabase/functions/generate-locations-clusters-set/index.ts
index 90cc810e..7c4c2c54 100644
--- a/supabase/functions/generate-locations-clusters-set/index.ts
+++ b/supabase/functions/generate-locations-clusters-set/index.ts
@@ -4,7 +4,6 @@ import { flushClusterTable, insertLocationsClusterSet } from '../../../database/
 import { getLocations } from '../../../database/getters.ts'
 import { algorithm, computeCluster } from '../../../shared/compute-cluster.ts'
 import type { DatabaseAuthArgs, InsertLocationsClustersSetParamsItem } from '../../../types/database.ts'
-import { Cryptocity } from '../../../types/database.ts'
 import type { BoundingBox, Cluster, Location } from '../../../types/index.ts'
 import { getAuth } from '../../../database/fetch.ts'
 
@@ -29,17 +28,17 @@ async function cluster() {
     token: '',
   }
 
+  console.log('Flushing cluster table...')
   await flushClusterTable(dbArgs)
 
   const boundingBox: BoundingBox = { neLat: 90, neLng: 180, swLat: -90, swLng: -180 }
+
   dbArgs.token = await getAuth(dbArgs)
-  const locations = await getLocations(dbArgs, boundingBox)
-  const cryptocities = Object.values(Cryptocity)
+  if (!dbArgs.token)
+    throw new Error('Failed to get auth token')
+  console.log('Got auth token')
 
-  const locationsByCryptocity: Record<Cryptocity, Location[]>
-    = cryptocities.reduce((acc, cryptocity) => ({
-      ...acc, [cryptocity]: locations.filter(l => l.cryptocity === cryptocity),
-    }), {} as Record<Cryptocity, Location[]>)
+  const locations = await getLocations(dbArgs, boundingBox)
 
   const minZoom = Number(Deno.env.get('MIN_ZOOM')) || 3
   const maxZoom = Number(Deno.env.get('MAX_ZOOM')) || 14
@@ -48,28 +47,28 @@ async function cluster() {
   const radii: Radii = Array.from({ length: maxZoom - minZoom + 1 }, (_, i) => 120 + i * 30 / (maxZoom - minZoom))
     .reduce((acc, radius, i) => ({ ...acc, [minZoom + i]: radius }), {})
 
+  console.log('Computing clusters...')
+
   const promises: Promise<unknown>[] = []
   for (let zoom = minZoom; zoom <= maxZoom; zoom++) {
-    for (const cryptocity of cryptocities) {
-      const res = computeCluster(algorithm(radii[zoom]), locationsByCryptocity![cryptocity], { zoom, boundingBox })
-      const singles: InsertLocationsClustersSetParamsItem[] = (res.singles as Location[])
-        .map(({ lng, lat, uuid }) => ({ lat, lng, count: 1, locationUuid: uuid }))
-      promises.push(insertLocationsClusterSet(dbArgs, {
-        zoom_level: zoom,
-        items: singles.concat(res.clusters as Cluster[]),
-        cryptocity,
-      }))
-      console.log(
-      `Added ${res.clusters.length} clusters and ${singles.length} singles at zoom level ${zoom} for cryptocity ${cryptocity}`,
-      )
-    }
+    const res = computeCluster(algorithm(radii[zoom]), locations, { zoom, boundingBox })
+    const singles: InsertLocationsClustersSetParamsItem[] = (res.singles as Location[])
+      .map(({ lng, lat, uuid }) => ({ lat, lng, count: 1, locationUuid: uuid }))
+    promises.push(insertLocationsClusterSet(dbArgs, {
+      zoom_level: zoom,
+      items: singles.concat(res.clusters as Cluster[]),
+    }))
+    console.log(`Added ${res.clusters.length} clusters and ${singles.length} singles at zoom level ${zoom}`)
   }
 
   await Promise.allSettled(promises)
+
+  console.log('Done')
 }
 
 serve(async () => {
   try {
+    console.log('Starting clustering...')
     await cluster()
     return new Response(undefined, { status: 201 })
   }
diff --git a/types/cryptocity.ts b/types/cryptocity.ts
new file mode 100644
index 00000000..cce04feb
--- /dev/null
+++ b/types/cryptocity.ts
@@ -0,0 +1,20 @@
+import type { FeatureCollection, MultiPolygon } from '@turf/helpers'
+import type { BoundingBox, Point } from './index.ts'
+
+export enum Cryptocity {
+  SanJose = 'San Jose',
+}
+
+export interface CryptocityData {
+  cryptocity: Cryptocity
+  name: string
+  description: string[]
+  url: string
+  centroid: Point
+  boundingBox: BoundingBox
+  polygon?: FeatureCollection
+}
+
+export type CryptocityMarker = Record<number /* id of the cluster OR -1 not attached  */, CryptocityData[]>
+
+export interface CryptocityMemoized { area: MultiPolygon; markers: CryptocityMarker }
diff --git a/types/database.ts b/types/database.ts
index 24283e82..e005895c 100644
--- a/types/database.ts
+++ b/types/database.ts
@@ -53,11 +53,6 @@ export enum Provider {
   Edenia = 'Edenia',
 }
 
-export enum Cryptocity {
-  SanJose = 'San Jose',
-  None = 'None',
-}
-
 export interface DatabaseArgs {
   url: string
   apikey: string
@@ -86,6 +81,7 @@ export enum DbReadFunction {
   GetLocationsClustersSet = 'get_locations_clusters_set',
   GetMaxZoom = 'get_max_zoom_computed_clusters_in_server',
   GetStats = 'get_stats',
+  GetCryptocityPolygon = 'get_cryptocity_polygon',
 }
 
 export interface InsertLocationsClustersSetParamsItem {
@@ -99,7 +95,6 @@ export interface InsertLocationsClustersSetParamsItem {
 export interface InsertLocationsClustersSetParams {
   zoom_level: number
   items: InsertLocationsClustersSetParamsItem[]
-  cryptocity?: Cryptocity
 }
 
 // ------ Return types --------
diff --git a/types/index.ts b/types/index.ts
index 48c9824c..e98d981f 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -4,6 +4,7 @@ export * from './database.ts'
 export * from './map.ts'
 export * from './location.ts'
 export * from './autocomplete.ts'
+export * from './cryptocity.ts'
 
 export enum Issue {
   LOCATION_GONE = 'location_gone',
@@ -17,9 +18,3 @@ export interface Filters {
   categories: Category[]
   currencies: Currency[]
 }
-
-export interface CryptocityContent {
-  name: string
-  description: string[]
-  url: string
-}
diff --git a/types/location.ts b/types/location.ts
index c1758391..9267f23f 100644
--- a/types/location.ts
+++ b/types/location.ts
@@ -2,7 +2,7 @@
 Since the UI is quite flexible, better to define all cases using types, and we develop the UI from these types.
 */
 
-import type { Category, Cryptocity, Currency, Provider } from './database.ts'
+import type { Category, Currency, Provider } from './database.ts'
 
 export enum LocationType {
   Shop = 'shop',
@@ -61,5 +61,4 @@ export interface RawLocation {
   facebook?: string
   gmaps?: string
   gmaps_types: string[]
-  cryptocity: Cryptocity
 }
diff --git a/types/map.ts b/types/map.ts
index 99e366af..ebfc9ef6 100644
--- a/types/map.ts
+++ b/types/map.ts
@@ -1,7 +1,5 @@
 import type { MultiPolygon } from '@turf/helpers'
-import type { CryptocityContent } from 'types'
 import type { Location } from './location.ts'
-import type { Cryptocity } from './database.ts'
 
 export interface BoundingBox {
   swLat: number
@@ -31,10 +29,7 @@ export interface Cluster {
   lat: number
   expansionZoom: number // The new zoom when the cluster is expanded
   count: number
-}
-
-export interface CryptocityCluster extends Cluster, CryptocityContent {
-  city: Exclude<Cryptocity, Cryptocity.None>
+  diameter: number // The diameter of the cluster in pixels
 }
 
 export interface ClusterArea {
@@ -50,7 +45,6 @@ export interface LocationClusterParams {
 
 export interface LocationClusterSet {
   memoizedClusters: Cluster[]
-  memoizedCryptocities: CryptocityCluster[]
   memoizedSingles: Location[]
 
   // The different areas where the clusters have been already computed
@@ -59,6 +53,5 @@ export interface LocationClusterSet {
 
 export interface ComputedClusterSet {
   clusters: Cluster[]
-  cryptocities: CryptocityCluster[]
   singles: Location[]
 }