Talk:Abenteuer&Allrad

From OpenStreetMap Wiki
Jump to: navigation, search

Kartendarstellung Messegelaende

OpenLayers: Abhaengig von der Zoomstufe, moechte ich unterschiedliche Basemaps darstellen. Ich haette gerne eine kleinere Zoomstufe (Zoom=19), in der ein Image geladen wird.

Mein Stand (dank TEL0000 von der öpnv-Karte abgekupfert). Funktioniert, Verbesserungsvorschlaege nehme ich gerne an:


<html>
<head>
  <title>OpenLayers Example</title>
    <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <script type="text/javascript">
      var lat=50.19003;
      var lon=10.12326;
      var zoom=18;
      var map;
      var layerImage;
      var layerMapnik;
      var layerTilesAtHome;

      // avoid pink tiles
      OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
      OpenLayers.Util.onImageLoadErrorColor = "transparent";

    function mapEvent(event) {
      if(map.zoom>17){
        map.setBaseLayer(layerImage);
      }else{
        map.setBaseLayer(layerTilesAtHome);
      }
    }

      function init() {
        map = new OpenLayers.Map("map", {
          projection: new OpenLayers.Projection("EPSG:900913"),
          displayProjection: new OpenLayers.Projection("EPSG:4326"),
          units: "m",
          numZoomLevels: 19,
          maxResolution: 156543.0339,
          maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
          eventListeners: {zoomend: mapEvent},
          controls: [
            new OpenLayers.Control.ArgParser(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Navigation(),
            // Quellenangabe
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.Permalink('permalink'),
            new OpenLayers.Control.ScaleLine(),
            new OpenLayers.Control.MousePosition(),
            //Pan oder Zoom
            // new OpenLayers.Control.NavToolbar()
          ]
        });

         layerImage = new OpenLayers.Layer.Image(
            'Zoom',
            'badkissingen.png',
            new OpenLayers.Bounds(10.12005, 50.18878, 10.12612, 50.19129).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
            new OpenLayers.Size(800, 600),
            {
              resolutions: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
              numZoomLevels: 19,
              attribution: "by kannix"
            }
        );


        layerMapnik = new OpenLayers.Layer.OSM.Mapnik(
            "Mapnik",
            {
              numZoomLevels: 19
            }
        );

        layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender(
            "Osmarender",
            {
              numZoomLevels: 19
            }
         );

        map.addLayers([layerImage, layerTilesAtHome, layerMapnik]);

        // set default position
        var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        map.setCenter (lonLat, zoom);


      }
    </script>
    </head>
    <body onload="init()">
      <div style="width: 800px; height: 600px; border: 1px solid black; padding:0px; margin:0px;" id="map"></div>

      <script type="text/javascript"><!--
      document.write(lonLat)
      //--></script>
    </body>
</html>

--kannix 2009-03-31