Fiktive Weltkarte in Website einbinden?

5 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Hallo,

dieses Tutorial in englischer Sprache zeigt detailliert eine Möglichkeit, die mir sehr gut gefällt.

Beschreibung vom Tutorial-Ersteller:

In this series we will be creating a fantasy map for my RhinoDroid comic strip using LeafletJS mapping API.

DOWNLOADS:
These are the files and applications throughout this tutorial:

LeafletJS
Photoshop Tile Cutter Script
PNGyu PNG optimizer

The programs used in this tutorial are:
Clip Studio (for creating the graphics)
Photoshop (for making the tiles)
PNGyu (for optimising the PNG tile files.
Sublime Text (for writing the html and javascript code)
Firefox with Firebug (for viewing and debugging the map)

http://leafletjs.com/download.html
https://github.com/bramus/photoshop-google-maps-tile-cutter/
http://nukesaq88.github.io/Pngyu/

https://youtube.com/watch?v=EmfE9VyAYcY

https://youtube.com/watch?v=vPS9KoJEzQ4

https://youtube.com/watch?v=eSMmdTFsx6E

https://youtube.com/watch?v=R8gN379z8eA

https://youtube.com/watch?v=Nl7KxXHpl5o

https://youtube.com/watch?v=CsVFADV6RD8

Viel Spaß beim Nachmachen ;-)

Das Problem ist, das Bild ist relativ klein (ich meine im Vergleich zu Google Maps). Wenn du stark reinzoomst, wird es ziemlich unscharf. Ansonsten könnte man dies mit JavaScript realisieren.

https://www.sitepoint.com/html5-javascript-mouse-wheel/

https://stackoverflow.com/questions/35252249/move-drag-pan-and-zoom-object-image-or-div-in-pure-js

Eine Karte wie Maps lässt sich auf einfachstem Wege so realisieren, dass es für jede Zoomstufe ein eigenes Bild gibt. Dieses ist sehr groß, sodass mit der Maus darin navigiert werden muss. Die Beschriftungen werden mit x- und y-Position gespeichert sowie Mindest- und Maximalzoomstufe. Je nachdem werden sie dann eingeblendet.

Das ganze Thema ist für einen Anfänger relativ kompliziert. Mit ein bisschen Erfahrung (1-2 Jahre) solltest du so etwas aber hinbekommen. Das aufwändigere ist in meinen Augen die Erstellungen jedes Frames für die Karte (bei höherer Zoomstufe weitere Details einblenden etc.). Außerdem braucht man eine gute Lösung für große Karten, um Wartezeiten zu optimieren.

Interessant wäre es doch, wenn du zu deiner Karte ein Mapping anlegst (bspw. mit GeoJSON) und diese Koordinaten dann mit d3.js anzeigst. Du könntest darin problemlos herumzoomen oder die Position verändern (scrollen).

Dies würde allerdings voraussetzen, dass du dich intensiv mit JavaScript und etwas HTML/CSS auseinandersetzt.

Eine andere, simple Variante wäre es, wenn du aus deiner Grafik eine SVG-Vektorgrafik machst. Der Zoom würde ebenso problemlos, ohne Datenverlust funktionieren. Für Weiteres siehe hier:

https://msdn.microsoft.com/en-us/library/gg589508(v=vs.85).aspx

Eine Beispieldemo dazu kannst du dir hier anschauen: http://samples.msdn.microsoft.com/workshop/samples/svg/zoomAndPan/orgChart.html

Was möchtest Du wissen?