✔ Landkarte einbinden

H

Hans311

Grünschnabel
Liebe Leute,, in diesem queltextl ist eine eingebettete karte von OSM. Mann kann sie mit der Maus verschieben, die karte rein und raus zoomen, das gleiche auch mit dem Scrollrad der Maus.
Ok! Aber, ich möchte gerne jetzt meine eigene karte (svg) oder bild einbeten. Ihr habt sicher eine Idee wie man das lösen kann?
Schon vorab herzlichen Dank!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Landkarte</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

</head>
<body>
<div id="map" style="width:2000px; height:1000px"></div>

<script type="text/javascript">
var map = L.map('map').setView([43.85727, 18.41416], 10);

L.tileLayer('http://{S}/.tile.osm.org/{z}/{x}/{y}.png' ,).addTo(map);

</script>
</body>
</html>
 
Hans311 hat gesagt.:
meine eigene karte (svg) oder bild
Zum Vergrößern anklicken....
Aber weiterhin eine Landkarte? Und was genau unterscheidet sie von der "herkömmlichen" OSM-Karte?

[offtopic]
Hans311 hat gesagt.:
einbeten
Zum Vergrößern anklicken....
einbetten - das e vor einem einfachen "t" wird i.d.R. lang, vor doppeltem "t" kurz ausgesprochen/betont.
[/offtopic]
Hans311 hat gesagt.:
Ihr habt sicher eine Idee wie man das lösen kann?
Zum Vergrößern anklicken....
Wenn für mich ein Thema neu ist, erstmal Google zur Recherche ins Boot holen (xyz = Suchterm) :cool:

osm custom svg:
Wenn der Export ins SVG-Format, oder auch das Erstellen einer individuellen Karte kein Problem darstellt, wie sieht's dann in umgekehrter Richtung mit dem SVG-Import aus?

osm import svg:

Viel Erfolg! :)

[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Vergiss bitte die "svg"! Weißt du's oder weißt du's nicht?
Es kann auch ruhig ein jpg oder png sein, ist egal, nur, das ich weiterhin den Bildausschnitt verschieben und rein-raus zoomen kann.
Wie und was ändere ich in der Zeile: "L.tileLayer('http://{S}/.tile.osm.org/{z}/{x}/{y}.png' ,).addTo(map);"?
Wie könnte ich hier ein bild einbetten?

Danke dir, SpiceLab, für deine Mühe.
 
Hans311 hat gesagt.:
Ich möchte gerne jetzt meine eigene karte (svg) oder bild einbeten.
Zum Vergrößern anklicken....
Hans311 hat gesagt.:
Vergiss bitte die "svg"!
Zum Vergrößern anklicken....
o_O Na denn..., ist eh nicht auf meinem Mist gewachsen :p
Hans311 hat gesagt.:
Weißt du's oder weißt du's nicht?
Zum Vergrößern anklicken....
Verrat' ich nicht :D

Wer meinen Beitrag aufmerksam (zwischen den Zeilen) liest, kommt diese Frage nicht in den Sinn :cool:
Hans311 hat gesagt.:
Es kann auch ruhig ein jpg oder png sein, ist egal, nur, das ich weiterhin den Bildausschnitt verschieben und rein-raus zoomen kann.
Wie und was ändere ich in der Zeile: "L.tileLayer('http://{S}/.tile.osm.org/{z}/{x}/{y}.png' ,).addTo(map);"?
Wie könnte ich hier ein bild einbetten?
Zum Vergrößern anklicken....
Da ist wohl jemand noch nicht auf die Idee gekommen, im Handbuch nachzuschauen, was es denn mit dieser (leicht kryptisch anmutenden) Zeile auf sich hat:
Zusätzlich unter Tutorials den Eintrag Working with map panes aufgeschlagen, der das Beispiel https://cartodb.com/basemaps/ behandelt, und unter https://carto.com/location-data-services/basemaps/#documentation lautet die Zeile für das "Raster"-Demo plötzlich:
Javascript: 
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { ... }).addTo(mymap);
Rechtsklick auf die Landkarte -> Grafik anzeigen -> erzeugt diesen URL https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/15/23108/14961.png

Aha-Erlebnis garantiert :cool:

Für Dich wäre also theoretisch der Part zwischen {s} und {z} von Interesse, der die TopLevelDomain enthält, sowie optional die Subdomain vor {s}.

Ob das aber praktisch genügt (Grafik.whatever auf den eigenen Server laden, URL für tileLayer angeben), damit z.B. rein-/rausgezoomt werden kann, wirst Du dann live erleben.

Ich denke aber eher nicht, da Dein Kartenmaterial OSM bislang nicht bekannt ist, und in deren Datenbank importiert gehört.

Womit ich dann abschließend auf meinen Post vom Freitag zurückkomme, wo sich der Kreis schließt.

Auch wenn, oder gerade, weil SVG wohl bei Dir nicht mehr auf der Agenda ganz oben steht, hast Du es auch hier versäumt, in der Tabelle nachzuschauen, was die drei Spalten File type , Extension und To import into OSM für .jpg und .png so zusammenbringen.


Gute Nacht! -morgens um 04:37h | edit 04:55h- :D

[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Ich danke dir. Ich hatte einfach keine Lust studenlang zu recherchieren und am Ende nicht schlauer zu sein.

Alles Gute!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück