eigene Karte nutzen - Markierungen

Communities Deutschland (Germany)
1

Hallo, ich möchte open Street Map in eine eigene Webseite einbinden, und dann folgende Informationen einblenden:

Häuser, bzw Koordinaten sollen farbig markiert werden,

beim Mouseover oder klick über die Markierungen sollen Informationen eingeblendet werden, evtl auch Fotos.

Lässt sich das mit Open Street Map realisieren? Und wenn ja gibt es dafür eine Anleitung?

Danke für Tipps!!!

2

Hallo Abrafax75,

willkommen im Forum!

Du beschäftigst Dich mit OpenLayers. Schaue dazu ins Wiki von OSM (es gibt dort Beispiele zu OSM) und auf die Homepage von OpenLayers.

Die Karte OpenLinkMap sollte etwas implementiert haben, was in Deine Richtung geht. Schau Dir die mal genauer an.

3

Vielen Dank für die schnelle Hilfe, ich konnte mein Anliegen schnell umsetzen.

Ich habe zu diesem Code welcher von der OSM Wiki Seite stammt http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example noch Fragen:


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
#map {
        width: 100%;
        height: 100%;
        border: 0px;
        padding: 0px;
        position: absolute;
     }
body {
        border: 0px;
        margin: 0px;
        padding: 0px;
        height: 100%;
     }
    </style>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <script type="text/javascript">
        <!--
        // complex map object
        var map;
 
    // Start position for the map (hardcoded here for simplicity,
    // but maybe you want to get from URL params)
    var lat = 48.94;
    var lon = 9.55;
    var zoom = 12;
 
        function init(){
            map = new OpenLayers.Map('map',
                    { maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                      numZoomLevels: 19,
                      maxResolution: 156543.0399,
                      units: 'm',
                      projection: new OpenLayers.Projection("EPSG:900913"),
                      displayProjection: new OpenLayers.Projection("EPSG:4326")
                    });
 
            var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
 
            var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
 
            map.addLayers([layerMapnik,layerTah]);
 
            var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"./textfile.txt",
                      projection: map.displayProjection
                    });
            map.addLayer(pois);
 
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
            var lonLat = new OpenLayers.LonLat(lon, lat).transform(map.displayProjection,  map.projection);
            if (!map.getCenter()) map.setCenter (lonLat, zoom);
        }
        // -->
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

Kann man die Größe der Pop-Up Box einstellen?

Außerdem kann ich die Anzeige der Parkplätze, und auch dieser “Recycling”-Symbole abschalten??

Danke

4

So weit ich weiß, kann man bei Verwendung der txt-Datei die Popupbox-Größe nicht einstellen.
Hier z.B. stellt sich die Größe automatisch ein:
http://forum.openstreetmap.org/viewtopic.php?pid=59274#p59274

5

HI,
also ich hab die OSM auch in meine Webseite eingebunden und dabei auch die Größe der Karte festgelegt.
Den Code hab ich hauptsächlich von hier http://wiki.openstreetmap.org/wiki/User:Aighes/GPX-Track_auf_Website vielleicht hilft das noch ein wenig.
Demo http://mtb.kilu.de/2010/2010.php?track=01-14%20Qybin%20wandern.gpx
Viel Spaß beim Basteln Jörg