Map integration

[niklebe]

15

1. Geocoding utility στο φάκελο geocode/ Python script που δέχεται το csv entries, κάνει request στο Geocoding API της google και δίνει συντεταγμένες στις αναφορές βασισμένο στο "Πού συνέβη;", μόνο για τα approved σημεία. Περισσότερες πληροφορίες και ρυθμίσεις στο αρχείο. Δημιουργεί ένα geocode_output.csv με τα αποτελέσματα του fetch, και ένα entries.geojson που είναι ένα γεωγραφικό αρχείο με τα σημεία, το id και την σύντομη περιγραφή τους. Το script μπορεί να τρέχει σα μέρος του generator.

2. Leaflet map Δύο component, ένα map.js που δημιουργεί απλά ένα div #map, και ένα wrapper mapDynamicWrapper.js για να παρακάμψει το ssr και να δουλέψει το Leaflet. Ο χάρτης έχει δύο στυλ (prop hiqhQuality={true|false}), το true είναι το Mapbox Light, δίνει περισσότερη έμφαση στα σημεία των περιστατικών αλλά χρεώνει μετά τα 200k requests. Το false ειναι φρι από OpenStreetMap. Ο χάρτης φορτώνει το entries.geojson και δημιουργεί markers με tootlip την σύντομη περιγραφή και clusters. Το mapDynamicWrapper εκθέτει props containerStyle για css του τελικού div, highQuality για επιλογή στύλ, onMapReady για να κάνεις κάτι με τον χάρτη όταν είναι loaded, onEntryClick για click event σε markers.

PS: Χρησιμοποιώ στο geocode.py ένα API key από εδώ και ένα στο map.js για το mapbox από εδώ. Τα αφήνω public για λίγο καιρό για testing.

PS 2: Δεν ήξερα πού να βάλω το entries.gejson για να το τραβήξω από το χάρτη, και το έβαλα προσωρινά στο app/public.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/balourdos/memonomena-peristatika-gr/BCwTFCHjVregWbbSuUvad9WeC4Xa
✅ Preview: https://memonomena-per-git-fork-niklebe-map-integration-ba-0d7760.vercel.app

[balourdos]

Πάρα πολύ ωραίο, ευχαριστούμε πολύ! Δύο πράγματα:

• Νομίζω πως καλύπτει πολύ μεγάλο μέρος της οθόνης που βλέπεις, ειδικά αν είναι πάνω-πάνω, ειδικά σε κινητό. Τι θα έλεγες να το βάζαμε πίσω από ένα κουμπί που να το κάνει toggle;
• Θα μπορούσαμε να κάνουμε τα labels να είναι links στο βίντεο που περιγράφουν;

^NK

[niklebe]

• Οκ! έκανα το χάρτη λίγο πιο μικρό και responsive σε μικρές οθόνες. Τώρα είναι πίσω από ένα toggle δίπλα στο Twitter.
• Όταν πατάς πάνω στα markers σε στέλνει στο ανάλογο βίντεο (με το id).
• Αφαίρεσα τα API key μου αλλά υπάρχουν τα ανάλογα λινκ στο map.js και geocode.py. Ο χάρτης τρέχει αυτόματα με fallback στο φρι βερσιον.
• Δύο τελευταία entries για Ομόνοια επέστρεψαν λάθος συντεταγμένες και έπρεπε να διορθωθούν manually μέσα στο τελικό geojson με find/replace των αριθμών. Αυτό μπορεί να συμβαίνει κάποιες φορές, οπότε μια ματιά στο χάρτη πριν γίνει published χρειάζεται.

[karate]

Πολύ καλή δουλειά @niklebe. Μία παρατήρηση μόνο: φαίνεται ότι όλα τα περιστατικά χωρίς τοποθεσία εμφανίζονται στην Μυτιλίνη.

[niklebe]

Ευχαριστώ!! Ναι δεν ξέρω γιατί έβγαιναν όλα τα άδεια Πού συνέβη στη Μυτιλήνη, αλλά το geocode.py τώρα τα φιλτράρει, οπότε μόνο τα approved entries με τοποθεσία εμφανίζονται στο χάρτη.

Επίσης δοκίμασα να αλλάξω το ",Ομόνοια," σε ",Ομόνοια Αθήνα," και δούλεψε αυτή τη φορά έτσι (χωρίς find/replace στις συντεταγμένες κλπ), οπότε για εύκολο geocoding μπορεί να χρειάζεται λίγο πιο συγκεκριμένη τοποθέτηση στο entries csv.