Overlay der Streetmap auf Website beschränken/ bearbeiten

Hallo Leute,
da mir schon einmal in diesem Forum freundlichst weitergeholfen wurde, hatte ich gehofft ihr könntet mir einen weiteren Tipp geben.

Stand der Dinge:
Ich habe erfolgreich eine OpenStreetMap auf meine eigene Webseite eingebunden und auf einen Ort/Position zentriert.

Ziel:
Ich möchte das Overlay bearbeiten. Man soll bei der Nutzung des Overlays maximal 2 Clicks in alle Richtungen navigieren können.
Weiterhin soll der Zoom mindestens auf 15 und maximal auf 20 gestellt werden.

Ist einer dieser Parameter erreicht, so soll das Overlay nicht weiter angezeigt werden, bzw die entsprechenden Optionen ausgeblendet werden.

Gibt es hierfür entsprechende Möglichkeiten?

Ich denke das ganze wird sich höchstwahrscheinlich auf JavaScript beschränken…vielleicht noch auf HTML.

Mit freundlichen Grüßen,
Triceps

Bei Leaflet mittels minZoom und maxZoom, z.B. “new L.TileLayer(osmUrl, {minZoom: 15, maxZoom: 20,”

Verwendest Du openLayers oder Leaflet?

Grüße
Andreas

und mit Sicherheit auf die verwendete Bibliothek …

Für das “wegnavigieren” gibts bei leaflet maxBounds:

var corner1 = L.latLng(40.712, -74.227),
corner2 = L.latLng(40.774, -74.125),
bounds = L.latLngBounds(corner1, corner2);
map.setMaxBounds(bounds);

Hallo Leute!
Vielen Dank für die vielen Antworten!
Ist wirklich sehr hilfreich!

Hier ein kleiner Ausschnitt aus meinem Source Code:

function drawmap() {
// Popup und Popuptext mit evtl. Grafik
// var popuptext=“<font color="black">Thomas Heiles
Straße 123
54290 Trier

<img src="test.jpg" width="180" height="113">

”;

OpenLayers.Lang.setCode('de');

// Position und Zoomstufe der Karte
var lon = 9.9387;
var lat = 49.7684;
var zoom = 15;

map = new OpenLayers.Map('map', {
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.PanZoomBar()],
    maxExtent:
        new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                20037508.34, 20037508.34),
    numZoomLevels: 18,
    maxResolution: 156543,
    units: 'meters'
});

Ich bin leider neu was das arbeiten mit OSM betrifft. Wir behandeln es im Rahmen eines Schulprojekts.
Ich denke min max Zoom könnte durchaus hilfreich sein! Das versuche ich direkt einzubinden!

Aber wie das mit dem Navigieren von links nach rechts eingeschränkt werden soll habe ich leider noch nicht ganz verstanden!
Dem Code zu entnehmen arbeite ich wohl mit openlayers :wink:

Koordinaten und Zoom Einstellung/
var lat = 47.00;
var lon = 13.41;
var zoom = 7;
var minZoom = 7;
var maxZoom = 13;
//Eingrenzung auf ein Land
var leftBottom = new OpenLayers.LonLat(9,46) // Center of the map
.transform(
new OpenLayers.Projection(“EPSG:4326”), // transform from WGS 1984
new OpenLayers.Projection(“EPSG:900913”) // to Spherical Mercator Projection
)
var rightTop = new OpenLayers.LonLat(17,49) // Center of the map
.transform(
new OpenLayers.Projection(“EPSG:4326”), // transform from WGS 1984
new OpenLayers.Projection(“EPSG:900913”) // to Spherical Mercator Projection
)
var options = {
restrictedExtent: extent
}
var extent = new OpenLayers.Bounds(leftBottom.lon, leftBottom.lat, rightTop.lon, rightTop.lat);
/Karte initialisieren/
map = new OpenLayers.Map(“basicMap”);
map.minZoomLevel = minZoom;
map.maxZoomLevel = maxZoom;
map.restrictedExtent = extent;
/Layer mit den selbst gerenderten Kacheln/
var newLayer = new OpenLayers.Layer.OSM(“New Layer”, “/tiles/${z}/${x}/${y}.png”);
map.addLayer(newLayer);

/*Die POIs auf der Karte platzieren*/
var pois = new OpenLayers.Layer.SkiresortMarker( "My Points",
        { location:"/extensions/poi/oesterreich.txt",
          projection: map.displayProjection
        });
map.addLayer(pois);
//map.restrictedExtent = new OpenLayers.Bounds(9.4, 46.35, 17.33, 49.03);
//map.addControl(new OpenLayers.Control.LayerSwitcher());
/*Karte zentrieren und transformieren*/
map.setCenter(new OpenLayers.LonLat(lon,lat) // Center of the map
.transform(
  new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
  new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
), zoom // Initialier Zoom level

);

hab den Code jetzt gefunden! Aber verstehe noch nicht ganz wie ich die einzelnen Bordergrenzen für Würzburg herausfinden soll.
Was ist mit Projection gemeint?
Den Code mit var= x
minZoom, maxZoom verstehe ich noch.
Frage mich allerdings ob er in die JS Datei kommt oder in die HTML

Vielen Dank für die schnelle und gute Hilfestellung!
LG Triceps

Ich würde weiterhin empfehlen, mal Leaflet statt OpenLayers auszuprobieren, da braucht man sich z.B. nicht mit Projektionen rumschlagen. Zudem ist die von dir verwendete OpenLayers Version ziemlich veraltet, damit fängt man besser kein neues Projekt mehr an.

Siehe meine Beiträge #15 und #14 im vorigen Faden.