x

Use static image as map with correct position

  1. Use static image as map with correct position · phk2k2 (Gast) · 10.06.2009 22:08 · [flux]

    Hello,

    I have a problem using image as a map with a correct geographic coordinate.
    I am working on a project in my university, in which I must display the ground plan of my university.

    the image file I use here is: GrundrissSW1_resized2.png
    Size: 3237 x 5000 pixels

    I can get it displayed on the map only begin with coordiate (0,0) (OpenLayers.Bounds(0,0,0.00032,0.00050))
    but not with the correct geographic coordinate (it should be OpenLayers.Bounds(9.96822, 53.46276, 9.96854, 53.46326);)

    Can you please take a look at my code below.
    I am very confused. Please help me!

    Thanks you very much

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Groundplan test</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../style.css"/>
    <style type="text/css">
    p.caption {
    width: 512px;
    }
    </style>
    <script src="../OpenLayers.js"></script>
    <script src="../OpenStreetMap.js"></script>
    <script type="text/javascript">

    function init(){
    // avoid pink tiles
    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
    OpenLayers.Util.onImageLoadErrorColor = "transparent";

    //option property of the map
    var options = {
    projection : "EPSG:900913",
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    controls: [new OpenLayers.Control.MouseDefaults(),
    new OpenLayers.Control.LayerSwitcher(),
    new OpenLayers.Control.PanZoomBar(),
    new OpenLayers.Control.MousePosition()
    ],
    };

    //Create map
    var map = new OpenLayers.Map('map', options);

    var layerMapnik = new
    OpenLayers.Layer.OSM.Mapnik("Mapnik");
    map.addLayer(layerMapnik);

    var proj = new OpenLayers.Projection("EPSG:4326");

    //var bounds = new OpenLayers.Bounds(9.96822, 53.46276, 9.96854, 53.46326); Dont know, why it doesnt work
    var bounds = new OpenLayers.Bounds(0,0,0.00032,0.00050);
    bounds.transform(proj, map.getProjectionObject());

    var options2 = {
    projection : "EPSG:900913"
    };
    var groundplan = new OpenLayers.Layer.Image(
    'ground plan',
    'GrundrissSW1_resized2.png',
    bounds,
    new OpenLayers.Size(323,500),
    options2);
    map.addLayer(groundplan);
    map.zoomToMaxExtent();
    //var point = new OpenLayers.LonLat(9.96822, 53.46276);
    var point = new OpenLayers.LonLat(0,0);
    point.transform(proj, map.getProjectionObject());
    map.setCenter(point,18);
    }
    </script>
    </head>
    <body onload="init()">
    <h1 id="title">Groundplan test</h1>

    <div id="tags"></div>

    <p id="shortdesc">
    Groundplan test.
    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs">
    <p class="caption">

    </p>
    </div>
    </body>
    </html>