OpenStreetMap Block για το WordPress, για όσους θέλουν να αποφύγουν το API του Google Maps

[gsarig]

Καλό-χρυσό το Google Maps, και το όριο της δωρεάν χρήσης υπεραρκετό, αλλά το να πρέπει κάθε φορά να ζητάς από τους πελάτες να φτιάχνουν λογαριασμό δίνοντας πιστωτική κάρτα δεν είναι καθόλου πρακτικό.

 

Έτσι αποφάσισα να στραφώ στη λύση του OpenStreetMap και του Leflet.js, και καθώς τα υπάρχοντα plugins δεν κάλυπταν ακριβώς αυτά που ήθελα, σκέφτηκα, όπως συνήθως, να δοκιμάσω να το φτιάξω μόνος μου. Στην πορεία εκμεταλλεύτηκα τις δυνατότητες του Gutenberg για να πειραματιστώ με εναλλακτικούς τρόπους για την διαχείριση των τοποθεσιών.

 

Για τις δικές μου ανάγκες, το βασικό ζητούμενο ενός χάρτη ήταν να δουλεύει χωρίς καμία απολύτως ρύθμιση και να είναι όσο πιο άκοπο και άμεσο στην διαδικασία εισαγωγής των τοποθεσιών, ώστε να χρειάζεται η ελάχιστη δυνατή εκπαίδευση στον διαχειριστή περιεχομένου.

 

Έτσι, αντί να προσθέτεις συντεταγμένες με το χέρι ή να καταχωρείς τα σημεία σε ξεχωριστά post types, βρήκα πιο βολικό το να "ρίχνεις" σημεία απλώς κάνοντας κλικ στον χάρτη και αν θες να διορθώσεις τη θέση, να το κάνεις απλώς μετακινώντας τα. Και αντί να καταχωρείς το περιεχόμενο του popup κάθε σημείου σε πεδία κειμένου, τί πιο φυσικό από το να ανοίγεις το ίδιο το popup και να ξεκινάς να γράφεις μέσα του, έχοντας πάντα τη δυνατότητα βασικών μορφοποιήσεων και εισαγωγής link και εικόνων (να 'ναι καλά ο Gutenberg).

 

 

Επιπλέον, στην τελευταία αναβάθμιση προστέθηκε και δυνατότητα αναζήτησης μέσω του Nominatim, το οποίο είναι εντελώς δωρεάν και χωρίς να χρειάζεται εγγραφή για API Key. Έχει, ωστόσο, κάποιους περιορισμούς στη χρήση του, με τον πιο σημαντικό να είναι ότι δεν επιτρέπει αναζήτηση με autocomplete. Ταλαιπωρώντας το λίγο, όμως, στο θέμα του UX και δίνοντας έμφαση στη χρήση χωρίς ποντίκι (λεπτομέρειες εδώ), νομίζω πως το αποτέλεσμα είναι αρκετά ικανοποιητικό. Π.χ. στο παρακάτω βιντεάκι έχουμε διαδοχικό καρφίτσωμα τοποθεσιών πληκτρολογώντας λέξεις-κλειδιά και πατώντας διπλό enter (χωρίς τη χρήση ποντικιού σε κανένα σημείο).

 

 

Για όσους ενδιαφέρονται να δοκιμάσουν το plugin, ακολουθούν τα links:

• WordPress.org
• GitHub

 

Και, τέλος, μια πιο αναλυτική περιγραφή του σκεπτικού με το οποίο φτιάχτηκε για όποιον ενδιαφέρεται να μάθει περισσότερα.

 

Αν και το έχω δοκιμάσει σε αρκετά sites και είδα πως παίζει χωρίς πρόβλημα, το plugin δεν έχει κλείσει ακόμα ούτε μια βδομάδα στον αέρα, οπότε, σε περίπτωση που εντοπίσετε κάποιο bug, θα βοηθήσει πολύ αν το αναφέρετε στο φόρουμ υποστήριξης του WordPress. 

[παπι]

Μια απο τα ιδια. Για geocoding δες το απι της νοκια here.com εμενα με καλυψε

[gsarig]

1 ώρα πριν, παπι είπε

Μια απο τα ιδια. Για geocoding δες το απι της νοκια here.com εμενα με καλυψε

Δεν το είχα σκεφτεί καν το here.com, και βλέπω ότι έχει και freemium πακέτο - ενδιαφέρον. Βέβαια, η αλήθεια είναι ότι το Nominatim με βόλεψε κυρίως γιατί μπορείς απλώς να το χτυπάς χωρίς να χρειάζεται καν εγγραφή, αρκεί να μην κάνεις υπερβολικές κλήσεις (γι' αυτό δεν επιτρέπουν το autocomplete). Οπότε στην περίπτωση του plugin, απλώς το εγκαθιστάς και παίζει, χωρίς να χρειαστεί απολύτως καμία ρύθμιση.

[k33theod]

To nominatim και για search και για reverse search είναι super. Και στα 2 δίνει 1 κλικ/s

Επεξ/σία 23 Σεπτεμβρίου 2020 από k33theod

[gsarig]

1 ώρα πριν, k33theod είπε

To nominatim και για search και για reverse search είναι super. Και στα 2 δίνει 1 κλικ/s

Ναι είναι πολύ καλό και το ότι δεν επιτρέπει autocomplete τελικά δεν ήταν και πολύ μεγάλο πρόβλημα στην περίπτωσή μου. Πιο πολύ με προβληματίζει το όριο του OpenStreetMap στο frontend, καθώς δεν είναι και πολύ ξεκάθαρο και φαντάζομαι πως σε ένα site με πολύ μεγάλη κίνηση θα κόψει την πρόσβαση. Για τα site που σκοπεύω να το χρησιμοποιήσω εγώ δεν νομίζω να συναντήσω ποτέ πρόβλημα, αλλά γενικά σκέφτομαι ότι ίσως να πρέπει να προσθέσω και μια επιλογή για κάποιον άλλο πάροχο Tile που να χρειάζεται API key (πχ. να δω αν μπορεί να παίξει με το Mapbox ή ακόμα και Google Maps).

[k33theod]

Εγω το χρησιμοποιω με tilelayer απο mapbox αν εννοεις αυτο?  και ειναι με token και φυσικα το contrib κατω δεξια. Κανενα προβλημα. 

[gsarig]

3 ώρες πριν, k33theod είπε

Εγω το χρησιμοποιω με tilelayer απο mapbox αν εννοεις αυτο?  και ειναι με token και φυσικα το contrib κατω δεξια. Κανενα προβλημα. 

Ναι, ακριβως. Επειδή ήθελα να είναι εντελώς άκοπο, να το εγκαθιστάς και να παίζει χωρίς καμία απολύτως ρύθμιση, το χρησιμοποιώ με το ανοιχτό tilelayer του OpenStreetMap που δεν χρειάζεται κλειδιά. Οπότε λέω να του προσθέσω ως έξτρα παραμέτρους τις υπηρεσίες που μπορεί να δεχτεί το leaflet.

[k33theod]

Το searchbox βλέπω το έχεις πάνω στο map. To είχα έτσι και εγώ και σε touchscreens δεν δούλευε δεν το έψαξα και πολύ και το έβγαλα εκτός. Μάλλον έπρεπε να απενεργοποιήσω το propagation του klik/touch event σωστά; 

Επεξ/σία 24 Σεπτεμβρίου 2020 από k33theod

[gsarig]

3 ώρες πριν, k33theod είπε

Το searchbox βλέπω το έχεις πάνω στο map. To είχα έτσι και εγώ και σε touchscreens δεν δούλευε δεν το έψαξα και πολύ και το έβγαλα εκτός. Μάλλον έπρεπε να απενεργοποιήσω το propagation του klik/touch event σωστά; 

Η αναζήτηση βρίσκεται έξω από τον χάρτη. Απλώς και τα δύο (αναζήτηση και χάρτης) βρίσκονται μέσα σε ένα div και η στοίχιση της αναζήτησης γίνεται με position:absolute; και μεγάλο z-index στα CSS. Εδώ το markup.

[παπι]

Στις 23/9/2020 στις 6:41 ΜΜ, gsarig είπε

Ναι είναι πολύ καλό και το ότι δεν επιτρέπει autocomplete τελικά δεν ήταν και πολύ μεγάλο πρόβλημα στην περίπτωσή μου. Πιο πολύ με προβληματίζει το όριο του OpenStreetMap στο frontend, καθώς δεν είναι και πολύ ξεκάθαρο και φαντάζομαι πως σε ένα site με πολύ μεγάλη κίνηση θα κόψει την πρόσβαση. Για τα site που σκοπεύω να το χρησιμοποιήσω εγώ δεν νομίζω να συναντήσω ποτέ πρόβλημα, αλλά γενικά σκέφτομαι ότι ίσως να πρέπει να προσθέσω και μια επιλογή για κάποιον άλλο πάροχο Tile που να χρειάζεται API key (πχ. να δω αν μπορεί να παίξει με το Mapbox ή ακόμα και Google Maps).

Ειναι ανοικτου κωδικα, μπορεις να τα κατεβασεις αν θες. Εγω αυτο εκανα για ενα προτζεκτ που ειχα φτιαξει και δεν ηεθελε "εξαρτησεις", βεβαια εχω κατεβασει μονο αττικη

[gsarig]

40 λεπτά πριν, παπι είπε

Ειναι ανοικτου κωδικα, μπορεις να τα κατεβασεις αν θες. Εγω αυτο εκανα για ενα προτζεκτ που ειχα φτιαξει και δεν ηεθελε "εξαρτησεις", βεβαια εχω κατεβασει μονο αττικη

Ναι αυτό το έχω δει, μπορείς να στήσεις τον δικό σου tile server αν θες και το ότι μπορείς να επιλέξεις συγκεκριμένες περιοχές είναι πολύ πρακτικό.

Στην περίπτωσή μου βέβαια δεν κάνει, καθώς πρόκειται για plugin που μπορεί να χρησιμοποιήσει οποιοσδήποτε, οπότε το κάθε site που το χρησιμοποιεί είναι υπεύθυνο για την δική του κίνηση. Πρόσθεσα πάντως τη δυνατότητα να φορτώνεις MapBox εισάγοντας το σχετικό API Key.

[randomcat]

Στις 22/9/2020 στις 1:24 ΠΜ, gsarig είπε

Καλό-χρυσό το Google Maps, και το όριο της δωρεάν χρήσης υπεραρκετό, αλλά το να πρέπει κάθε φορά να ζητάς από τους πελάτες να φτιάχνουν λογαριασμό δίνοντας πιστωτική κάρτα δεν είναι καθόλου πρακτικό.

Μην το λες. Σε ένα project που δεν είχε βγει καν ακόμα σε production, χρησιμοποιούσε ένας συνάδελφος το Geocoding API και χρεώθηκε η κάρτα της εταιρείας ~200 ευρώ.

Στις 22/9/2020 στις 1:24 ΠΜ, gsarig είπε

Και, τέλος, μια πιο αναλυτική περιγραφή του σκεπτικού με το οποίο φτιάχτηκε για όποιον ενδιαφέρεται να μάθει περισσότερα.

Εξαιρετικά ενδιαφέρον plugin που καλύπτει ανάγκες, και πολύ καλή δουλειά.

Θα ήταν χρήσιμο στο Map behavior να βάλεις δυνατότητα για ενεργοποίηση των default controls και interactions του OpenStreetMap π.χ. Attributions, DragRotateAndZoom, FullScreen, ScaleLine, ZoomSlider, ZoomToExtent κ.λπ.

Δηλαδή:

var map = new ol.Map({
    target: 'map',
    layers: [
        baseLayer,
        vectorLayers
    ],
    overlays: [overlay],
    controls: ol.control.defaults({
        attributionOptions: ({
            collapsed: false,
            collapsible: true
        })
    }).extend([
        new ol.control.ScaleLine(),
        new ol.control.Zoom(),
        new ol.control.ZoomSlider(),
        new ol.control.ZoomToExtent(),
        new ol.control.FullScreen()
    ]),
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.DragRotateAndZoom()
    ]),
    view: view,
});

 

Επίσης, ρίχνω άλλη μια ιδέα στο τραπέζι που ξέρω ότι θα κάλυπτε ανάγκες αρκετών, συμπεριλαμβανομένου και εμένα...

... ένα text field πεδίο φόρμας για place search μαζί με έναν OSM χάρτη, όπου είτε θα κάνεις αναζήτηση για τοποθεσία χρησιμοποιώντας το πεδίο και θα την βγάζει επάνω στον χάρτη που συνοδεύει το πεδίο, είτε θα κλικάρεις στον χάρτη και θα συμπληρώνει το πεδίο με την τοποθεσία. Το πεδίο θα κάνει POST ένα array με address και coordinates.

(Υπάρχει κάτι τέτοιο σε διάφορα γνωστά plugins αλλά με Google Map$$$ και άρα δεν συμφέρει. Π.χ. το ACF (Advanced Custom Fields) έχει ένα τέτοιο Google maps πεδίο.)

[dhmm]

Εγω το κάνω με αυτό τον τρόπο και δεν μου ζητάει κάρτα.

Δημιουργώ έναν λογαριασμό gmail για τον πελάτη. Στη συνέχεια φτιάχνω την τοποθεσεία που θέλω. μετά επιλέγω την τοποθεσία -> δεξι κλικ και έχει επιλογή "share" όπου σου εμφανίζει κώδικα για να κάνεις embed όπου θες

 

[gsarig]

3 ώρες πριν, randomcat είπε

Μην το λες. Σε ένα project που δεν είχε βγει καν ακόμα σε production, χρησιμοποιούσε ένας συνάδελφος το Geocoding API και χρεώθηκε η κάρτα της εταιρείας ~200 ευρώ.

200 ευρώ;!! Μήπως δεν το είχε κλειδώσει και είχε διαρρεύσει το κλειδί ή απλώς έπρεπε να κάνει τόσες πολλές κλήσεις λόγω ιδιαιτεροτήτων της εφαρμογής; Γενικά για μέτρια χρήση δεν έχω συναντήσει ποτέ πρόβλημα. Φαντάζομαι πως και το OpenStreetMap με αντίστοιχη χρήση θα έκοβε την πρόσβαση. Βέβαια σε αυτή την περίπτωση δεν θα χρεωνόσουν.

 

3 ώρες πριν, randomcat είπε

Θα ήταν χρήσιμο στο Map behavior να βάλεις δυνατότητα για ενεργοποίηση των default controls και interactions του OpenStreetMap π.χ. Attributions, DragRotateAndZoom, FullScreen, ScaleLine, ZoomSlider, ZoomToExtent κ.λπ.

 

Δηλαδή:

var map = new ol.Map({
    target: 'map',
    layers: [
        baseLayer,
        vectorLayers
    ],
    overlays: [overlay],
    controls: ol.control.defaults({
        attributionOptions: ({
            collapsed: false,
            collapsible: true
        })
    }).extend([
        new ol.control.ScaleLine(),
        new ol.control.Zoom(),
        new ol.control.ZoomSlider(),
        new ol.control.ZoomToExtent(),
        new ol.control.FullScreen()
    ]),
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.DragRotateAndZoom()
    ]),
    view: view,
});

Ναι σιγά σιγά θέλω να το εμπλουτίσω με τις διάφορες λειτουργίες που έχει το Leaflet. Κάποιες, που αφορούν τον χειρισμό του χάρτη (π.χ. απενεργοποίηση του drag κλπ) τις έχω περάσει ήδη, αλλά υπάρχουν πολλές ακόμα.

 

3 ώρες πριν, randomcat είπε

Επίσης, ρίχνω άλλη μια ιδέα στο τραπέζι που ξέρω ότι θα κάλυπτε ανάγκες αρκετών, συμπεριλαμβανομένου και εμένα...

... ένα text field πεδίο φόρμας για place search μαζί με έναν OSM χάρτη, όπου είτε θα κάνεις αναζήτηση για τοποθεσία χρησιμοποιώντας το πεδίο και θα την βγάζει επάνω στον χάρτη που συνοδεύει το πεδίο, είτε θα κλικάρεις στον χάρτη και θα συμπληρώνει το πεδίο με την τοποθεσία. Το πεδίο θα κάνει POST ένα array με address και coordinates.

(Υπάρχει κάτι τέτοιο σε διάφορα γνωστά plugins αλλά με Google Map$$$ και άρα δεν συμφέρει. Π.χ. το ACF (Advanced Custom Fields) έχει ένα τέτοιο Google maps πεδίο.)

Αυτό είναι ενδιαφέρουσα ιδέα, αλλά δεν μπορεί να σταθεί από μόνο του αλλά να φτιαχτεί ως module σε κάποιο συγκεκριμένο plugin (π.χ. ACF, Gravity Forms κλπ). Εκεί όμως δεν υπάρχουν πολλά περιθώρια για σύνθετη διαδραστικότητα, όπως στον Gutenberg. Για την ακρίβεια, το συγκεκριμένο plugin το έφτιαξα όχι μόνο για να αποφύγω την εγγραφή των πελατών στο Google Maps, αλλά και γιατί το πρέπει κάθε φορά να φτιάχνω και να καταχωρώ τα σημεία με ACF fields ήταν λίγο χρονοβόρο (πιο πολύ στο backend, γιατί στο frontend το έχω αυτοματοποιήσει αρκετά ώστε να μην χρειάζεται να γράφω ξανά και ξανά τον ίδιο κώδικα). Με το Gutenberg block, αντίθετα, έχεις έτοιμο τον χάρτη πανεύκολα.

1 ώρα πριν, dhmm είπε

Εγω το κάνω με αυτό τον τρόπο και δεν μου ζητάει κάρτα.

Δημιουργώ έναν λογαριασμό gmail για τον πελάτη. Στη συνέχεια φτιάχνω την τοποθεσεία που θέλω. μετά επιλέγω την τοποθεσία -> δεξι κλικ και έχει επιλογή "share" όπου σου εμφανίζει κώδικα για να κάνεις embed όπου θες

Ναι, αυτός είναι ένας τρόπος για να το χειριστείς. Δεν είναι πάντα εφικτό, όμως, είτε γιατί μπορεί να χρειάζεσαι πολλαπλά σημεία είτε για λόγους μεγαλύτερης παραμετροποίησης.

[vpgo]

HERE WeGo Maps έχει Δωρεαν πολλά APIs & SDKs, με κάλυψε απόλυτα (χάρτες, πλοήγηση. κίνηση, καιρός κλπ) : her.is/eeu

Επεξ/σία 30 Σεπτεμβρίου 2020 από vpgo