Karte mit Sprechblase

Hi,

ich will auf meiner Homepage einfach nur eine einfach Karte anzeigen.
Sie soll im eigentlichen nur anzeigen, wo ich genau wohnhaft bin.

In den Dokus hab ich den Code hier gefunden:


<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var lonLat = new OpenLayers.LonLat( XX,YY )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // Transformation aus dem Koordinatensystem WGS 1984
            map.getProjectionObject() // in das Koordinatensystem 'Spherical Mercator Projection'
          );

	 
    var zoom=16;
 
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
 
    markers.addMarker(new OpenLayers.Marker(lonLat));
 
    map.setCenter (lonLat, zoom);
	
	
  </script>
</body></html>

(YY:XX sind natürlich wirkliche Kordies)

Das klappt soweit hervoragend und ist auch einfach zu bedingen.
Meine Adresse wird mittels marker auch entsprechend markiert.

2 Wünsche hätte ich aber noch:

  • Es geht wohl auch als marker auch ein anderers Symboö (die rote Stecknadel wäre gut)
  • Es gehen wohl auch Sprechblasen.

Letzteres habe ich wohl schon passendes gefunden:


     // We add the marker with a tooltip text to the overlay
    overlay.addFeatures([
        new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
    ]);

    // A popup with some information about our location
    var popup = new OpenLayers.Popup.FramedCloud("Popup", 
        myLocation.getBounds().getCenterLonLat(), null,
        '<a target="_blank" href="http://openlayers.org/">We</a> ' +
        'could be here.<br>Or elsewhere.', null,
        true // <-- true if we want a close (X) button, false otherwise
    );

nur einfach in den JS Code reinpacken ist hier leider nicht.
Denn dann wird die Karte nicht mehr geladen.

Ich will aber ungern, das ganze Projekt runterladen und da gleich x Datei einbinden nur um n Hinweistext auszugeben.

Entweder ist die Doku hierrüber sehr dürftig… oder ich finde hierzu nicht’s… oder ich hab falsch gesucht.

Weiß einer Rat, wie ich den oben genannten Code erweitern könnte ?
Soll wie ja gesagt, das einfachste vom einfachsten sein.

Hi Lord Icon und willkommen im Forum,

Du könntest dich hier bedienen: http://www.openlayers.org/dev/examples/osm-marker-popup.html
(da steht in http://www.openlayers.org/dev/examples/osm-marker-popup.js ein “externalGraphic: ‘…/img/marker.png’” das wäre die Stelle, wo du dein eigenes Icon unterbringen könntest.

Alternativ könntest du statt Openlayers auch Leaflet verwenden, das ist vielleicht besser dokumentiert (zumindest findet man dort die Dokus besser, glaube ich…): http://leafletjs.com/examples/custom-icons.html

Grüße, Max

Hallo, auch von mir: Herzlich willkommen

Hier darfst du dir ein eigenes Straßenschild machen und das in deiner Hompage einbauen:
http://www.strassenweb.de/

Grüße, Rolf

warum so kompliziert?

https://osm.wno-edv-service.de/residentials/?zoom=15&lat=50.11034&lon=8.10538&layers=0BFFTFFFFTT

Bild anklicken und abspeichern. Wenn kein Bild vorhanden ist, Ortsschild in OSM erfassen, 5 Minuten warten und runterladen.

Gruss
walter