SlippyMap Generator

sieht mal nicht schlecht aus, sobald ich wieder zuhause bin teste ich das noch einmal. Das ist genau das, was ich schon lange vermisst habe :slight_smile: Gruß Michael

Hallo dt2, super Sache die du da “entworfen” hast. Ich denke Darauf haben viele (so wie ich) gewartet. Finde es wirklich sehr gut das sich mal jemand mit dem entsprechenden Hintergrundwissen an die Arbeit macht und ein paar der vielen Möglichkeiten in eine Oberfläche packt. Darauf hat der Dummi gewartet :slight_smile: Danke, Georg

Hi dt2, habe gerade deinen SlippyMap Generator ausprobiert und bin begeistert. Sehr schön gelöst, das Hinzufügen von Markierungen. Zum Erzeugen der Übersichtskarte brauchst du eigentlich nur folgendes:

var layer_overviewmap = new OpenLayers.Layer.OSM.Mapnik("Mapnik"); map.addControl(new OpenLayers.Control.OverviewMap({layers: [layer_overviewmap]}));

Also einfach vor Zuweisung des Overview-Controls einen neuen Layer dafür erzeugen, dann sollte das funzen. Viele Grüße und weiter so. Klasse Sache!

Danke, so hab ichs erstmal eingebaut.

Hallo, ich habe Dein Skript ausprobiert. Ich habe allerdings das Problem, dass nicht die angegebene Position und Zoomgröße angesprungen wird, wenn die Karte aufgebaut ist. Woran liegt das? Welche Info’s muß ich liefern, damit man das Problem eingrenzen kann? Hier mal der erzeugt Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de-de"> <head> <title>Karte</title> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-language" content="de" /> <meta name="generator" content="Easymap" /> <link rel="stylesheet" type="text/css" href="map.css">  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> <script type="text/javascript" src="util.js"></script>   <script type="text/javascript"> //<![CDATA[  var map;  function drawmap() {     OpenLayers.Lang.setCode('de');          map = new OpenLayers.Map('map', {         projection: new OpenLayers.Projection("EPSG:900913"),         displayProjection: new OpenLayers.Projection("EPSG:4326"),         controls: [             new OpenLayers.Control.MouseDefaults(),             new OpenLayers.Control.LayerSwitcher(),             new OpenLayers.Control.PanZoomBar()],         maxExtent:             new OpenLayers.Bounds(-20037508.34,-20037508.34,                                     20037508.34, 20037508.34),         numZoomLevels: 18,         maxResolution: 156543,         units: 'meters'     });    // Noch mehr Kontrollelemente hinzufügen.. map.addControl(new OpenLayers.Control.Permalink('permalink')); map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.MousePosition());    // Position und Zoomstufe der Karte lon = 9.12290954589352; lat = 51.90251413836725; zoom = 13;   checkForPermalink();  // Layer hinzufügen  layer_markers = new OpenLayers.Layer.Markers("Marker", { projection: new OpenLayers.Projection("EPSG:4326"),visibility: true, displayInLayerSwitcher: true }); map.addLayer(layer_markers) layers = new Array(); layer_layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik"); map.addLayer(layer_layerMapnik) layers.push(new Array(layer_layerMapnik,'layer_layerMapnik')); setLayer(0); layer_layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home"); map.addLayer(layer_layerTah) layers.push(new Array(layer_layerTah,'layer_layerTah')); layer_layerCyclemap = new OpenLayers.Layer.OSM.CycleMap("Cyclemap"); map.addLayer(layer_layerCyclemap) layers.push(new Array(layer_layerCyclemap,'layer_layerCyclemap'));   // An die richtige Stelle springen.. jumpTo(lon,lat,zoom);  // Marker addMarker(layer_markers,9.125827789301606,51.90293779757049,"<b>test1</b><p />Test1",true); addMarker(layer_markers,9.124797821039928,51.911833717879865,"<b>Test2</b><p />unsichtbar Test2",false); addMarker(layer_markers,9.145053863519589,51.910245289908126,"<b>Test3</b><p />Sichtbar",true);   // Nochmal was.. jumpTo(lon, lat, zoom); toggleInfo(); }  //]]>     </script> </head> <body onload=drawmap();>    <div id="descriptionToggle" onClick="toggleInfo()">Informationen zur Karte anzeigen</div>  <div id="description" class="hide">Es wurde keine Kartenbeschreibung angegeben.</div>  <div id="map"></div>  <div id="attribution">Kartendaten von <a href="http://www.openstreetmap.org" title="OpenStreetMap">OpenStreetMap</a></div> </body> </html>

Weiß ich auch nicht. Passiert es auf der Vorschau Seite oder bei dir lokal? Hast du die aktuelle JS-Datei (util.js) heruntergeladen und evlt. deinen Browsercache geleert? Mit welchem Browser? Falls der Browser irgendwelche Scriptfehler meldet, könntest du die hier posten.

Ja, die scheint das Problem gewesen zu sein. Danke Andreas

Sehr schön. Wenn man jetzt noch die ÖPNV-Karte einbinden könnte http://www.xn–pnvkarte-m4a.de/ wäre das echt Klasse. Und wenn man dann noch gpx-Pfade anzeigen könnte wäre es perfekt :wink: Ich weis, ich bin gierig :smiley: Danke für Deine Arbeit Andreas

Ich weiß leider nicht wie man die ÖPVN-Karte einbindet.

Es gibt jetzt einige Verbesserungen, z.B. kann man jetzt auch verschiedene Marker Icons auswählen. Die ÖPVN Karte ist leider in den höheren Zoomstufen nicht möglich, da das der Autor nicht so gerne möchte. http://osmtools.de/easymap

Edit: Neue Url

Und wie sieht es mit der Darstellung eines (oder mehrere) GPX-Pfaden aus? (mit den Augen klimper, klimper, gaaanz lieg guck)

So schwer ist das auch nicht das selber zu machen… :slight_smile: Letztlich würde das Script auch nicht mehr machen als eine Zeile Code hinzufügen. Bloss im Unterschied zu den anderen Sachen müsste man die GPX-Datei erstmal hochladen um sie anzeigen zu können oder es wird nur der Layer erstellt und in der Vorschau nichts angezeigt. Ob das wirklich komfortabler wäre wage ich fast zu bezweifeln. Oder wie stellst du dir das vor?

Für Dumm-User wie mich wäre es wichtig, wenn der “richtige” Code erzeugt wird. Hochladen der Datei auf Deinen Server muß nicht sein. Wie wäre es, wenn man einfach den Link auf die GPX-Datei angibt? Dann müßte es doch klappen, oder?

In der Zeit in der du hier die Beiträge schreibst hättest du es wohl schon selbst einbauen können… :slight_smile: Du kannst ja mal kucken ob es so auf die Schnelle erstmal zufriedenstellend ist… :wink:

Glaub mir, wenn ich Ahnung von js hätte würde ich es tun. Aber bisher sind ziemlich viele meiner Versuche gescheitert :frowning:

Hmm, erstmal Danke für Deine Mühe. Aber ich sehe keinen Track auf meiner Karte. http://www.engel-city.de/geocaching/maptest/map.html Marker und alles andere klappt gut. Aber ich denke bei den Tacks mache ich noch was falsch.

Den Track 1 sehe ich. Allerdings reagieren die Marker nicht auf Klicks. Offenbar liegt der Track Layer über dem Marker Layer und fängt die Klicks ab. Vielleicht ist der andere Track irgendwie nicht ganz in Ordnung?

Jau, jetzt ist der Track 1 plötzlich da, keine Ahnung warum. Aber dafür klappt das klicken auf den Marker jatzt auch nicht mehr bei mir. Eine Frage noch, kann man den Track auch mit der kompletten URL angeben um den von einer anderen Homepage dort anzuzeigen?

Du kannst mal versuchen den Layer mit dem Track über die anderen Layer zu verschieben. Wenn du dich nicht an den Code traust, kannst du auch einfach nochmal online eine neue map.html erstellen.

Ich fürchte das funktioniert nicht, jedenfalls bekomme ich da eine Exception:

Ich weiß nicht woran das liegt, da ich mich mit JavaScript (oder OpenLayers) auch nicht wirklich auskenne.

Hallo, ich mal wieder :smiley: Ich habe noch eine Frage zu Deinem generierten Code. Irgendwo taucht die Zeile

icons[6] = new Array('http://s-hohmann.de/easymap/images/pin_green.png','16','28','0','1'); icons[9] = new Array('http://s-hohmann.de/easymap/images/haus_blue.png','20','24','0.5','0.5');

auf. Was wollen mir die Zahlen hinter der Dateiangabe sagen? Die ersten beiden sind wohl die Größe, aber was bedeuten die nächsten beiden Zahlen? Ich hatte ja erst an einen offset gedacht, aber 0.5 Pixel als offset klappt wohl nicht. Danke für Deine Mühe Andreas

Das ist schon der Offset, aber als Faktor zur Breite und Höhe.