[Talk-de] Bilder auf OSM-Karte einbinden

Adiac TeamAdiac at gmx.de
Mi Nov 4 08:53:50 UTC 2009


Am Dienstag 03 November 2009 23:27:04 schrieb Carsten Gerlach:
> Hallo OSM-Freunde,
Hi Carsten,

> Mein Problem ist jetzt, das der Container, der das Bild enthält, feste
> Abmessungen hat. Ich würde es aber gern so haben, daß sich die Größe des
> Containers automatisch der Größe des Bildes anpasst. Kann mir jemand einen
> Hinweis geben, an welcher Schraube ich da drehen muss?
Du machst das über OpenLayers.Layer.GPX. Ich binde die Infos (die auch
Bilder enthalten könnten) direkt im Code ein, da die Infos eh aus einer
Datenbank über Joomla kommen. Das Popup, was genauso aussieht wie bei Dir
ist selbstskalierend.

Dein Codeabschnitt:
var bilder = new OpenLayers.Layer.GPX("Bilder", "gpx_bilder_OSM.gpx", "#FF0000");
map.addLayer(bilder);

Meiner:
markers = new OpenLayers.Layer.Markers("Startpunkte");
map.addLayer(markers);
addMarkers();
function addMarkers() {
ll = new OpenLayers.LonLat(6,51).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
popupClass = AutoSizeFramedCloud;
popupContentHTML = 'Überscghrift<p>Gaaaaaaaaaaaaaaaaaanz_laaaaaaaaaaaaaaaanger_Texttttttttttttttttt</p>'
addMarker(ll, popupClass, popupContentHTML, true);
ll = new OpenLayers.LonLat(7,52).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
popupClass = AutoSizeFramedCloud;
popupContentHTML = '<b>Titel</b>ganzklein'
addMarker(ll, popupClass, popupContentHTML, true);
}

Dafür brauchst Du noch die Funktion addMarker (nicht addMarkers), die Du
hier [1] findest. Vielleicht geht’s auch einfacher, aber so habe ich
es gelöst.
Kannst Du mal den Teil Deiner GPX-Datei posten,
damit ich mal sehe wie ein Bild eingebunden wird? Danke

MfG, Adiac



[1]
	/**
	* Function: addMarker
	* Add a new marker to the markers layer given the following lonlat, 
	*     popupClass, and popup contents HTML. Also allow specifying 
	*     whether or not to give the popup a close box.
	* 
	* Parameters:
	* ll - {<OpenLayers.LonLat>} Where to place the marker
	* popupClass - {<OpenLayers.Class>} Which class of popup to bring up 
	*     when the marker is clicked.
	* popupContentHTML - {String} What to put in the popup
	* closeBox - {Boolean} Should popup have a close box?
	* overflow - {Boolean} Let the popup overflow scrollbars?
	*/

	function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
		var feature = new OpenLayers.Feature(markers, ll);
		feature.closeBox = closeBox;
		feature.popupClass = popupClass;
		feature.data.popupContentHTML = popupContentHTML;
		feature.data.overflow = (overflow) ? "auto" : "hidden";
		var marker = feature.createMarker();
		var markerClick = function (evt) {
			if (this.popup == null) {
				this.popup = this.createPopup(this.closeBox);
				map.addPopup(this.popup);
				this.popup.show();
			} else {
				this.popup.toggle();
			}
		currentPopup = this.popup;
		OpenLayers.Event.stop(evt);
		};
		marker.events.register("mousedown", feature, markerClick);
		markers.addMarker(marker);
	}




Mehr Informationen über die Mailingliste Talk-de