You are not logged in.
Pages: 1
Καλησπέρα.
Έχω ένα site όπου σε χάρτη αποτυπώνω διάφορα σημεία (POIs για όσους ασχολούνται με GPS).
Μέχρι πρότινος χρησιμοποιούσα τους χάρτες Google αλλά μετά την αλλαγή πολιτικής διάθεσης του χάρτη, άλλαξα και πλέον χρησιμοποιώ τον παρόν χάρτη.
Όταν πρόκειται να εμφανίσω ένα σημείο το έφτιαξα με τη σχετική βοήθεια που παρέχεται.
Για την περίπτωση που πρόκειται να εμφανίσω πολλαπλά σημεία (multiple markers) στον ίδιο χάρτη δεν μπορώ να το φτιάξω ή να κατανοήσω τα παραδείγματα.
Το site χρησιμοποιεί βάση δεδομένων με γεωγραφικές συντεταγμένες των σημείων και είναι φτιαγμένο σε php και mySQL (PDO).
Η δομή της ΒΔ είναι: Ομάδες - Κατηγορίες - Σημεία.
Δηλ. κάθε Σημείο (POI) ανήκει σε μια Κατηγορία (Category) και κάθε Κατηγορία (Category) ανήκει σε μια Ομάδα (Group).
Η περίπτωση εμφάνισης πολλαπλών σημείων αφορά την εμφάνιση όλων των σημείων μιας κατηγορίας.
Θα ήθελα αν γνωρίζει κάποιος να μου πει πώς γίνεται ή να με παραπέμψει σε κάποιο σχετικό link.
Ευχαριστώ.
Offline
Καλησπέρα.
Kοίτα το Umap.
Παράδειγμα χάρτη: Arriving in Berlin - A map made by refugees (περισσότερα παραδείγματα στην ενότητα "showcase" του πρώτου ιστοσυνδέσμου).
Αν η βάση δεδομένων σου ανανεώνεται συχνά, αν η ιστοσελίδα με τον χάρτη έχει μεγάλη επισκεψιμότητα, ή αν σου είναι σημαντικό να μην υπάρχει θέμα με τον χάρτη (π.χ. να μην εμφανίζεται), προτίμησε να το κάνεις host εσύ, παρά να χρησιμοποιήσεις κάποιο από τα production instances.
Και καλώς ήρθες στην κοινότητα
Offline
Καλησπέρα.
Έχω ένα site όπου σε χάρτη αποτυπώνω διάφορα σημεία (POIs για όσους ασχολούνται με GPS).
Μέχρι πρότινος χρησιμοποιούσα τους χάρτες Google αλλά μετά την αλλαγή πολιτικής διάθεσης του χάρτη, άλλαξα και πλέον χρησιμοποιώ τον παρόν χάρτη.
Εε... βάλε και ένα λίνκ προς το site σου να δούμε και το χάρτη.
ΥΓ. Σε καλωσορίζω και εγώ με την σειρά μου στην κοινότητα,
(ο code elusive ήταν ακριβέστατος).
Last edited by nikospag (2018-11-07 10:58:51)
Offline
Καλησπέρα και καλώς σας βρήκα.
Έλεγα μήπως μπορεί να δοθεί βοήθεια-λύση χωρίς να αναφέρω το site μιας και είμαι κατά των έμμεσων διαφημίσεων.
Και αν κατάλαβα σωστά, η λύση που έδωσε ο code elusive δεν είναι ακριβώς αυτό που θέλω.
Την αποτύπωση ενός σημείου που έφτιαξα μπορείτε να δείτε ενδεικτικά εδώ.
Η αποτύπωση πολλαπλών σημείων είναι εδώ σε Google Maps.
code elusive,
Ναι, η ΒΔ ανανεώνεται σχεδόν καθημερινά.
Από τις λύσεις που μου έδωσες πιστεύω ότι αυτό που με καλύπτει πλήρως ως προς την εμφάνιση των σημείων, αλλά και μου δίνει επιπλέον δυνατότητες, είναι το παράδειγμα "Arriving in Berlin".
Αυτό πώς γίνεται σε php;
Η δομή της ΒΔ είναι διαθέσιμη εφόσον απαιτείται.
Ευχαριστώ.
Offline
Από τις λύσεις που μου έδωσες πιστεύω ότι αυτό που με καλύπτει πλήρως ως προς την εμφάνιση των σημείων, αλλά και μου δίνει επιπλέον δυνατότητες, είναι το παράδειγμα "Arriving in Berlin".
Κι αυτός ο χάρτης έχει γίνει σε Umap και μάλιστα σε ένα από τα production instances που προτείνει το wiki. Σχετικά με τη σύνδεση της βάσης δεδομένων σου με το Umap, δεν μπορώ να βοηθήσω, άλλα ίσως μπορείς να βρεις βοήθεια στις πηγές που αναφέρει το wiki.
Last edited by code elusive (2018-11-08 00:45:30)
Offline
Τελικά βρήκα λύση με το παράδειγμα http://harrywood.co.uk/maps/examples/op … .view.html
Έβαλα μέσα στο script τον κώδικα php ώστε να "διαβάζει" από τη βάση μου.
Δεν είναι το τέλειο αλλά τη δουλειά του την κάνει. Ίσως με λίγο πείραγμα να βγάλω κάτι καλύτερο.
Επιπλέον, αργεί υπερβολικά να φορτώσει το χάρτη.
Ενδεικτικά, http://testpois.4gps.gr/categorymap.php?id=27
Βρήκα και το http://osmtools.de/easymap/index.php?la … age=editor όπου φτιάχνεις το χάρτη που θέλεις και σου δίνει έτοιμο το html.
Εδώ όμως αν βάλω μέσα στο script τον κώδικα php δεν δουλεύει.
Ίσως να κάνω κάτι λάθος εγώ αλλά δε νομίζω.
Ευχαριστώ για το χρόνο σας.
Offline
Στο πρώτο site που ανέφερες έχει ένα πιο σχετικό με το πρόβλημα σου παράδειγμα: http://harrywood.co.uk/maps/examples/op … .view.html
Παρατήρησε ότι δεν βάζει τον κώδικα PHP μέσα στο script, αλλά βάζει το relative URL του PHP file. Έχει και ένα παράδειγμα PHP file.
Δεν ξέρω αν θα βελτιωθεί η ταχύτητα, αλλά δεν νομίζω, διότι υποψιάζομαι ότι το DB query που κάνεις δημιουργεί όλη την καθυστέρηση.
Πάντως δεν χάνεις τίποτα να δοκιμάσεις.
Μία άλλη λύση θα ήταν να δημιουργείται ένα text αρχείο με τα POIs πχ μίας κατηγορίας (όταν ανανεώνεις την DB), έτσι ώστε το Openlayers να κάνει parse αυτό το αρχείο και να τα προβάλλει στον χάρτη πολύ πιο γρήγορα.
Last edited by nikospag (2018-11-09 02:43:25)
Offline
Στο πρώτο site που ανέφερες έχει ένα πιο σχετικό με το πρόβλημα σου παράδειγμα: http://harrywood.co.uk/maps/examples/op … .view.html
Παρατήρησε ότι δεν βάζει τον κώδικα PHP μέσα στο script, αλλά βάζει το relative URL του PHP file. Έχει και ένα παράδειγμα PHP file.
Το δοκίμασα και δεν μου δουλεύει.
Προφανώς κάπου κάνω εγώ λάθος αν και όπως αναφέρεται "some of the examples are a bit old and broken"
Μία άλλη λύση θα ήταν να δημιουργείται ένα text αρχείο με τα POIs πχ μίας κατηγορίας (όταν ανανεώνεις την DB), έτσι ώστε το Openlayers να κάνει parse αυτό το αρχείο και να τα προβάλλει στον χάρτη πολύ πιο γρήγορα.
Αυτή τη στιγμή υπάρχουν 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, να ορίσουμε τα άκρα του; Βορράς-Νότος-Ανατολή-Δύση.
Offline
Αυτή τη στιγμή υπάρχουν 195 ενεργές κατηγορίες.
Δεν θα ήταν "παλαβό" να έχω τόσα txt αρχεία μόνο γι' αυτή την περίπτωση;
195!! Ναι αυτό όντως θα ήταν παλαβό
...έφτιαξα κάτι που είναι σαφώς πιο γρήγορο σχετικά με το φόρτωμα του χάρτη.
Ενδεικτικά, http://testpois.4gps.gr/categorymap.php?id=27
Αν και δεν έχω ασχοληθεί με το Leaflet, να ρωτήσω κάτι. Το έβαλες τοπικά ή το χρησιμοποιείς remotly? Μάλλον τοπικά το έβαλες (σωστά έκανες) διότι ρωτάς για τα αρχεία του.
Επίσης το Openlayers, το δοκίμασες τοπικά? ή το δοκίμασες μόνο remotly? (διότι τελικά μάλλον αυτό (δηλ το remotly) έφταιγε και όχι το DB query).
Πάντως τώρα δουλεύει καλά, και έφτιαξε και το projection των εικονιδίων που ήταν λίγο παραμορφωμένα την πρώτη φορά.
Εδώ όμως υπάρχει άλλο "πρόβλημα" (μη ορατό στον χρήστη).
Κάπου στα αρχεία του Leaflet 1.3.4 δηλώνεται ότι το path του εικονιδίου είναι leaflet/images και δεν μπορώ να βρω πού, ώστε να το αλλάξω.
Αυτό που ζητάς είναι στο αρχείο 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.
Υπάρχει περίπτωση/δυνατότητα να γίνει το ίδιο στους χάρτες osm;
Δηλαδή, αντί να ορίσουμε το κέντρο του χάρτη (center) και το zoom, να ορίσουμε τα άκρα του; Βορράς-Νότος-Ανατολή-Δύση.
Για αυτό δεν είμαι σίγουρος. Στο Openlayers από ότι θυμάμαι κάτι είχα δει για automatic zoom, αλλά για το Leaflet δεν ξέρω.
Last edited by nikospag (2018-11-10 05:44:09)
Offline
gtsoukn wrote:...έφτιαξα κάτι που είναι σαφώς πιο γρήγορο σχετικά με το φόρτωμα του χάρτη.
Ενδεικτικά, http://testpois.4gps.gr/categorymap.php?id=27Αν και δεν έχω ασχοληθεί με το Leaflet, να ρωτήσω κάτι. Το έβαλες τοπικά ή το χρησιμοποιείς remotly? Μάλλον τοπικά το έβαλες (σωστά έκανες) διότι ρωτάς για τα αρχεία του.
Επίσης το Openlayers, το δοκίμασες τοπικά? ή το δοκίμασες μόνο remotly? (διότι τελικά μάλλον αυτό (δηλ το remotly) έφταιγε και όχι το DB query).
Αν και δεν τα πάω καλά με τις ορολογίες, υποθέτω ότι ...σωστά υποθέτεις.
Στο 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 μου.
gtsoukn wrote:Κάπου στα αρχεία του Leaflet 1.3.4 δηλώνεται ότι το path του εικονιδίου είναι leaflet/images και δεν μπορώ να βρω πού, ώστε να το αλλάξω.
Αυτό που ζητάς είναι στο αρχείο 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.
Αυτό το βρήκα κι εγώ και προσπάθησα να το αλλάξω παίρνοντας αυτό το κομμάτι και βάζοντάς το στο δικό μου αρχείο όρισα το 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 ?>',
αλλά και πάλι δεν το παίρνει.
Offline
Με τους χάρτες Google, ο χάρτης ζουμάριζε αυτόματα τόσο όσο να εμφανίζονται όλα τα σημεία
Υπάρχει περίπτωση/δυνατότητα να γίνει το ίδιο στους χάρτες osm;
Δηλαδή, αντί να ορίσουμε το κέντρο του χάρτη (center) και το zoom, να ορίσουμε τα άκρα του; Βορράς-Νότος-Ανατολή-Δύση.
Το έφτιαξα.
Πήρα το βορειότερο/νοτιότερο και το ανατολικότερο/δυτικότερο σημείο και έβγαλα τις μέσες τιμές.
Αυτό το ορίζω ως κέντρο (center) του χάρτη.
Από τη διαφορά του βορειότερου/νοτιότερου και του ανατολικότερου/δυτικότερου σημείου υπολόγισα το zoom.
Να σημειώσω ότι αυτό που έφτιαξα είναι εντελώς πρόχειρο, με "απλά μαθηματικά" και λειτουργεί μόνο στην περίπτωσή μου (συγκεκριμένες διαστάσεις χάρτη).
Αν κάποιος το θέλει είτε για να το βελτιώσει ή να το χρησιμοποιήσει, μπορεί να μου το ζητήσει.
Offline
Αυτό το βρήκα κι εγώ και προσπάθησα να το αλλάξω παίρνοντας αυτό το κομμάτι και βάζοντάς το στο δικό μου αρχείο όρισα το path που βρίσκονται τα εικονίδια
.
Αυτό δεν το κατάλαβα. Δηλ που το έβαλες? Αφού στο html ορίζεται να διαβάζει μόνο το αρχείο leaflet.css και κανένα άλλο css αρχείο.
Άρα μέσα στο leaflet.css έπρεπε να αλλάξεις το path.
Επιπλέον, με το 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 ?>',
αλλά και πάλι δεν το παίρνει.
Ναι το ξέρω ότι ορίζεται στο script, αλλά προφανώς αυτή η παράκαμψη για κάποιο λόγο δεν δουλεύει, οπότε πάει και παίρνει το εικονίδιο από το leaflet.css.
Πάντως στην θέση σου δεν θα χρησιμοποιούσα το παράδειγμα για Custom marker. Θα χρησιμοποιούσα το παράδειγμα για το απλό marker και απλά θα άλλαζα το path στο leaflet.css.
Last edited by nikospag (2018-11-11 08:59:39)
Offline
Βρήκα πως δουλέυει η "παράκαμψη". Άκου τι θα κάνεις
Το 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.
Το δοκίμασα και δουλεύει μια χαρά.
Last edited by nikospag (2018-11-11 13:38:48)
Offline
Σε μένα γιατί δε θέλει να δουλέψει;;;
Στην "απελπισία" μου έβαλα το οριζόμενο εικονίδιο σε όλες τις πιθανές θέσεις.
Σε καμία δεν το βρήκε και να το εμφανίσει.
Ως αυτοδίδακτος και ερασιτέχνης δεν είμαι απόλυτα σίγουρος.
Το /downloads οδηγεί στο ριζικό φάκελο downloads και όχι στο leaflet/downloads (που δεν υπάρχει). Σωστά;
Γιατί προφανώς κάπου ορίζεται όλα να γίνονται μέσα στο φάκελο leaflet.
Offline
Το /downloads οδηγεί στο ριζικό φάκελο downloads και όχι στο leaflet/downloads (που δεν υπάρχει). Σωστά;
Σωστά.
Δηλαδή το σύστημα στο τέλος θα δημιουργήσει το path
http://testpois.4gps.gr/downloads/alter_icons1_30x42.png
Γιατί προφανώς κάπου ορίζεται όλα να γίνονται μέσα στο φάκελο leaflet.
Αυτό ορίζεται στο html αρχείο. Μέσα στον φάκελο leaflet θα πρέπει να υπάρχουν το leaflet.js και το leaflet.css μαζί.
ΥΓ. Μην χρησιμοποιείς γλώσσα PHP μέσα στο javascript το οποίο μάλιστα βρίσκεται μέσα σε ένα αρχείο με επέκταση .html. Είναι πολύ πιθανό να μην μπορεί ο server σου να την διαβάσει.
Last edited by nikospag (2018-11-12 01:04:37)
Offline
Όλα ok!!!
Αλλά αν μπορείς να μου εξηγήσεις το παρακάτω (ίσως το ερώτημα να είναι ...ρητορικό, να μην υπάρχει απάντηση).
Οτιδήποτε φτιάχνω κάτι, το κάνω πρώτα τοπικά με το xampp.
Εκεί η πρότασή σου δεν δούλευε.
"Ψάχνοντας" βρήκα ότι το "σωστό" είναι ../downloads. Έτσι μου δούλεψε (στο xampp).
Το ανέβασα στον server (testpois) και διαπίστωσα ότι δεν δουλεύει.
Εκεί μου ήρθε το ότι το δοκίμασες και δουλεύει.
Το έβαλα όπως το δίνεις και δούλεψε.
Το ερώτημα: Είναι λάθος του xampp; Άλλαξε κάτι (το συγκεκριμένο) και δεν έχει ενημερωθεί το xampp;
Edit
Όλα σχεδόν τα αρχεία μου είναι *.php
Last edited by gtsoukn (2018-11-12 01:14:04)
Offline
Το ../downloads είναι relative path, και άρα εξαρτάται από το πως είναι φτιαγμένο το δέντρο των φακέλων στο xampp.
Στον server σου όμως το δέντρο των φακέλων μάλλον είναι διαφορετικό. Για αυτό σου έδωσα το absolute path που οδηγεί ακριβώς στον φάκελο που θέλουμε, ανεξάρτητα από το σε ποιόν φάκελο βρίσκεται το αρχείο από το οποίο δίνεται η εντολή. Ελπίζω να έγινα κατανοητός.
Offline
Εσύ καλά τα λες, για μένα είναι δύσκολο να το κατανοήσω.
Όπως και να 'χει, ευχαριστώ για τη βοήθεια και το χρόνο σου.
Offline
Βάλε στο Google την φράση "relative vs absolute path" και θα μάθεις την διαφορά (έχει και βιντεάκια αν θέλεις).
Πρέπει να το μάθεις αυτό διότι έχεις website (όπως έχω και εγώ) και θα σου χρειαστεί. Είναι πολύ σημαντικό,
Χαίρομαι πολύ που σε βοήθησα φίλε μου.
Last edited by nikospag (2018-11-12 06:06:02)
Offline
Pages: 1