OpenStreetMap in Website einbinden

Communities Deutschland (Germany)
14 
<!DOCTYPE html>
<html>
    <head>
	<title>Map | Testanwendung</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript">
	//<![CDATA[


	// create a map in the "map" div, set the view to a given place and zoom
	var map = L.map('map');

	// add a CloudMade tile layer with style #997
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
	}).addTo(map);

	L.marker([51.5, -0.09]).addTo(map)

	//]]>
	</script>
    </head>
    <body>

  <div id="header">
      <h1>Karte (Testversion)</h1>
      <div id="map"></div>
  </div>

</body>
</html>

Hier ein Beispiel mit Leaflet.

Bitte beachte auch, dass externe Javascripts teilweise von Browser erst geladen werden, wenn die html Seite im HTTP Kontext liegt. Also im Browser die Adresse mit http:// beginnt und nicht mit file://

Also testweise mal auf deinen Webserver hochladen oder Lokal aufm Apache. Keine Ahnung wie bewandert du in dem Bereich bist.

EDIT: Hab grad im Screenshot gesehen, das du auf localhost unterwegs bist - sollte also nicht das Problem sein :slight_smile:

Gruß
M

15

1

16

Ich Depp… :smiley:

Hier nochmal neu. (Hatte die externen Links vergessen und nicht getestet) :frowning:

<!DOCTYPE html>
<html>
    <head>
	<title>Map | Testanwendung</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
 	<!--[if lte IE 8]>
	     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
	 <![endif]-->


	<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

	
    </head>
    <body>

  <div id="header">
      <h1>Karte (Testversion)</h1>
      <div id="map" style="height: 500px;"></div>


      <script type="text/javascript">

	
	//<![CDATA[

    var lon = 6.641389;
    var lat = 49.756667;
    var zoom = 7;

	// create a map in the "map" div, set the view to a given place and zoom
	var map = L.map('map').setView([lat, lon], zoom);

	// add a CloudMade tile layer with style #997
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
	}).addTo(map);

	L.marker([lat, lon]).addTo(map)

	//]]>
	</script>
  </div>

</body>
</html>

Bei mir Läuft es…

Gruß
M

17

Zum Code aus entstanden aus dem Wiki-Beispiel: Um die Karte selbst zu bekommen folgendes verändern:

jumpTo(lon, lat, zoom);

Ändern in:

map.setCenter(new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), zoom);

Im Code wird zudem versucht, die Karte in das HTML-Element mit der ID “map” zu laden - das ist aber nicht vorhanden. Zudem scheint via CSS im vorgesehenen Element gar keine Größenangabe zu existieren… Daher den HTML-Code z.B. so ergänzen bzw. ändern:

<div id="map" style="width:500px; height:500px;"></div>

Funktioniert erst einmal die Kartendarstellung, sind die Marker ein weiteres Kapitel…

18

1

19

1

20

Klar… Da muss man dann das Script etwas anpassen, aber es geht.

Wo kommen die Marker denn her? MySQL Datenbank? Ein PHP-Script?

Bewegen sich die Marker, oder willst du neue/weitere Marker nachladen, wenn die Karte bewegt wird?

Die HTML Seite mit der Map würde per AJAX/Json die Marker laden und in die Karte schreiben.
Ich würde die Marker jedoch vorher in eine eigene LayerGroup schieben: http://leafletjs.com/reference.html#layergroup

Die LayerGroup kann man mit der Methode clearLayers() leeren und dann neu befüllen.

Du brauchst also 2 Funktionen: initMap() und getMarkers().

var map;

muss aber vorher definiert werden, damit

 getMarkers()

auch Zugriff darauf hat.

Wenn Du noch weitere Fragen hast, gern.

Gruß
M

21

Michael,

den siehst Du doch wenn Du die Seite aufrufst - das Main-DIV kopierste Dir mal in ein HTML-Gerüst und dann sollte das auch schon sofort funktionieren.

LG,

-moenk

22

1

23

Moin,

in meinem Beispiel würdest Du Datum und Uhrzeit und was auch immer als GeoRSS zur Verfügung stellen und jeder Marker ist dann anklickbar und zeigt eben diese Information, das kann OpenLayers sehr komfortabel.

LG,

-moenk

24

1

25

Nahmd,

Grundsätzlich gilt: Du kannst nicht von außen auf einen Browser zugreifen und den zu irgendetwas veranlassen (jedenfalls solange die Programmierer nicht geschlampt haben). Wenn sich in der Anzeige etwas tun soll, muss die Seite, genauer ein enthaltenes Skript sich darum kümmern.

In Deinem Fall wird die Seite in bestimmten Abstände eine Liste der anzuzeigenden Marker von einer bestimmten URL abholen. Ruf den Link auf und drück’ ein paar Mal “Reload”, dann siehst Du, worum es geht.

Du solltest als erstes einen solchen Marker-Feed auf Deiner Maschine einrichten. Meinen Feed kannst Du zum Testen nicht benutzen, weil der Browser sich immer nur mit dem Server verbinden darf, von dem er die HTML-Seite geladen hat. Du kannst aber natürlich meinen Codeschnipsel bei Dir laufen lassen.

Hinweis: ich verwende eine etwas veraltete Technik und benutze Tab-getrennte CSV statt neuerer Formate wie XML oder JSON. Nur damit keine Klagen kommen.

Dieser Marker-Positions-Feed wird in eine Seite eingebunden. Und das war es auch schon. Kopier den Sourcecode auf Deine Maschine und pass ihn an.

Viel Spaß!

Gruß Wolf

26

1

27

Nahmd,

Mein Beispiel baut auf OpenLayers auf und funktioniert nicht mit Leaflet. :frowning:

Mit Leaflet habe ich noch nicht gearbeitet und kann also auch nichts dazu sagen.
Da muss einer der Leaflet-Experten Dir weiterhelfen. Sorry.

Gruß Wolf

28

1

29

Nahmd,

Sehr schön.

Zum Thema GeoRSS habe ich eine Beispielseite ins Netz gestellt inklusive eines rudimentären GeoRSS-Generator-Skript.

Ich denke, auf das Notwendigste reduzierte Beispiele sind nützlicher als viele Worte.

Weiterhelfen bei Webanwendungen ist viel einfacher oder wird überhaupt erst möglich, wenn man das Angebot live sehen kann.

Wenn Du keine feste IP hast (und wer hat die schon daheim), kannst Du einen DynDNS-Service nutzen. Dabei bekommst Du eine Subdomain bei einem Service-Provider zugewiesen, Dein Rechner meldet seine IP-Adresse bei jeder Änderungen an den Betreiber, und die fleißigen Helfer aus dem Forum können den Namen der Subdomain in den Browser tippern und werden mit Deiner aktuellen IP verbunden.

Gruß Wolf

30

1

31

1

32

Nahmd,

Farben ändern kann man mit Dom/Style und JavaScript meines Wissens nicht (mit SVG natürlich schon).

Das wiederum ist trivial (Methode “createIconFromData”. Du kannst Dir auch den HTML-Quellcode der Geschichtskarte anschauen (auch da nach “createIconFromData” suchen): die nutzt die Icon-Auswahl exzessiv.

Gruß Wolf

33

1