kopia lustrzana https://github.com/paraboul/mapchecking
Porównaj commity
8 Commity
05570d09ac
...
d766830206
Autor | SHA1 | Data |
---|---|---|
Anthony Catel | d766830206 | |
Anthony Catel | 82612d2f05 | |
Anthony Catel | 1fe3391c81 | |
Anthony Catel | 2a65deb43e | |
Anthony Catel | c4fcb487cd | |
Anthony Catel | e13c88c8c5 | |
Anthony Catel | c1d43c6ec5 | |
Anthony Catel | 6a36800d35 |
|
@ -0,0 +1,4 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
*.local
|
|
@ -9,8 +9,8 @@
|
|||
<meta property="og:url" content="https://www.mapchecking.com/" />
|
||||
<meta property="og:image" content="https://www.mapchecking.com/socialimage.png" />
|
||||
<meta property="og:site_name" content="MapChecking" />
|
||||
<title>MapChecking - Crowd size estimator</title>
|
||||
<meta name="description" content="MapChecking helps you estimate the number of people standing in a given area. Fact check and debunk political claims during gatherings, march, and protests."/>
|
||||
<title>MapChecking - Crowd size estimation tool</title>
|
||||
<meta name="description" content="MapChecking helps you estimate the number of people standing in a given area. Fact check and debunk political claims during gatherings, march, and protests. #OSINT"/>
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
Plik diff jest za duży
Load Diff
|
@ -7,10 +7,10 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@googlemaps/js-api-loader": "^1.4.0",
|
||||
"@vitejs/plugin-vue": "^1.2.4",
|
||||
"between": "git+https://github.com/paraboul/between.git",
|
||||
"@vitejs/plugin-vue": "^2.2.4",
|
||||
"js-base64": "^3.5.2",
|
||||
"tailwindcss": "^2.2.4",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"tatween": "^0.2.0",
|
||||
"vue": "^3.0.0-rc.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
34
src/App.vue
34
src/App.vue
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="md:flex flex-1 md:items-stretch md:flex-row">
|
||||
<div class="h-2/3 md:h-full w-full">
|
||||
<div class="h-[60%] md:h-full w-full">
|
||||
<Map :density="density" :startHash="startHash" ref="map" @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-gray-100">
|
||||
<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">
|
||||
<h1 class="text-xl md:text-2xl">MapChecking • Crowd size estimation</h1>
|
||||
<span class="text-gray-800 leading-tight">This tool helps you estimate and fact-check the maximum number of people standing in a given area.</span>
|
||||
|
@ -16,17 +16,17 @@
|
|||
<span class="text-sm text-gray-700">Surface area <span class="font-semibold">{{ formatArea(surface) }}sqm</span> • <span class="font-semibold">{{ formatArea(surface_feet) }}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>
|
||||
<div class="mt-2">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-around pt-2">
|
||||
<div class="flex justify-around pt-2 mt-2">
|
||||
<button @click="setDensity(0.3)" class="btn">Light</button>
|
||||
<button @click="setDensity(2)" class="btn">Crowded</button>
|
||||
<button @click="setDensity(4)" class="btn">Packed</button>
|
||||
</div>
|
||||
<div class="text-center mt-1">
|
||||
<div class="text-center mt-2">
|
||||
<span class="block font-semibold text-teal-600">{{ density.toFixed(2) }} people per sqm <small>(~10 sqft)</small></span>
|
||||
<span class="inline-block mt-2 text-xl font-bold text-gray-800">{{ estimated }} estimated</span>
|
||||
</div>
|
||||
|
@ -35,17 +35,25 @@
|
|||
Start by delimiting an area on the map
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow-md md:rounded-md px-4 py-3 bg-red-50 shadow-red-100 md:mt-4 mb-4 md:mb-1 text-sm text-red-600">
|
||||
⚠️ It's easy to overestimate the density as the crowd is rarely uniformly packed. This is what <strong>2 people per square meter</strong> looks like from a low angle :
|
||||
<div class="flex space-x-2 mt-1">
|
||||
<a class="font-semibold underline hover:no-underline" target="blank" href="https://www.gkstill.com/_Media/3-4_med_hr.png">Image 1</a>
|
||||
<a class="font-semibold underline hover:no-underline" target="blank" href="https://www.gkstill.com/_Media/4-4_med_hr.png">Image 2</a>
|
||||
<a class="font-semibold underline hover:no-underline" target="blank" href="https://www.gkstill.com/_Media/2-2_med_hr.png">Image 3</a>
|
||||
<span>(<a class="underline hover:no-underline" href="https://www.gkstill.com/Support/crowd-density/CrowdDensity-1.html">source</a>)</span>
|
||||
</div>
|
||||
</div>
|
||||
<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('bAABAQJtzQ0LZXRJAAACQQRh0Q0JORBJA03NDQsdDEkC4c0NCrU4SQF5zQ0IFUhJAJnNDQoBWEkD5ckNCglsSQCFzQ0J_ZhJAlXNDQsdwEkDVc0NCT3ESQA90Q0LgfRJAXXRDQnh8EkAhdENCQHASQFB0Q0K9bBJAqXRDQu9uEkDadENCwGkSQHl0Q0JSZhJAe3RDQiNhEkB-dENCaV4SQNt0Q0KnXBJA4XRDQkJYEkCYdENC9lgSQGp0Q0LAWRJAWnRDQuhXEkC8dENC-k0SQH90Q0K2SRJAD3RDQiNREkA')" 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('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>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-around text-center order-last bg-white p-3 text-xs tracking-tight border-t border-gray-300">
|
||||
<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">
|
||||
<span>Created by Anthony Catel</span>
|
||||
|
||||
<a href="https://twitter.com/antcatel?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @antcatel</a>
|
||||
</div>
|
||||
<!-- <div class="bottom-0 left-0 md:absolute h-8 bg-white border-t border-gray-300 w-full text-xs tracking-tight text-center py-2">Created by Anthony Catel</div> -->
|
||||
|
@ -55,7 +63,7 @@
|
|||
|
||||
<script>
|
||||
import Map from './components/Map.vue'
|
||||
import Between from 'between'
|
||||
import { tatween, Easing } from 'tatween';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
@ -73,7 +81,7 @@ export default {
|
|||
},
|
||||
|
||||
densityUpdate(val) {
|
||||
this.density = val;
|
||||
this.density = Math.round(val * 100) / 100;
|
||||
},
|
||||
|
||||
formatArea(val) {
|
||||
|
@ -81,9 +89,9 @@ export default {
|
|||
},
|
||||
|
||||
setDensity(val) {
|
||||
Between.block(800, Between.easing.Exponential.Out, (obj) => {
|
||||
tatween(800, Easing.Exponential.Out, (obj) => {
|
||||
obj.density = val;
|
||||
}, this);
|
||||
}, this)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -194,7 +194,7 @@
|
|||
this.surfaceUpdated();
|
||||
}
|
||||
|
||||
this.$emit('densityChange', parseInt(meta[0]));
|
||||
this.$emit('densityChange', parseFloat(meta[0]));
|
||||
},
|
||||
|
||||
loadLegacyHash(hash) {
|
||||
|
|
|
@ -1,69 +1,10 @@
|
|||
const colors = require('tailwindcss/colors')
|
||||
|
||||
module.exports = {
|
||||
mode: 'jit',
|
||||
future: {
|
||||
// removeDeprecatedGapUtilities: true,
|
||||
// purgeLayersByDefault: true,
|
||||
},
|
||||
purge: {
|
||||
enabled: true,
|
||||
layers: ['utilities'],
|
||||
content: [
|
||||
"./src/**/*.vue",
|
||||
"./index.html"
|
||||
]
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
indigo: '#5c6ac4',
|
||||
blue: '#007ace',
|
||||
nidium: '#3eb7b3',
|
||||
teal: colors.teal,
|
||||
gray: {
|
||||
100: '#f7fafc',
|
||||
200: '#edf2f7',
|
||||
300: '#e2e8f0',
|
||||
400: '#cbd5e0',
|
||||
500: '#a0aec0',
|
||||
600: '#718096',
|
||||
700: '#4a5568',
|
||||
800: '#2d3748',
|
||||
900: '#1a202c',
|
||||
},
|
||||
},
|
||||
|
||||
height: {
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
'1/12': '8.333333%',
|
||||
'2/12': '16.666667%',
|
||||
'3/12': '25%',
|
||||
'4/12': '33.333333%',
|
||||
'5/12': '41.666667%',
|
||||
'6/12': '50%',
|
||||
'7/12': '58.333333%',
|
||||
'8/12': '66.666667%',
|
||||
'9/12': '75%',
|
||||
'10/12': '83.333333%',
|
||||
'11/12': '91.666667%'
|
||||
}
|
||||
},
|
||||
},
|
||||
content: [
|
||||
"./src/**/*.vue",
|
||||
"./index.html"
|
||||
],
|
||||
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue({}),
|
||||
],
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src')
|
||||
},
|
||||
},
|
||||
|
||||
server: {
|
||||
https: false,
|
||||
}
|
||||
})
|
Plik diff jest za duży
Load Diff
Ładowanie…
Reference in New Issue