nicht angemeldet
Navigation auf Bild mit map-Verlinkungen
0 
Gunnar Bittersmann
0 
JürgenB
0 
Julius
Navigation auf Bild mit map-Verlinkungen
Ich komme gerade leider nicht weiter und bitte um eure Hilfe.
Ich habe eine relativ große Straßenkarte mit Gebäuden als Bilddatei, welche ich vergrößern und verkleinern muss um die Details (einzelne Gebäude auf einer Karte) anklicken zu können. Außerdem wäre es gut, wenn man auf dem Bild Navigieren kann indem man das Bild mit gehaltenem Klick verschieben kann (ähnlich Google Maps) und nicht die Navigationsbalken am Rand des Fensters benutzen muss. Momentan habe ich die Bilddatei als einziges auf der Seite, es wäre aber auch gut wenn man dies in einen Teil einer Website einpflegen kann. Dabei müssen die Verlinkungen jedoch noch funktionieren. Momentan benutze ich die „map“ Verlinkungen mit „areas“ wäre aber über bessere Vorschläge sehr erfreut.
Ich hoffe mir kann jemand weiterhelfen. Bitte melden. Bei Rückfragen stehe ich selbstverständlich gerne zur Verfügung.
-
@@Tim159753
Ich habe eine relativ große Straßenkarte mit Gebäuden als Bilddatei
Foto oder Zeichnung (Karte)?
Momentan benutze ich die „map“ Verlinkungen mit „areas“ wäre aber über bessere Vorschläge sehr erfreut.
Wenn Karte: SVG.
(Was nicht heißt, die vorhandene Rastergrafik in SVG einzubetten.)
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Es ist eine Zeichnung die mit einem CAD Programm erstellt wurde und dann als PDF oder halt normale Bildformate ausgegeben wird. SVG ist auch mein bevorzugtes Format gewesen.
-
-
Hallo,
da du Google Maps schon erwähnt hast, man kann in der Google Maps API auch eigene Kartenbilder verwenden:
Overlaying an image map type
Adding a Custom OverlayGruß
Jürgen-
Vielen Dank. Im Prinzip soll es so sein wie von dir vorgeschlagen nur sollte ich versuchen es ohne Karten von Google zu machen. Es sollte nur "der letzte Ausweg" sein weil die Karte auch ohne Internetverbindung funktionieren soll. Zur Erklärung, es wird eventuell nur auf einem eigenen Server laufen auch nur für den internen gebrauch, sodass keine Internetverbindung genutzt werden kann. Daher wäre eine Lösung ohne "Fremdsoftware" sehr vorteilhaft.
-
-
Moin Tim!
Vielleicht ist Leaflet etwas für dich. Es ist ähnlich wie Google-Maps, aber quelloffen und frei. Nachdem, was ich so aus der Dokumentation erahnen konnte, ist es auch wohl sehr flexibel.
Gruß
Julius-
Hallo Julius,
Vielleicht ist Leaflet etwas für dich. Es ist ähnlich wie Google-Maps, aber quelloffen und frei. Nachdem, was ich so aus der Dokumentation erahnen konnte, ist es auch wohl sehr flexibel.
Ich habe eine ähnliche Anwendung, einen Hallenplan auf einer Messe.
Schau mal hier zum Einlesen und Ausprobieren: http://osmer.de/leaflet/
Im Moment hakt es noch, weil ich den Hallenplan nach Süden (unten) aus seinem Rahmen rausschieben und dann nicht mehr "greifen" kann. Soll wohl ein Bug seit Jahren sein.
Linuchs
-
Hallo Linux,
Im Moment hakt es noch, weil ich den Hallenplan nach Süden (unten) aus seinem Rahmen rausschieben und dann nicht mehr "greifen" kann. Soll wohl ein Bug seit Jahren sein.
hast du schon mal geprüft, ob es ein „Karte wurde bewegt“-Event gibt? Da könntest du dann einen Begrenzer einbauen.
Gruß
Jürgen -
Schau mal hier zum Einlesen und Ausprobieren: http://osmer.de/leaflet/
Im Moment hakt es noch, weil ich den Hallenplan nach Süden (unten) aus seinem Rahmen rausschieben und dann nicht mehr "greifen" kann. Soll wohl ein Bug seit Jahren sein.
Hallo Linuchs,
also bei mir funktioniert folgender Code wie erwartet:
<!DOCTYPE HTML> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> </head> <body> <div id="lageplan" style="width:1114px; height:522px;"></div> </div> <script type='text/javascript'> var bounds = Object.create([[0, 0],[522,1114]]); var map = L.map('lageplan', { crs: L.CRS.Simple, maxBounds: bounds }); map.fitBounds(bounds); var PlanLayer = L.imageOverlay('hallenplan.jpg', bounds).addTo(map); </script> </body> </html>P.S.
Man kann denn Layer auch bewegen, wenn der Plan ausserhalb des sichtbaren Bereichs ist, das ist allerdings nicht sehr hilfreich, wenn man nicht weiss in welche Richtung.
Und zur Frage in deiner Anleitung, warum in leaflet x- und y-Wert bei der Koordinatenangabe vertauscht sind:
Leaftlet ist ja für Darstellung im geografischen Umfeld gedacht. Dort ist die Reihenfolge mit dem vertikalen Wert (y = geografische Breite = lat) an erster Stelle üblich und in einer ISO-Norm festgelegt. Du kannst ja mal die Koordinate 8.478549, 49.898743 in das Suchfeld deiner bevorzugten Online-Karte eingeben und dann entscheiden, ob Du dort jetzt lieber wärst.
-
Hallo osm,
danke dir, jetzt funktioniert es wie gewünscht.
Das Problem beim Googeln ist leider immer wieder, dass man auf veraltete Ratschläge stößt.
Linuchs
-
-
-