x

OpenLayers und der verschobene Copyrightvermerk - Hilfe

Geschrieben von KL7000F (Gast) am 05. Januar 2014 01:07:00: [flux]

Hallo,

ich arbeite derzeit an einer relativ "einfachen" Art, eine GPX-Datei auf OpenStreetMap zu bekommen. Verwendung findet dies in einer eigenen Android-App als "Vorschau" für Tracks/Waypoints.
An sich funktioniert dies super, dennoch wird der schöne Vermerkt "(C) OpenStreetMap contributors" ein wenig verschoben angezeigt (siehe Screenshot). Gleiches Problem innerhalb der App und auch am PC (Firefox).
Der Vermerk ist (normalerweise) am unteren Rand. Bei mir ist er ca. 2cm nach Oben verschoben. Ich kann mir leider nicht erklären an was es liegt. Die *.js beziehe ich direkt vom Server. Habe ich dieselbe Datei lokal gespeichert, ist der Vermerk am oberen Rand, darunter befindet sich dann der "Schalter" für die Attribution (der mit dem "+", wenn ich das jetzt richtig Beschreibe).


Den Quellcode für die HTML-Datei (bzw. JavaScript) habe ich aus der Wiki und entsprechend angepasst (Übergabe des Dateinamen für GPX-Dateien: ?file=dateiname.gpx):

<html>
<head>
<!--␣Source:␣http://wiki.openstreetmap.org/wiki/Openlayers_Track_example␣-->
<title></title>
<!--␣␣OpenLayers␣javascript␣library
Wir␣binden␣die␣␣Bibliothek␣direkt␣aus␣dem␣Internet␣ein,
die␣Datei␣kann␣bei␣Bedarf␣aber␣auch␣lokal␣abgespeichert␣werden)
-->
<script␣src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!--␣OpenStreetMap␣OpenLayers␣layers.
Diese␣Datei␣bevorzugt␣aus␣dem␣Internet␣laden␣um␣sie␣aktuell␣zu␣halten
-->
<script␣src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script␣type="text/javascript">
//Dateipfad␣übergeben␣Anfang
function␣Werteliste␣(querystring)␣{
if␣(querystring␣==␣'')␣return;
var␣wertestring␣=␣querystring.slice(1);
var␣paare␣=␣wertestring.split("&");
var␣paar,␣name,␣wert;

for␣(var␣i␣=␣0;␣i␣<␣paare.length;␣i++)␣{
paar␣=␣paare[i].split("=");
name␣=␣paar[0];
wert␣=␣paar[1];
name␣=␣unescape(name).replace("+",␣"␣");
wert␣=␣unescape(wert).replace("+",␣"␣");
this[name]␣=␣wert;
}
}
var␣liste␣=␣new␣Werteliste(location.search);

for␣(var␣eigenschaft␣in␣liste)␣{
var␣dateipfad␣=␣liste[eigenschaft]
}
//Dateipfad␣übergeben␣Ende

var␣map;␣//complex␣object␣of␣type␣OpenLayers.Map

function␣init()␣{
map␣=␣new␣OpenLayers.Map␣("map",␣{
controls:[
new␣OpenLayers.Control.Navigation(),
new␣OpenLayers.Control.PanZoomBar(),
new␣OpenLayers.Control.LayerSwitcher(),
new␣OpenLayers.Control.Attribution()],
maxExtent:␣"auto",␣//new␣OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution:␣"auto",␣//␣156543.0399,
minExtent:␣"auto",
minResolution:␣"auto",
numZoomLevels:␣16,
units:␣'m',
projection:␣new␣OpenLayers.Projection("EPSG:900913"),
displayProjection:␣new␣OpenLayers.Projection("EPSG:4326")

}␣);

//␣Define␣the␣map␣layer
//␣Here␣we␣use␣a␣predefined␣layer␣that␣will␣be␣kept␣up␣to␣date␣with␣URL␣changes
layerMapnik␣=␣new␣OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerCycleMap␣=␣new␣OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers␣=␣new␣OpenLayers.Layer.Markers("Marker");
map.addLayer(layerMarkers);

//␣*********************************************************************
//␣Block␣"Layer␣mit␣GPX-Track"␣-␣Start
var␣GPXVariable_1␣=␣new␣OpenLayers.Layer.Vector("Schlauchstrecke",␣{
strategies:␣[new␣OpenLayers.Strategy.Fixed()],
protocol:␣new␣OpenLayers.Protocol.HTTP({
url:␣dateipfad,␣//␣"test.gpx"
format:␣new␣OpenLayers.Format.GPX,
formatOptions:␣{
extractAttributes:␣true,
extractStyles:␣false,
extractTracks:␣true,
extractRoutes:␣true,
extractWaypoints:␣true
},
}),
style:␣{strokeColor:␣"blue",␣strokeWidth:␣5,␣strokeOpacity:␣0.5},
projection:␣new␣OpenLayers.Projection("EPSG:4326")
});
map.addLayer(GPXVariable_1);

GPXVariable_1.events.register("loadend",␣GPXVariable_1,
function()␣{
var␣indx␣=␣0;
var␣len␣=␣this.features.length;
for(i␣=␣false␣;␣indx␣<␣len;␣)␣{
if␣(!OpenLayers.String.contains(this.features[indx].geometry.id,"LineString"))
break;
indx++;
}
var␣layerMarkers␣=␣new␣OpenLayers.Layer.Markers("Pumpenstandorte");
map.addLayer(layerMarkers);
var␣bounds␣=␣this.getDataExtent();
lonLat␣=␣bounds.getCenterLonLat();
//␣mark␣the␣center
map.setCenter(lonLat);
//␣fit␣zoom␣to␣bounds␣if␣desired
map.zoomToExtent(bounds);

var␣size␣=␣new␣OpenLayers.Size(21,␣25);
var␣offset␣=␣new␣OpenLayers.Pixel(-(size.w␣/␣2),␣-size.h);

if␣(indx␣<␣len)␣{
icon␣=␣new␣OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',␣size,␣offset);
for(␣;␣indx␣<␣len;␣indx++␣)␣{
//␣create␣a␣marker␣for␣each␣waypoint
var␣title␣=␣this.features[indx].attributes.name;
var␣hoehe␣=␣this.features[indx].attributes.ele;
var␣zeit␣=␣this.features[indx].attributes.time;
var␣popupContentHTML␣=␣'<p><font␣face="Arial"␣size="-1"><ul><li>Punkt:␣'+title+'</li><li>H&ouml;he:␣'+hoehe+'</li><li>Zeit:␣'+zeit+'</li></ul></font></p>';
var␣punkt␣=␣this.features[indx].geometry.bounds.getCenterLonLat().clone();
feature␣=␣new␣OpenLayers.Feature(layerMarkers,␣punkt);
feature.closeBox␣=␣true;
feature.data.icon␣=␣icon.clone();
feature.data.overflow␣=␣"hidden";
feature.data.popupContentHTML␣=␣popupContentHTML;
feature.popupClass␣=␣OpenLayers.Class(OpenLayers.Popup.FramedCloud,␣{minSize:␣new␣OpenLayers.Size(200,␣120)␣}␣);
feature.popup␣=␣null;
marker␣=␣feature.createMarker();
marker.events.register("mousedown",␣feature,␣onMarkerMouseDown);
layerMarkers.addMarker(marker);
}
}
});
//␣Block␣"Layer␣mit␣GPX-Track"␣-␣Ende
//␣*********************************************************************

}

function␣onMarkerMouseDown(evt)␣{
if␣(this.popup)␣{
this.popup.toggle();
}
else␣{
//␣new␣popup␣is␣to␣be␣generated
var␣popup␣=␣this.createPopup(this.closeBox);
popup.events.register("mousedown",␣this,␣onPopupMouseDown);
this.layer.map.addPopup(this.popup);
this.popup␣=␣popup;
lastSelectedPopup␣=␣popup;
}
OpenLayers.Event.stop(evt);
}

function␣onPopupMouseDown(evt)␣{
this.popup.toggle();
OpenLayers.Event.stop(evt);
};

function␣displayAfterZoom(evt)␣{
OpenLayers.Event.stop(evt);
}
</script>
</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>

Leider konnte ich, nach langer Suche bei Google, keine Lösung finden. Bzw. Lösungsansätze (eigenen Layer mit Erweiterung des Copyrights) sind leider gescheitert, da diese an der selben Stelle erschienen. Hat jemand einen Tipp oder Rat?

Vielen Dank
Gruß
Andy

Antworten: