DE:OSM in Website für Gemeinde/js

From OpenStreetMap Wiki
Jump to navigation Jump to search
Übersicht   HTML-Datei   JS-Funktionen   Straßenliste   CSS-Datei   GPX-Dateien   Testanwendung   ToDo-Liste   OL-Bausteine    


Die JavaScript-Funktionen erzeugen den Kartenausschnitt, setzen die Marker, stellen die Routen dar, sorgen für die Einbindung der Nominatim-Suche, erstellen die Straßenliste etc.

Die Datei translations.js ist dazu da, die Objekttypen der Nominatim-Suchergebnisse ins Deutsche zu übersetzen. Sie enthält also nur die entsprechenden Übersetzungen.

JavaScript-Funktionen

function createMap()
{
	var startLat = 49.61;
	var startLon = 11.3363;
	var startZoom = 12;
	wgs84 = new OpenLayers.Projection("EPSG:4326");
	OpenLayers.Lang.setCode('de');
	map = new OpenLayers.Map('mapFrame',
	{
		controls: [],
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: wgs84,
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34),
		numZoomLevels: 19,
		maxResolution: 156543,
		units: 'meters'
	});
	map.addControl(new OpenLayers.Control.PanZoomBar());
	map.addControl(new OpenLayers.Control.ScaleLine());
	map.addControl(new OpenLayers.Control.MousePosition());
	map.addControl(new OpenLayers.Control.LayerSwitcher());
	map.addControl(new OpenLayers.Control.Permalink());
	map.addControl(new OpenLayers.Control.Navigation());
	map.addControl(new OpenLayers.Control.MouseDefaults());
	var mapnikMap = new OpenLayers.Layer.OSM.Mapnik("Mapnik",
	{
		transitionEffect: 'resize'
	});
	var osmarenderMap = new OpenLayers.Layer.OSM.Osmarender("Osmarender",
	{
		transitionEffect: 'resize'
	});
	var cycleMap = new OpenLayers.Layer.OSM.CycleMap("Radkarte",
	{
		transitionEffect: 'resize'
	});
	map.addLayers([mapnikMap, osmarenderMap, cycleMap]);
	var styleGrenze = {strokeColor: "#00FF00", strokeWidth: 2, fillColor: "#00FF00", pointRadius: 5};
	var styleWander = {strokeColor: "#0000FF", strokeWidth: 2, fillColor: "#0000FF", pointRadius: 5};
	var pois = new OpenLayers.Layer.Text("--", { location:"./textfile.txt", projection: new OpenLayers.Projection("EPSG:4326")} );
	map.addLayer(pois);
	pois.setVisibility(false);
	var lGrenzeGpx = new OpenLayers.Layer.Vector("Grenze Simmelsdorf",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/Simmelsdorf Grenze.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleGrenze,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lGrenzeGpx);
	lGrenzeGpx.setVisibility(true);
	var lGrenzKGpx = new OpenLayers.Layer.Vector("Grenze Landkreis",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/Landkreis-Nuernberg-Land.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleGrenze,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lGrenzKGpx);
	lGrenzKGpx.setVisibility(false);
	var lGrenzLGpx = new OpenLayers.Layer.Vector("Grenze Lauf",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/Lauf GrenzeUmriss.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleGrenze,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lGrenzLGpx);
	lGrenzLGpx.setVisibility(false);
	var lWanderGpx = new OpenLayers.Layer.Vector("Tucher Mausoleum, 1 Std.",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW Tucher-Mausoleum.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lWanderGpx);
	lWanderGpx.setVisibility(false);
	var lEibenGpx = new OpenLayers.Layer.Vector("Eibengrat, 2 Std.",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW Eibengrat.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lEibenGpx);
	lEibenGpx.setVisibility(false);
	var lHuttRuGpx = new OpenLayers.Layer.Vector("Hüttenbacher Rundweg, 4½ Std.",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW Huttenbacher Rundweg.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lHuttRuGpx);
	lHuttRuGpx.setVisibility(false);
	var lFrankenGpx = new OpenLayers.Layer.Vector("Frankenweg",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW Frankenweg2.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lFrankenGpx);
	lFrankenGpx.setVisibility(false);
	var lArchaeGpx = new OpenLayers.Layer.Vector("Archäologischer WW, 2 Std.",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW Archaeologischer Wanderweg.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lArchaeGpx);
	lArchaeGpx.setVisibility(false);
	var l1gelbGpx = new OpenLayers.Layer.Vector("1 gelb, 6 Std.",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW 1 gelb.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(l1gelbGpx);
	l1gelbGpx.setVisibility(false);
	var l3gruenGpx = new OpenLayers.Layer.Vector("3 grün, 1 Std.",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW 3 gruen.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(l3gruenGpx);
	l3gruenGpx.setVisibility(false);
	var lS4blauGpx = new OpenLayers.Layer.Vector("Osternohe-Hohenstein, 3 Std.",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW Schnaittach 4 blau.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lS4blauGpx);
	lS4blauGpx.setVisibility(false);
	var lTucherstGpx = new OpenLayers.Layer.Vector("Tuchersteig, 5 Std.",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW Tucher-Steig.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lTucherstGpx);
	lTucherstGpx.setVisibility(false);
	var lSehensGpx = new OpenLayers.Layer.Vector("Sehenswürdigkeiten",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/Sehens.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lSehensGpx);
	lSehensGpx.setVisibility(false);
	var lSitzbaGpx = new OpenLayers.Layer.Vector("Sitzbänke",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/Sitzbank.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lSitzbaGpx);
	lSitzbaGpx.setVisibility(false);
	var lInfotaGpx = new OpenLayers.Layer.Vector("Wandertafeln",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/Wandertafeln.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lInfotaGpx);
	lInfotaGpx.setVisibility(false);
	var lEssenGpx = new OpenLayers.Layer.Vector("Essen und Trinken",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/Essen.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lEssenGpx);
	lEssenGpx.setVisibility(false);
	var lFraGebGpx = new OpenLayers.Layer.Vector("Fränkischer Gebirgsweg",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/WW Fraenkischer-Gebirgsweg.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(lFraGebGpx);
	lFraGebGpx.setVisibility(false);
	var layerRathaus = new OpenLayers.Layer.Vector("Rathaus Simmelsdorf",{
		protocol: new OpenLayers.Protocol.HTTP
		({
			url: "../osm/Rathaus.gpx",
			format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})
		}),
		strategies: [new OpenLayers.Strategy.Fixed()],
		style: styleWander,
		projection: new OpenLayers.Projection("EPSG:4326")
	});
	map.addLayer(layerRathaus);
	layerRathaus.setVisibility(true);
	/*
	var hills = new OpenLayers.Layer.OSM("Relief", "http://topo.geofabrik.de/relief/${z}/${x}/${y}.png",{minZoomLevel: 8, maxZoomLevel: 15 , isBaseLayer:true, transitionEffect:null, attribution: "DEM by <a href='http://srtm.csi.cgiar.org'>CIAT</a>"});
	map.addLayer(hills);
	var trails = new OpenLayers.Layer.OSM("Reit- und Wanderwege", "http://topo.geofabrik.de/trails/${z}/${x}/${y}.png",{minZoomLevel: 8, maxZoomLevel: 15 , isBaseLayer:false, transitionEffect:null, attribution: "Data by <a href='http://openstreetmap.org/'>OSM</a>"});
	map.addLayer(trails);
	//map.addLayer(lRathaus);
	//lRathaus.setVisibility(true);
	//layer_gsat = new OpenLayers.Layer.Google("Google Sat", { type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels:19 } );
	//map.addLayer(layer_gsat);
	*/
	var selcontrol = new OpenLayers.Control.SelectFeature([lGrenzeGpx, lGrenzKGpx, lGrenzLGpx, lWanderGpx, lEibenGpx, lHuttRuGpx, lFrankenGpx, lArchaeGpx, l1gelbGpx, l3gruenGpx, lS4blauGpx, lTucherstGpx, lSehensGpx, lSitzbaGpx, lInfotaGpx, lEssenGpx, lFraGebGpx, layerRathaus],
	{
		onSelect: createPopup,
		onUnselect: destroyPopup,
		toggle: true,
		clickout: true
	});
	map.addControl(selcontrol);
	selcontrol.activate();
	if(!map.getCenter())
	{
		// jump to given start position
		var startPosition = new OpenLayers.LonLat(startLon, startLat).transform(wgs84, map.getProjectionObject());
		map.setCenter(startPosition, startZoom);
	}
	initEnter();
	document.getElementById('searchBox').focus();
}

function initEnter(event)
{
	if (!event)
		event = window.event;
	if(navigator.appName == "Microsoft Internet Explorer")
	{
		if(event.keyCode == 13)
		{
			requestSearch();
		}
	}
	else
	{
		document.captureEvents(Event.KEYPRESS);
		document.onkeypress = keyPressed;
	}
}

function keyPressed(key)
{
	if (key.which == "13")
	{
		requestSearch();
	}
}

function translateType(placeType)
{
	var translatedType = searchTypesDE[placeType];
	if(typeof translatedType=='undefined')
		return "";
	else
		translatedType += "&nbsp;";
	return translatedType;
}

function requestSearch()
{
	document.getElementById('mapFrame').style.top = '175px';
	document.getElementById('resultList').style.height = '100px';
	var placesList;
	document.getElementById('resultList').innerHTML = "<b>Laden...</b>";
	var searchString = document.getElementById('searchBox').value;
	if (searchString.length == 0)
		document.getElementById('resultList').innerHTML = "<b>Leere Eingabe.<br />Nichts gefunden.</b>";
	else
	{
		searchString += ", simmelsdorf";
		searchString = searchString.replace(/ /g, "+");
		var searchUrl = "http://nominatim.openstreetmap.org/search?format=xml&polygon=0&addressdetails=0&q="+searchString;
		var searchRequest = OpenLayers.Request.GET(
		{
			url: searchUrl,
			async: false
		});
		document.getElementById('resultList').innerHTML = searchRequest.responseText;
		placesList = searchRequest.responseXML.getElementsByTagName('place');
		if (placesList.length > 0)
		{
			document.getElementById('resultList').innerHTML = "<br />";
			for (var i = 0; i < placesList.length; i++)
			{
				var place = placesList[i];
				var placeBoundingbox = place.getAttribute('boundingbox');
				var placeKey = place.getAttribute('class');
				var placeValue = place.getAttribute('type');
				var placeName = place.getAttribute('display_name');
				var placeId = place.getAttribute('osm_id');
				var placeLat = place.getAttribute('lat');
				var placeLon = place.getAttribute('lon');
				var placeType = placeKey+"="+placeValue;
				placeType = translateType(placeType);
				var placeBounds = placeBoundingbox.split(",");
				placeName = placeName.replace(", Nürnberger Land, 91245, Regierungsbezirk Mittelfranken, Freistaat Bayern, Bundesrepublik Deutschland", "");
				placeName = placeName.replace(", Nürnberger Land, Regierungsbezirk Mittelfranken, Freistaat Bayern, Bundesrepublik Deutschland", "");
				var placeItem = "<b>"+placeType+"</b><a href=\"javascript:showPlace("+placeBounds[2]+","+placeBounds[0]+","+placeBounds[3]+","+placeBounds[1]+","+placeId+","+placeLat+","+placeLon+");\">"+placeName+"</a><br /><br />";
				document.getElementById('resultList').innerHTML += placeItem;
			}
		}
		else
			document.getElementById('resultList').innerHTML = "<b>Nichts gefunden.</b>";
	}
}

function showPlace(left, bottom, right, top, id, lat, lon)
{
	document.getElementById('mapFrame').style.top = '75px';
	document.getElementById('resultList').style.height = '0px';
	var bounds = new OpenLayers.Bounds(left, bottom, right, top).transform(wgs84, map.getProjectionObject());
	map.zoomToExtent(bounds, true);
}

function addMarker(layer, lon, lat, popupContentHTML)
{
	var ll = new OpenLayers.LonLat(lon, lat).transform(wgs84, map.getProjectionObject());
	var feature = new OpenLayers.Feature(layer, ll);
	feature.closeBox = true;
	feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(300, 180) } );
	feature.data.popupContentHTML = popupContentHTML;
	feature.data.overflow = "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();
		}
		OpenLayers.Event.stop(evt);
	};
	marker.events.register("mousedown", feature, markerClick);
	layer.addMarker(marker);
}

function createPopup(feature)
{
	var lonlat = feature.geometry.getBounds().getCenterLonLat().clone();
	lonlat.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
	feature.popup = new OpenLayers.Popup.FramedCloud
	(
		"gpx",
		feature.geometry.getBounds().getCenterLonLat(),
		null,
		"<b id=\"popupTitle\">"+feature.attributes.name+"</b><p id=\"popupContent\">"+feature.attributes.desc+"</p>",
		null,
		true
	);
	map.addPopup(feature.popup);
}

function destroyPopup(feature)
{
	feature.popup.destroy();
	feature.popup = null;
}

function showPosition(position)
{
	var coordinate = position.split(";");
	var position = new OpenLayers.LonLat(coordinate[0], coordinate[1]).transform(wgs84, map.getProjectionObject());
	map.setCenter(position, 17);
}


Die translations.js ist der Einfachheit halber nicht hier aufgeführt, sondern kann einfach heruntergeladen werden.

Herunterladen

Hier kannst du die functions.js herunterladen, sowie die translations.js.

Kopieren

  1. kopiere den gesamten Code. Achte darauf, dass du auch das erste und letzte Zeichen kopiert hast.
  2. füge den Code im Texteditor in eine neue Seite ein
  3. speichere den Code unter dem Dateinamen "functions.js"
  4. lade die translations.js herunter und speichere sie unter diesem Namen ab
  5. lade die Dateien mit dem FTP-Programm auf den Webserver in den passenden Ordner

Falls du einen anderen Ordner- oder Dateinamen wählst, passe die HTML-Datei entsprechend an.

Kartenmitte und Zoomstufe definieren

var startLat = 49.61;
var startLon = 11.3363;
var startZoom = 12;

Die Koordinaten für die gewünschte Kartenmitte und der Wert für die Zoomstufe sind entsprechend anzupassen.

Layer definieren

var lEibenGpx = new OpenLayers.Layer.Vector("Eibengrat, 2 Std.",{protocol: new OpenLayers.Protocol.HTTP({url: "../osm/WW Eibengrat.gpx",format: new OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})}),strategies: [new OpenLayers.Strategy.Fixed()],style: styleWander ,projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayer(lEibenGpx);
lEibenGpx.setVisibility(false);


Die Werte für den anzuzeigenden Layer-Namen und die GPX-Datei sind entsprechend anzupassen.

Der Style bzw. das Aussehen von Symbolen, Markern und Linien wird hier bestimmt, indem ein bestimmter Style angegeben wird, der weiter oben definiert ist, z.B. so: 

var styleWander = {strokeColor: "#0000FF", strokeWidth: 2, fillColor: "#0000FF", pointRadius: 5};

Hier wird als Linienstärke, Linienfarbe, Punktradius und Punktfarbe festgelegt.

Layer und Marker aufrufen

map.addLayers([layer_mapnik, GPX-Variable, layer_markers]);

Damit ein Layer angezeigt wird, muss man ihn wie oben einbinden.

Marker einzeln einbinden

Muss noch erprobt werden, daher entweder selbst entwickeln oder per Umweg über neuen GPX-Layer.

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=DE:OSM_in_Website_für_Gemeinde/js&oldid=605686"