Moin 
Ich versuche ums verrecken (Entschuldigt die Wortwahl :)) OpenLayers mit einem PermaLink zu öffnen aber dass gleichzeiig auch mein GPX Track angezeigt wird.
Aber ich bekomms nicht hin. Sobald ich OL via PermaLink öffne, ist automatisch der Start-, Endmarker sowie die Route weg. Alle Overlays. Auch der für das Anzeigen von heruntergeladenen Tiles oder der Shading Layer. Hat jemand eine Idee dass die ganzen OverLays erhalten bleiben?
Code:
<html>
<head>
<title>OpenLayers</title>
<p>Um etwas direkt zu finden, geben sie das Gesuchte in die "Schnell Suche" TextBox ein und druecken sie "Enter"!</p>
<link rel="stylesheet" href="img_js_css/style.css" type="text/css" />
<style type="text/css">
.olImageLoadError {
background-image: url('img_js_css/img/missing-tile.png');
background-repeat: no-repeat;
}
</style>
<script src="img_js_css/OpenLayers.js"></script>
<script src="img_js_css/OpenStreetMap.js"></script>
<script type="text/javascript" src="img_js_css/searchbox.js"></script>
<script type="text/javascript" src="img_js_css/nominatim_translation_de.js"></script>
<script type="text/javascript">
[....] // Lange Dankensrede und Copyright Hinweise. Unteranderem Copyright Hinweise an Netzwolf (cc-by-sa wegen den Code Schnipseln), ein Danke an netzwolf, ein Danke an euch..........
//========================================================================================================================================
// Version Information anzeigen
// alert("OpenLayers (Version: " + OpenLayers.VERSION_NUMBER + ") configured and optimized for [...]");
//========================================================================================================================================
// Start Koordinaten für die Karte:
var lat=50.01;
var lon=10.99;
var zoom=3;
//========================================================================================================================================
//Komplexes Objekt vom Typ OpenLayers.Map:
var map;
//========================================================================================================================================
// Bing API Key:
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
//========================================================================================================================================
//Initalisieren von der Karte
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine({geodesic: true}),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0339,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
//========================================================================================================================================
// Umschalter einfügen
var switcherControl = new OpenLayers.Control.LayerSwitcher();
map.addControl(switcherControl);
switcherControl.maximizeControl();
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// "Search Box" hinzufügen
map.addControl (new OpenLayers.Control.SearchBox({
resultMinZoom: 19
}));
//========================================================================================================================================
// Mapnik (Normale Straßenkarte) Layer hinzufügen:
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Normal map");
map.addLayer(layerMapnik);
//========================================================================================================================================
// CycleMap (Fahrradkarte) hinzufügen:
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("Bicylce map");
map.addLayer(layerCycleMap);
//========================================================================================================================================
// Satelliten Ansicht hinzufügen:
// Ausgeklammert wegen Lizenztechnischen Unklarheiten!!! <<<<<<<<<<<<<
// var Satellite_View_Bing = new OpenLayers.Layer.Bing({
// name: "Satellite View",
// key: apiKey,
// type: "Aerial"
// });
// map.addLayer(Satellite_View_Bing);
//========================================================================================================================================
//Layer der die loakeln Tiles lädt
var OfflineMap = new OpenLayers.Layer.OSM("Use downloaded map data", "offline_map_data-tiles/${z}/${x}/${y}.png", {numZoomLevels: 20, alpha: true, isBaseLayer: false});
map.addLayer(OfflineMap);
// Ende des "Local Tile" Layer
//========================================================================================================================================
// Shading Layer generieren
OpenLayers.Layer.Shading = OpenLayers.Class (OpenLayers.Layer.XYZ, {
attribution: 'Elevation data by <a href="http://www2.jpl.nasa.gov/srtm/">NASA SRTM</a>',
displayOutsideMaxExtent: true,
isBaseLayer: false,
name: 'Show SRTM Data',
sphericalMercator: true,
transparent: true,
type: 'png',
url: 'http://toolserver.org/~cmarqu/hill/${z}/${x}/${y}.png',
visibility: true,
CLASS_NAME: 'OpenLayers.Layer.Shading'
});
// Shading Layer anzeigen
map.addLayer (new OpenLayers.Layer.Shading());
//========================================================================================================================================
// lonLat generieren
if( ! map.getCenter() ){
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
//========================================================================================================================================
//GPX Darstellung
// Layer mit Routenanzeige erstellen
var route = new OpenLayers.Layer.Vector("Show route", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "route/route.gpx",
format: new OpenLayers.Format.GPX()
}),
style: {strokeColor: "orangered", strokeWidth: 5, strokeOpacity: 1.0},
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(route);
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Layer für Startmarker hinzufügen:s
layerMarker_1 = new OpenLayers.Layer.Markers("Show route start point");
map.addLayer(layerMarker_1);
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Layer für Endmarker hinzufügen:
layerMarker_2 = new OpenLayers.Layer.Markers("Show route end point");
map.addLayer(layerMarker_2);
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Marker Start Point Einstellungen Anfang
var size_1 = new OpenLayers.Size(21, 25);
var offset_1 = new OpenLayers.Pixel(-(size_1.w/2), -size_1.h);
var icon_1 = new OpenLayers.Icon('img_js_css/img/marker-green.png',size_1,offset_1);
// Marker Start Point Einstellungen Ende
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Als Position des ersten Markers, den Startpunkt der Route angeben:
route.events.register("loadend", route, function() {
this.map.zoomToExtent(this.getDataExtent());
var startPoint = this.features[0].geometry.components[0];
layerMarker_1.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon_1));
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Marker End Point Einstellungen Anfang
var size_2 = new OpenLayers.Size(21, 25);
var offset_2 = new OpenLayers.Pixel(-(size_2.w/2), -size_2.h);
var icon_2 = new OpenLayers.Icon('img_js_css/img/marker-red.png',size_2,offset_2);
// Marker End Point Einstellungen Ende
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Als Position des zweiten Markers, den Endpunkt der Route angeben:
var components = this.features[this.features.length-1].geometry.components;
var endPoint = components[components.length-1];
layerMarker_2.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(endPoint.x, endPoint.y),icon_2))
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
//========================================================================================================================================
});
}
}
</script>
<style type="text/css">
/************************************************
*
* Gestaltung der Searchbox
*
*************************************************/
.olControlSearchBox {
left: 120px;
top: 2px;
}
.olControlSearchBox div.busy {
background: url(/j/ajax-loader.gif);
height: 55px;
width: 54px;
}
.olControlSearchBox div.failure {
background: red;
color: black;
font-weight: bold;
}
.olControlSearchBox div.success {
background: white;
}
.olControlSearchBox div.success.empty {
color: gray;
font-style: italic;
}
.olControlSearchBox div.success div.entry:hover {
background: blue;
color: white;
cursor: pointer;
}
</style>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>
Viele Grüße
Euer SuperSchnitzel1806
PS: Das ist der Grundcode, ohne meine Fehlversuche.
PPS: Das Problem liegt halt darin dass die Software die ich entwickel, bei einem Fehler mglw. OL neu laden muss. Aber halt dann an einer bestimmten Koordinate. Deswegen brauch ich ganz drigend diese PermaLink Unterstützung.
