diff --git a/package.json b/package.json
index 6429079..cf34090 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.4.0",
+    "@types/google.maps": "^3.48.3",
     "@vitejs/plugin-vue": "^2.2.4",
     "js-base64": "^3.5.2",
     "tailwindcss": "^3.0.23",
diff --git a/src/App.vue b/src/App.vue
index 16c4bcf..a2bd3e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="md:flex flex-1 md:items-stretch md:flex-row">
         <div class="h-[60%] md:h-full w-full">
-            <Map :density="density" :startHash="startHash" ref="map" @densityChange="densityUpdate" @hashChange="hashUpdate" @surfaceUpdate="surfaceUpdate" />
+            <Map :density="density" :startHash="startHash" ref="mapComponent" @densityChange="densityUpdate" @hashChange="hashUpdate" @surfaceUpdate="surfaceUpdate" />
         </div>
         <div class="flex flex-col relative w-full lg:w-2/3 py-2 md:px-4 font-sans md:border-l border-gray-500 bg-slate-100">
             <div class="order-last md:order-first px-4 mb-4 md:mb-0 md:px-0">
@@ -13,9 +13,9 @@
 
             <div class="shadow-md md:rounded-md px-4 py-3 bg-white md:mt-4 mb-4 md:mb-1">
                 <div v-if="surface !== 0" class="relative">
-                    <span class="text-sm text-gray-700">Surface area <span class="font-semibold">{{ formatArea(surface) }}sqm</span> &bull; <span class="font-semibold">{{ formatArea(surface_feet) }}sqft</span></span>
+                    <span class="text-sm text-gray-700">Surface area <span class="font-semibold">{{ surface.toFixed(0) }}sqm</span> &bull; <span class="font-semibold">{{ surface_feet.toFixed(0) }}sqft</span></span>
 
-                    <button @click="$refs.map.reset()" class="rounded absolute right-0 px-2 py-1 text-xs inline-block bg-red-400 shadow-md text-white font-bold hover:shadow-none focus:outline-none">Reset the area</button>
+                    <button @click="mapComponent.reset()" class="rounded absolute right-0 px-2 py-1 text-xs inline-block bg-red-400 shadow-md text-white font-bold hover:shadow-none focus:outline-none">Reset the area</button>
                     <div class="mt-2 space-y-2">
                         <span class="font-semibold">Crowd density <span class="text-xs text-gray-700"><a class="underline hover:no-underline" target="_blank" href="http://www.gkstill.com/Support/crowd-density/625sm/Density6.html">What does it look like?</a></span></span>
                         <input class="block w-full" type="range" min="0.1" max="5.0" step="0.05"  v-model.number="density" />
@@ -47,9 +47,9 @@
             <div class="shadow-md md:rounded-md px-4 py-3 bg-white md:mt-4 mb-4 md:mb-8">
                 <h2 class="font-bold mb-2">Examples</h2>
 
-                <a href="javascript:void(0)" @click="$refs.map.reloadHash('bAAAgQJtzQ0LZXRJAAACQQVdzQ0K-UxJAlHNDQl5REkDTc0NCz1ESQP9zQ0KFUxJAHnRDQv5WEkA8dENC51oSQEF0Q0LRXhJAPnRDQldjEkA2dENCo2YSQA50Q0KPaxJA_HNDQq5uEkDac0NCV28SQJRzQ0IhcBJAYnNDQvFuEkAzc0NCEWoSQPNyQ0LIXxJAGnNDQsNZEkA')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Place du Trocadero - Paris</a>
-                <a href="javascript:void(0)" @click="$refs.map.reloadHash('bAAAAQEJ4Q0IdShdAAACQQcp4Q0IfKxdAeXlDQtI7F0CseENClVIXQNl3Q0IeaBdAG3dDQnlYF0A')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Place de la République</a>
-                <a href="javascript:void(0)" @click="$refs.map.reloadHash('bAAAAQHoRUkLzzlVBAABwQRsPUkISoVVB0A5SQhKhVUF_EFJChAhWQccQUkJBCFZB')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Tiergatern - Berlin</a>
+                <a href="javascript:void(0)" @click="mapComponent.reloadHash('bAAAgQJtzQ0LZXRJAAACQQVdzQ0K-UxJAlHNDQl5REkDTc0NCz1ESQP9zQ0KFUxJAHnRDQv5WEkA8dENC51oSQEF0Q0LRXhJAPnRDQldjEkA2dENCo2YSQA50Q0KPaxJA_HNDQq5uEkDac0NCV28SQJRzQ0IhcBJAYnNDQvFuEkAzc0NCEWoSQPNyQ0LIXxJAGnNDQsNZEkA')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Place du Trocadero - Paris</a>
+                <a href="javascript:void(0)" @click="mapComponent.reloadHash('bAAAAQEJ4Q0IdShdAAACQQcp4Q0IfKxdAeXlDQtI7F0CseENClVIXQNl3Q0IeaBdAG3dDQnlYF0A')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Place de la République</a>
+                <a href="javascript:void(0)" @click="mapComponent.reloadHash('bAAAAQHoRUkLzzlVBAABwQRsPUkISoVVB0A5SQhKhVUF_EFJChAhWQccQUkJBCFZB')" class="inline-block btn rounded-md mr-3 mb-2 text-sm">Tiergatern - Berlin</a>
             </div>
             <div class="grow"></div>
             <div class="flex space-x-4 order-last bg-white p-4 text-xs tracking-tight md:-mx-4 items-center font-medium justify-center">
@@ -61,57 +61,37 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import Map from './components/Map.vue'
 import { tatween, Easing } from 'tatween';
+import { computed, ref } from '@vue/reactivity';
 
-export default {
-    name: 'App',
-    components: {
-        Map
-    },
-
-    methods: {
-        surfaceUpdate(data) {
-            this.surface = data;
-        },
-
-        hashUpdate(hash) {
-            window.location.hash = hash;
-        },
-
-        densityUpdate(val) {
-            this.density = Math.round(val * 100) / 100;
-        },
-
-        formatArea(val) {
-            return Number.parseFloat(val).toFixed(0);
-        },
-
-        setDensity(val) {
-            tatween(800, Easing.Exponential.Out, (obj) => {
-                obj.density = val;
-            }, this)
-        }
-    },
-
-    data() {
-        return {
-            surface: 0,
-            density: 1.5,
-            startHash: window.location.hash && window.location.hash.length > 3 ?
+const surface = ref(0);
+const density = ref(1.5);
+const startHash = window.location.hash && window.location.hash.length > 3 ?
                 window.location.hash.substring(1) : ''
-        }
-    },
 
-    computed: {
-        surface_feet() {
-            return (this.surface * 10.764).toFixed(2);
-        },
+const mapComponent = ref();
 
-        estimated() {
-            return parseInt(this.surface * this.density);
-        }
-    }
+const surfaceUpdate = (data: number) => {
+    surface.value = data;
 }
+
+const hashUpdate = (hash: string) => {
+    window.location.hash = hash;
+}
+
+const densityUpdate = (val: number) => {
+    density.value = val;
+}
+
+const setDensity = (val: number) => {
+    tatween(800, Easing.Exponential.Out, (obj) => {
+        density.value = val;
+    }, density)
+}
+
+const surface_feet = computed(() => (surface.value * 10.764))
+const estimated = computed(() => Math.round(surface.value * density.value))
+
 </script>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 8500018..bfa2b6b 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -1,259 +1,260 @@
 <template>
     <div class="w-full h-full">
-        <input id="pac-input" class="controls" :class="[mapLoaded ? '' : 'hidden']" type="text" placeholder="Search Box">
+        <input ref="pacinput" class="controls" :class="[mapLoaded ? '' : 'hidden']" type="text" placeholder="Search Box">
         <div class="w-full h-full" id="map"></div>
     </div>
 </template>
 
-<script>
+
+
+<script setup lang="ts">
     import { Loader as MapLoader } from '@googlemaps/js-api-loader';
     import { Base64 } from 'js-base64'
+    import { onMounted, ref, watch, computed } from 'vue';
 
     const loader = new MapLoader({
         apiKey: "AIzaSyD7Vm3gm4Fm7jSkuIh_yM14GmYhz1P_S4M",
-        version: "weekly",
+        version: "3.48",
         libraries: ["geometry", "places"]
     });
 
-    export default {
-        name: "Map",
+    const props = defineProps<{
+        density: number,
+        startHash: string
+    }>()
 
-        props: {
-            density: Number,
-            startHash: String
-        },
+    const emits = defineEmits<{
+        (event: "surfaceUpdate", val: number): void
+        (event: "densityChange", val: number): void
+        (event: "hashChange", val: string): void
+    }>()
 
-        mounted() {
+    const mapPosition = ref([48.862895, 2.286978, 18])
+    const arrPoly = ref<google.maps.LatLng[]>([])
+    const mapLoaded = ref(false);
+    const pacinput = ref()
 
-            loader.loadCallback(e => {
-                if (e) {
-                    console.log(e);
-                    return;
-                }
+    let currentMap : google.maps.Map | undefined;
+    let currentPolygon : google.maps.Polygon | undefined;
+    let $updateHashTimer = null;
 
-                const map = new google.maps.Map(document.getElementById("map"), {
-                    zoom: this.mapPosition[2],
-                    center: {
-                        lat: this.mapPosition[0],
-                        lng: this.mapPosition[1]
-                    },
-                    mapTypeId: 'roadmap',
-                    gestureHandling: 'greedy'
-                });
+    onMounted(() => {
+        loader.loadCallback(e => {
+            if (e) {
+                console.log(e);
+                return;
+            }
 
-                const input = document.getElementById('pac-input');
-                const searchBox = new google.maps.places.SearchBox(input);
-                map.controls[google.maps.ControlPosition.LEFT_TOP].push(input);
-
-                searchBox.addListener('places_changed', () => {
-                    var places = searchBox.getPlaces();
-
-                    if (places.length == 0) {
-                        return;
-                    }
-
-                    var place = places[0];
-
-                    map.setCenter(place.geometry.location);
-                    map.setZoom(17);
-
-                    this.reset();
-                });
-
-                map.addListener('bounds_changed', function() {
-                    searchBox.setBounds(map.getBounds());
-                });
-                map.addListener('center_changed', this.mapUpdated);
-                map.addListener('zoom_changed', this.mapUpdated);
-                map.addListener('click', this.mapClicked);
-
-                map.setOptions({
-                    draggableCursor:'crosshair',
-                    clickableIcons: false,
-                    disableDoubleClickZoom: true,
-                    streetViewControl: false
-                });
-
-                this.$map = map;
-
-                const poly = new google.maps.Polygon({
-                    strokeOpacity: 0.8,
-                    strokeWeight: 2,
-                    fillOpacity: 0.35,
-                    editable: true,
-                    draggable: true,
-                    geodesic: true
-                });
-
-                poly.setMap(map);
-
-                this.$poly = poly;
-    
-                if (this.startHash) {
-                    this.loadHash(this.startHash);
-                }
-
-                ["insert_at", "remove_at", "set_at"].forEach(ev => google.maps.event.addListener(poly.getPath(), ev, this.surfaceUpdated));
-                this.updatePolygonColor();
-
-                this.$updateHashTimer = null;
-                this.mapLoaded = true;
+            currentMap = new google.maps.Map(document.getElementById("map"), {
+                zoom: mapPosition.value[2],
+                center: {
+                    lat: mapPosition.value[0],
+                    lng: mapPosition.value[1]
+                },
+                mapTypeId: 'roadmap',
+                gestureHandling: 'greedy'
             });
-        },
 
-        watch: {
-            density(val) {
-                this.updatePolygonColor();
-            },
+            const searchBox = new google.maps.places.SearchBox(pacinput.value);
+            currentMap.controls[google.maps.ControlPosition.LEFT_TOP].push(pacinput.value);
 
-            hash(hashval) {
-                if (this.$updateHashTimer) {
-                    clearTimeout(this.$updateHashTimer);
-                }
+            searchBox.addListener('places_changed', () => {
+                const places = searchBox.getPlaces();
 
-                this.$updateHashTimer = setTimeout(() => {
-                    this.$emit('hashChange', hashval);
-                }, 300);
-            }
-        },
-
-        methods: {
-            getHue(val) {
-                const min = 0.1;
-                const max = 3.0;
-
-                // inv lerp from the density
-                const t = (val - min) / (max - min);
-
-                // lerp between green and red hue
-                const hue = (1.0 - t) * 110 + 0 * t;
-
-                return Math.max(0, Math.min(hue, 110));
-            },
-
-            updatePolygonColor() {
-                const hue = this.getHue(this.density);
-
-                this.$poly.setOptions({
-                    fillColor: `hsl(${hue}, 90%, 50%)`,
-                    strokeColor: `hsl(${hue}, 90%, 50%)`
-                });                
-            },
-
-            mapUpdated() {
-                const pos = this.$map.getCenter();
-                const zoom = this.$map.getZoom();
-
-                this.mapPosition = [pos.lat().toFixed(7), pos.lng().toFixed(7), zoom]; 
-            },
-
-            mapClicked(ev) {
-                this.$poly.getPath().push(ev.latLng);
-            },
-
-            surfaceUpdated() {
-                this.surface = google.maps.geometry.spherical.computeArea(this.$poly.getPath()).toFixed(2);
-                this.arrPoly = this.$poly.getPath().getArray().slice();
-
-                this.$emit('surfaceUpdate', this.surface);
-            },
-
-            reloadHash(hash) {
-                this.loadHash(hash);
-
-                ["insert_at", "remove_at", "set_at"].forEach(ev => google.maps.event.addListener(this.$poly.getPath(), ev, this.surfaceUpdated));
-                this.updatePolygonColor();
-            },
-
-            loadHash(hash) {
-                if (hash[0] != 'b') {
-                    return this.loadLegacyHash(hash);
-                }
-
-                const buf = Base64.toUint8Array(hash.substr(1));
-                if (!buf) {
+                if (places.length == 0) {
                     return;
                 }
 
-                const meta = new Float32Array(buf.buffer, 0, 4);
-                const data = new Float32Array(buf.buffer, 4*4);
+                const place = places[0];
 
-                this.$map.setCenter({lat: meta[1], lng: meta[2]});
-                this.$map.setZoom(parseInt(meta[3]));
+                currentMap.setCenter(place.geometry.location);
+                currentMap.setZoom(17);
 
-                let path = [];
-                for (let i = 0; i < data.length; i += 2) {
-                    path.push({
-                        lat: data[i],
-                        lng: data[i+1]
-                    });                    
-                }
+                reset();
+            });
 
-                if (path.length) {
-                    this.$poly.setPath(path);
-                    this.surfaceUpdated();
-                }
+            currentMap.addListener('bounds_changed', function() {
+                searchBox.setBounds(currentMap.getBounds());
+            });
+            currentMap.addListener('center_changed', mapUpdated);
+            currentMap.addListener('zoom_changed', mapUpdated);
+            currentMap.addListener('click', mapClicked);
 
-                this.$emit('densityChange', parseFloat(meta[0]));
-            },
+            currentMap.setOptions({
+                draggableCursor:'crosshair',
+                clickableIcons: false,
+                disableDoubleClickZoom: true,
+                streetViewControl: false
+            });
 
-            loadLegacyHash(hash) {
-                let opt = hash.split(';');
 
-                let curPosition = opt.pop();
+            const poly = new google.maps.Polygon({
+                strokeOpacity: 0.8,
+                strokeWeight: 2,
+                fillOpacity: 0.35,
+                editable: true,
+                draggable: true,
+                geodesic: true
+            });
 
-                if (curPosition) {
-                    let cursetting = curPosition.split(',');
-                    this.$map.setCenter({lat: parseFloat(cursetting[0]), lng: parseFloat(cursetting[1])});
-                    this.$map.setZoom(parseInt(cursetting[2]));
-                }
+            poly.setMap(currentMap);
 
-                let density = parseFloat(opt.pop()) || 1;
+            currentPolygon = poly;
 
-                let path = [];
-
-                for (let i = 0; i < opt.length; i++) {
-                    let coord = opt[i].split(',');
-                    path.push({
-                        lat: parseFloat(coord[0]),
-                        lng: parseFloat(coord[1])
-                    });
-                }
-
-                if (path.length) {
-                    this.$poly.setPath(path);
-                    this.surfaceUpdated();
-                }
-
-                this.$emit('densityChange', density);
-            },
-
-            reset() {
-                this.$poly.getPath().clear();
+            if (props.startHash) {
+                loadHash(props.startHash);
             }
-        },
 
-        computed: {
-            hash() {
-                let buf = new Float32Array(this.arrPoly.length*2+4);
-                buf[0] = this.density;
-                buf.set(this.mapPosition, 1);
+            ["insert_at", "remove_at", "set_at"].forEach(ev => google.maps.event.addListener(poly.getPath(), ev, surfaceUpdated));
+            updatePolygonColor();
 
-                for (let i = 0; i < this.arrPoly.length; i++) {
-                    buf[4+i*2] = this.arrPoly[i].lat();
-                    buf[4+i*2+1] = this.arrPoly[i].lng();
-                }
-                return 'b' + Base64.fromUint8Array(new Uint8Array(buf.buffer), true);
-            }
-        },
+            $updateHashTimer = null;
+            mapLoaded.value = true;
+        });
+    })
 
-        data() {
-            return {
-                mapPosition: [48.862895, 2.286978, 18],
-                surface: 0,
-                arrPoly: [],
-                mapLoaded: false
-            }
-        }
+    const getHue = (val: number) => {
+        const min = 0.1;
+        const max = 3.0;
+
+        // inv lerp from the density
+        const t = (val - min) / (max - min);
+
+        // lerp between green and red hue
+        const hue = (1.0 - t) * 110 + 0 * t;
+
+        return Math.max(0, Math.min(hue, 110));
     }
+
+    const updatePolygonColor = () => {
+        const hue = getHue(props.density);
+
+        currentPolygon.setOptions({
+            fillColor: `hsl(${hue}, 90%, 50%)`,
+            strokeColor: `hsl(${hue}, 90%, 50%)`
+        });                
+    }
+
+    const mapUpdated = () => {
+        const pos = currentMap.getCenter();
+        const zoom = currentMap.getZoom();
+
+        mapPosition.value = [pos.lat(), pos.lng(), zoom]; 
+    }
+
+    const mapClicked = (ev: any) => {
+        currentPolygon.getPath().push(ev.latLng);
+    }
+
+    const surfaceUpdated = () => {
+        arrPoly.value = currentPolygon.getPath().getArray().slice();
+
+        emits('surfaceUpdate', google.maps.geometry.spherical.computeArea(currentPolygon.getPath()));
+    }
+
+    const reloadHash = (hash: string) => {
+        loadHash(hash);
+
+        ["insert_at", "remove_at", "set_at"].forEach(ev => google.maps.event.addListener(currentPolygon.getPath(), ev, surfaceUpdated));
+
+        updatePolygonColor();
+    }
+
+    const loadHash = (hash: string) => {
+        if (hash[0] != 'b') {
+            return loadLegacyHash(hash);
+        }
+
+        const buf = Base64.toUint8Array(hash.substr(1));
+        if (!buf) {
+            return;
+        }
+
+        const meta = new Float32Array(buf.buffer, 0, 4);
+        const data = new Float32Array(buf.buffer, 4*4);
+
+        currentMap.setCenter({lat: meta[1], lng: meta[2]});
+        currentMap.setZoom(meta[3]);
+
+        let path = [];
+        for (let i = 0; i < data.length; i += 2) {
+            path.push({
+                lat: data[i],
+                lng: data[i+1]
+            });                    
+        }
+
+        if (path.length) {
+            currentPolygon.setPath(path);
+            surfaceUpdated();
+        }
+
+        emits('densityChange', meta[0]);
+    }
+
+    const loadLegacyHash = (hash: string) => {
+        let opt = hash.split(';');
+
+        let curPosition = opt.pop();
+
+        if (curPosition) {
+            let cursetting = curPosition.split(',');
+            currentMap.setCenter({lat: parseFloat(cursetting[0]), lng: parseFloat(cursetting[1])});
+            currentMap.setZoom(parseInt(cursetting[2]));
+        }
+
+        let density = parseFloat(opt.pop()) || 1;
+
+        let path = [];
+
+        for (let i = 0; i < opt.length; i++) {
+            let coord = opt[i].split(',');
+            path.push({
+                lat: parseFloat(coord[0]),
+                lng: parseFloat(coord[1])
+            });
+        }
+
+        if (path.length) {
+            currentPolygon.setPath(path);
+            surfaceUpdated();
+        }
+
+        emits('densityChange', density);
+    }
+
+    const reset = () => {
+        currentPolygon.getPath().clear();
+    }
+
+
+    watch(() => props.density, () => updatePolygonColor());
+
+    const hash = computed(() => {
+        let buf = new Float32Array(arrPoly.value.length*2+4);
+        buf[0] = props.density;
+        buf.set(mapPosition.value, 1);
+
+        for (let i = 0; i < arrPoly.value.length; i++) {
+            buf[4+i*2] = arrPoly.value[i].lat();
+            buf[4+i*2+1] = arrPoly.value[i].lng();
+        }
+        return 'b' + Base64.fromUint8Array(new Uint8Array(buf.buffer), true);
+    })
+
+    watch(hash, (hashval: string) => {
+        if ($updateHashTimer) {
+            clearTimeout($updateHashTimer);
+        }
+
+        $updateHashTimer = setTimeout(() => {
+            emits('hashChange', hashval);
+        }, 300);
+    })
+
+    defineExpose({
+        reset,
+        reloadHash
+    })
+
 </script>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..bf2304e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+      "noImplicitAny": false,
+      "target": "esnext",
+      "module": "esnext",
+      "moduleResolution": "node",
+      "strict": true,
+      "exactOptionalPropertyTypes": false,
+      "jsx": "preserve",
+      "sourceMap": true,
+      "resolveJsonModule": true,
+      "esModuleInterop": true,
+      "lib": ["esnext", "dom"],
+      "types": ["vite/client", "unplugin-icons/types/vue"],
+      "baseUrl": ".",
+      "paths": {
+        "@/*": [
+          "src/*"
+        ]
+      }     
+    },
+    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"]
+  }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 20dada6..0711212 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -56,6 +56,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@types/google.maps@^3.48.3":
+  version "3.48.3"
+  resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.48.3.tgz#c554fbd7076c75fdd82dbae0ff3d541f67f5c599"
+  integrity sha512-JQuLWAEXDorNfarQy22WbIezbPKhLnsTBnDw25vyg61USZLTK8KqE1glNyASKn2v2mUOcEIWFMNHX5hNzjuw/g==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"