Bedienelemente außerhalb der Karte möglich?

Hi,

mit Hilfe einiger User, habe ich vor längerer Zeit meine openstreetmap Karte zusammengebastelt. Das Verzeichnis “openlayers” habe ich dabei auf meiner Domain gespeichert (keine Ahnung welche Version!).

Nun würde ich gerne eigene einfache Buttons für Zoom (plus und Minus) sowie für die Bewegung (hoch, runter, links, rechts) unter die Karte legen. Ich habe gehört, dass dies funktionieren soll. Aber ich habe keine Ahnung, wie ich das einbauen könnte. Auch konnte ich im Internet keine passenden Beispiele finden. Könnt Ihr mir helfen? Hier mein Quellcode:


<?php
$lat=52.520008;
$lon=13.404954;
?>

<style type="text/css">.olControlAttribution { bottom: 3px!important; }</style>
<script src="OpenLayers/OpenLayers.js">
</script><script src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
</script>
<div id="map" style="width:750px;height:510px;"></div>
<script type="text/javascript" src="OpenLayers/OpenLayers_Map_minZoom_maxZoom_Patch.js"></script>
<script type="text/javascript" src="OpenLayers/popupmarker.js"></script>
<script type="text/javascript" src="OpenLayers/vector_circuli.js"></script>
<script type="text/javascript">

var map;
function showMap()
{
map = new OpenLayers.Map("map",
{
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
units: "m",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [],
minZoom:12,
maxZoom:18
});

map.addControl (new OpenLayers.Control.Attribution());
map.addControl (new OpenLayers.Control.Navigation());
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
    map.addLayer (new OpenLayers.Layer.Circuli ("Radius", {
        circles: [
            {lat: <?php echo $lat; ?>, lon: <?php echo $lon; ?>, radius: 750, fillColor: 'red', strokeColor: 'null', fillOpacity: 0.20}
        ]}));
map.addLayers([layerMapnik]);
map.setCenter(new OpenLayers.LonLat(<?php echo $lon; ?>,<?php echo $lat; ?>).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 14);
marker.events.register("mousedown", marker, function(evt)
{
OpenLayers.Event.stop(evt);
}
);
map.layers[map.layers.length-1];
}
showMap();
</script>

Danke im voraus für Eure Hilfe :slight_smile:

Das Design ist noch ausbaufähig, aber so ungefähr könnts gehen

<span onclick="map.moveByPx(-100,0)">Links</span>
<span onclick="map.moveByPx( 100,0)">Rechts</span>
<span onclick="map.moveByPx( 0,-100)">Oben</span>
<span onclick="map.moveByPx( 0, 100)">Unten</span>
<span onclick="map.setCenter(map.getCenter(),map.getZoom()+1)">Reinzoom</span>
<span onclick="map.setCenter(map.getCenter(),map.getZoom()-1)">Rauszoom</span>

Grüße
Max

Klasse. Endlich eine Lösung die funktioniert. Vielen Dank :slight_smile: :slight_smile: :slight_smile: