Αποτύπωση σημείων στο χάρτη

Καλησπέρα.

Έχω ένα site όπου σε χάρτη αποτυπώνω διάφορα σημεία (POIs για όσους ασχολούνται με GPS).
Μέχρι πρότινος χρησιμοποιούσα τους χάρτες Google αλλά μετά την αλλαγή πολιτικής διάθεσης του χάρτη, άλλαξα και πλέον χρησιμοποιώ τον παρόν χάρτη.

Όταν πρόκειται να εμφανίσω ένα σημείο το έφτιαξα με τη σχετική βοήθεια που παρέχεται.
Για την περίπτωση που πρόκειται να εμφανίσω πολλαπλά σημεία (multiple markers) στον ίδιο χάρτη δεν μπορώ να το φτιάξω ή να κατανοήσω τα παραδείγματα.

Το site χρησιμοποιεί βάση δεδομένων με γεωγραφικές συντεταγμένες των σημείων και είναι φτιαγμένο σε php και mySQL (PDO).
Η δομή της ΒΔ είναι: Ομάδες - Κατηγορίες - Σημεία.
Δηλ. κάθε Σημείο (POI) ανήκει σε μια Κατηγορία (Category) και κάθε Κατηγορία (Category) ανήκει σε μια Ομάδα (Group).
Η περίπτωση εμφάνισης πολλαπλών σημείων αφορά την εμφάνιση όλων των σημείων μιας κατηγορίας.

Θα ήθελα αν γνωρίζει κάποιος να μου πει πώς γίνεται ή να με παραπέμψει σε κάποιο σχετικό link.

Ευχαριστώ.

Καλησπέρα.

Kοίτα το Umap.
Παράδειγμα χάρτη: Arriving in Berlin - A map made by refugees (περισσότερα παραδείγματα στην ενότητα “showcase” του πρώτου ιστοσυνδέσμου).

Αν η βάση δεδομένων σου ανανεώνεται συχνά, αν η ιστοσελίδα με τον χάρτη έχει μεγάλη επισκεψιμότητα, ή αν σου είναι σημαντικό να μην υπάρχει θέμα με τον χάρτη (π.χ. να μην εμφανίζεται), προτίμησε να το κάνεις host εσύ, παρά να χρησιμοποιήσεις κάποιο από τα production instances.

Και καλώς ήρθες στην κοινότητα :slight_smile:

Εε… βάλε και ένα λίνκ προς το site σου να δούμε και το χάρτη. :slight_smile:

ΥΓ. Σε καλωσορίζω και εγώ με την σειρά μου στην κοινότητα,
(ο code elusive ήταν ακριβέστατος).

Καλησπέρα και καλώς σας βρήκα.

Έλεγα μήπως μπορεί να δοθεί βοήθεια-λύση χωρίς να αναφέρω το site μιας και είμαι κατά των έμμεσων διαφημίσεων.
Και αν κατάλαβα σωστά, η λύση που έδωσε ο code elusive δεν είναι ακριβώς αυτό που θέλω.

Την αποτύπωση ενός σημείου που έφτιαξα μπορείτε να δείτε ενδεικτικά εδώ.
Η αποτύπωση πολλαπλών σημείων είναι εδώ σε Google Maps.

code elusive,
Ναι, η ΒΔ ανανεώνεται σχεδόν καθημερινά.
Από τις λύσεις που μου έδωσες πιστεύω ότι αυτό που με καλύπτει πλήρως ως προς την εμφάνιση των σημείων, αλλά και μου δίνει επιπλέον δυνατότητες, είναι το παράδειγμα “Arriving in Berlin”.
Αυτό πώς γίνεται σε php;
Η δομή της ΒΔ είναι διαθέσιμη εφόσον απαιτείται.

Ευχαριστώ.

Κι αυτός ο χάρτης έχει γίνει σε Umap και μάλιστα σε ένα από τα production instances που προτείνει το wiki. Σχετικά με τη σύνδεση της βάσης δεδομένων σου με το Umap, δεν μπορώ να βοηθήσω, άλλα ίσως μπορείς να βρεις βοήθεια στις πηγές που αναφέρει το wiki.

Τελικά βρήκα λύση με το παράδειγμα http://harrywood.co.uk/maps/examples/openlayers/marker-popups.view.html
Έβαλα μέσα στο script τον κώδικα php ώστε να “διαβάζει” από τη βάση μου.
Δεν είναι το τέλειο αλλά τη δουλειά του την κάνει. Ίσως με λίγο πείραγμα να βγάλω κάτι καλύτερο.
Επιπλέον, αργεί υπερβολικά να φορτώσει το χάρτη.
Ενδεικτικά, http://testpois.4gps.gr/categorymap.php?id=27

Βρήκα και το http://osmtools.de/easymap/index.php?lang=el&page=editor όπου φτιάχνεις το χάρτη που θέλεις και σου δίνει έτοιμο το html.
Εδώ όμως αν βάλω μέσα στο script τον κώδικα php δεν δουλεύει. :frowning:
Ίσως να κάνω κάτι λάθος εγώ αλλά δε νομίζω.

Ευχαριστώ για το χρόνο σας.

Στο πρώτο site που ανέφερες έχει ένα πιο σχετικό με το πρόβλημα σου παράδειγμα: http://harrywood.co.uk/maps/examples/openlayers/db/basic-map.view.html
Παρατήρησε ότι δεν βάζει τον κώδικα PHP μέσα στο script, αλλά βάζει το relative URL του PHP file. Έχει και ένα παράδειγμα PHP file.

Δεν ξέρω αν θα βελτιωθεί η ταχύτητα, αλλά δεν νομίζω, διότι υποψιάζομαι ότι το DB query που κάνεις δημιουργεί όλη την καθυστέρηση.
Πάντως δεν χάνεις τίποτα να δοκιμάσεις.

Μία άλλη λύση θα ήταν να δημιουργείται ένα text αρχείο με τα POIs πχ μίας κατηγορίας (όταν ανανεώνεις την DB), έτσι ώστε το Openlayers να κάνει parse αυτό το αρχείο και να τα προβάλλει στον χάρτη πολύ πιο γρήγορα.

Το δοκίμασα και δεν μου δουλεύει.
Προφανώς κάπου κάνω εγώ λάθος αν και όπως αναφέρεταιsome of the examples are a bit old and broken

Αυτή τη στιγμή υπάρχουν 195 ενεργές κατηγορίες.
Δεν θα ήταν “παλαβό” να έχω τόσα txt αρχεία μόνο γι’ αυτή την περίπτωση;

Στα παραδείγματα του ίδιου site βρήκα το Leaflet Marker Array και σε συνδυασμό με το Leaflet Custom Marker για να έχω το εικονίδιο που θέλω, έφτιαξα κάτι που είναι σαφώς πιο γρήγορο σχετικά με το φόρτωμα του χάρτη.
Ενδεικτικά, http://testpois.4gps.gr/categorymap.php?id=27
Εδώ όμως υπάρχει άλλο “πρόβλημα” (μη ορατό στον χρήστη).
Κάπου στα αρχεία του Leaflet 1.3.4 δηλώνεται ότι το path του εικονιδίου είναι leaflet/images και δεν μπορώ να βρω πού, ώστε να το αλλάξω.
Η εύκολη λύση είναι να αντιγράψω τα εικονίδια και σ’ αυτή τη θέση, αλλά και να βάζω και τα μελλοντικά. Διπλά αρχεία δηλαδή.
Προς το παρόν το έφτιαξα να αντιγράφει μόνο το εικονίδιο που απαιτείται χωρίς όμως να το διαγράφω. Το αρχείο διαγράφεται πριν εμφανιστεί ο χάρτης.

Και κάτι ακόμα. Ίσως για …δυνατούς λύτες.
Με τους χάρτες Google, ο χάρτης ζουμάριζε αυτόματα τόσο όσο να εμφανίζονται όλα τα σημεία, π.χ. http://pois.4gps.gr/categorymap.php?CategoryID=68.
Ενώ τώρα έχουμε το http://testpois.4gps.gr/categorymap.php?id=68.
Υπάρχει περίπτωση/δυνατότητα να γίνει το ίδιο στους χάρτες osm;
Δηλαδή, αντί να ορίσουμε το κέντρο του χάρτη (center) και το zoom, να ορίσουμε τα άκρα του; Βορράς-Νότος-Ανατολή-Δύση.

195!! Ναι αυτό όντως θα ήταν παλαβό

Αν και δεν έχω ασχοληθεί με το Leaflet, να ρωτήσω κάτι. Το έβαλες τοπικά ή το χρησιμοποιείς remotly? Μάλλον τοπικά το έβαλες (σωστά έκανες) διότι ρωτάς για τα αρχεία του.
Επίσης το Openlayers, το δοκίμασες τοπικά? ή το δοκίμασες μόνο remotly? (διότι τελικά μάλλον αυτό (δηλ το remotly) έφταιγε και όχι το DB query).
Πάντως τώρα δουλεύει καλά, και έφτιαξε και το projection των εικονιδίων που ήταν λίγο παραμορφωμένα την πρώτη φορά.

Αυτό που ζητάς είναι στο αρχείο leaflet.css στην γραμμή 392.
/* Default icon URLs */
.leaflet-default-icon-path {
background-image: url(images/marker-icon.png);
}
Πρόσεχε στην αλλαγή του URL(path). Είναι realtive URL ως προς την θέση του αρχείου leaflet.css. Αν η θέση του αρχείου css είναι “περίεργη”, βάλε το absolute URL.

Για αυτό δεν είμαι σίγουρος. Στο Openlayers από ότι θυμάμαι κάτι είχα δει για automatic zoom, αλλά για το Leaflet δεν ξέρω.

Αν και δεν τα πάω καλά με τις ορολογίες, υποθέτω ότι …σωστά υποθέτεις.
Στο Openlayers το μόνο που υπήρχε είναι το

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>

Στο leaflet έχει τα

<link rel="stylesheet" href="leaflet/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
<script src="leaflet/leaflet.js"></script>

χωρίς να δίνει τα αρχεία που αναφέρονται.
Έτσι αναγκαστικά πήγα στο https://leafletjs.com/ και κατέβασα την έκδοση την οποία ανέβασα στον server μου.

Αυτό το βρήκα κι εγώ και προσπάθησα να το αλλάξω παίρνοντας αυτό το κομμάτι και βάζοντάς το στο δικό μου αρχείο όρισα το path που βρίσκονται τα εικονίδια. Παρόλα αυτά, το “http://testpois.4gps.gr/leaflet/” μάλλον το κρατάει.
Επιπλέον, με το Leaflet Custom Marker το κομμάτι αυτό παρακάμπτεται μιας και το εικονίδιο ορίζεται μέσα στο script

//Extend the Default marker class
var Icon = L.Icon.Default.extend({
	options: {
		iconUrl: '<?= $icon ?>',
....

Δοκίμασα να ορίσω το πλήρες URL σε σχέση με το φάκελο που βρίσκονται τα εικονίδια

iconUrl: 'http://testpois.4gps.gr/downloads/alter_icons1_30x42/png/' . '<?= $icon ?>',

αλλά και πάλι δεν το παίρνει.

Το έφτιαξα.
Πήρα το βορειότερο/νοτιότερο και το ανατολικότερο/δυτικότερο σημείο και έβγαλα τις μέσες τιμές.
Αυτό το ορίζω ως κέντρο (center) του χάρτη.
Από τη διαφορά του βορειότερου/νοτιότερου και του ανατολικότερου/δυτικότερου σημείου υπολόγισα το zoom.

Να σημειώσω ότι αυτό που έφτιαξα είναι εντελώς πρόχειρο, με “απλά μαθηματικά” και λειτουργεί μόνο στην περίπτωσή μου (συγκεκριμένες διαστάσεις χάρτη).
Αν κάποιος το θέλει είτε για να το βελτιώσει ή να το χρησιμοποιήσει, μπορεί να μου το ζητήσει.

.
Αυτό δεν το κατάλαβα. Δηλ που το έβαλες? Αφού στο html ορίζεται να διαβάζει μόνο το αρχείο leaflet.css και κανένα άλλο css αρχείο.
Άρα μέσα στο leaflet.css έπρεπε να αλλάξεις το path.

Ναι το ξέρω ότι ορίζεται στο script, αλλά προφανώς αυτή η παράκαμψη για κάποιο λόγο δεν δουλεύει, οπότε πάει και παίρνει το εικονίδιο από το leaflet.css.
Πάντως στην θέση σου δεν θα χρησιμοποιούσα το παράδειγμα για Custom marker. Θα χρησιμοποιούσα το παράδειγμα για το απλό marker και απλά θα άλλαζα το path στο leaflet.css.

Βρήκα πως δουλέυει η “παράκαμψη”. Άκου τι θα κάνεις

Το script θα το κάνεις έτσι:

//Extend the Default marker class
var Icon = L.Icon.Default.extend({
	options: {
		iconUrl: 'alter_icons1_30x42.png'
....

Μετά θα πάς στο leaflet.css στην γραμμή 392 και θα αλλάξεις το path από

images/marker-icon.png

σε

/downloads/marker-icon.png

χωρίς το testpois.4gps.gr, δεν χρειάζεται. Αυτό είναι το absolute path. Ξεκινάει με “/”.

Το script θα κάνει το εξής: θα αλλάξει το /downloads/marker-icon.png και θα το κάνει /downloads/alter_icons1_30x42.png.
Δηλαδή θα αλλάξει το τελευταίο μέρος του path.
Άρα το script δεν κάνει “παράκαμψη”, αλλά “μετάλλαξη” του path.

Έτσι από το script μπορείς να διαλέγεις όποια εικόνα θέλεις από το φάκελο downloads.
Το δοκίμασα και δουλεύει μια χαρά.

Σε μένα γιατί δε θέλει να δουλέψει;;;

Στην “απελπισία” μου έβαλα το οριζόμενο εικονίδιο σε όλες τις πιθανές θέσεις.
Σε καμία δεν το βρήκε και να το εμφανίσει.

Ως αυτοδίδακτος και ερασιτέχνης δεν είμαι απόλυτα σίγουρος.
Το /downloads οδηγεί στο ριζικό φάκελο downloads και όχι στο leaflet/downloads (που δεν υπάρχει). Σωστά;
Γιατί προφανώς κάπου ορίζεται όλα να γίνονται μέσα στο φάκελο leaflet.

Σωστά.
Δηλαδή το σύστημα στο τέλος θα δημιουργήσει το path

http://testpois.4gps.gr/downloads/alter_icons1_30x42.png

Αυτό ορίζεται στο html αρχείο. Μέσα στον φάκελο leaflet θα πρέπει να υπάρχουν το leaflet.js και το leaflet.css μαζί.

ΥΓ. Μην χρησιμοποιείς γλώσσα PHP μέσα στο javascript το οποίο μάλιστα βρίσκεται μέσα σε ένα αρχείο με επέκταση .html. Είναι πολύ πιθανό να μην μπορεί ο server σου να την διαβάσει.

Όλα ok!!!

Αλλά αν μπορείς να μου εξηγήσεις το παρακάτω (ίσως το ερώτημα να είναι …ρητορικό, να μην υπάρχει απάντηση).
Οτιδήποτε φτιάχνω κάτι, το κάνω πρώτα τοπικά με το xampp.
Εκεί η πρότασή σου δεν δούλευε.

“Ψάχνοντας” βρήκα ότι το “σωστό” είναι …/downloads. Έτσι μου δούλεψε (στο xampp).
Το ανέβασα στον server (testpois) και διαπίστωσα ότι δεν δουλεύει.
Εκεί μου ήρθε το ότι το δοκίμασες και δουλεύει.
Το έβαλα όπως το δίνεις και δούλεψε.

Το ερώτημα: Είναι λάθος του xampp; Άλλαξε κάτι (το συγκεκριμένο) και δεν έχει ενημερωθεί το xampp;

Edit
Όλα σχεδόν τα αρχεία μου είναι *.php

Το …/downloads είναι relative path, και άρα εξαρτάται από το πως είναι φτιαγμένο το δέντρο των φακέλων στο xampp.

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

Εσύ καλά τα λες, για μένα είναι δύσκολο να το κατανοήσω.

Όπως και να 'χει, ευχαριστώ για τη βοήθεια και το χρόνο σου.

Βάλε στο Google την φράση “relative vs absolute path” και θα μάθεις την διαφορά (έχει και βιντεάκια αν θέλεις).
Πρέπει να το μάθεις αυτό διότι έχεις website (όπως έχω και εγώ) και θα σου χρειαστεί. Είναι πολύ σημαντικό,

Χαίρομαι πολύ που σε βοήθησα φίλε μου.

Πάντα ήθελε θα ενταχθούν σε κάτι χοντρό; Στη συνέχεια, αυτό είναι ακριβώς για σένα https://files303.wiki/extension/kmz. Αρχείο .KMZ από всемирноизвестной της Google σας επιτρέπουν να αποθηκεύσετε τα δεδομένα, για παράδειγμα, οι συντεταγμένες διαφορετικές θέσεις, καφετέριες, εστιατόρια, πάρκα και άλλα. Επίσης μπορείς να κατεβάσετε σε αυτά και να δημιουργήσετε μια πανοραμική φωτογραφία ή τις φωτογραφίες σας με πανοραμική θέα. Έτσι, αν ξαφνικά στο Google maps δεν έχεις δει κάποια θέση, ήρθε η ώρα να συμπληρώσετε μαζί το παζλ της γνώσης γι ’ αυτόν, να προσθέσετε φωτογραφίες ή απλά να πείτε σε άλλους για την πρώτη εντύπωση από τη γνωριμία μαζί του