0

I am trying to use Bing maps on my HTML page using OpenLayers and geoEXT. the problem is when I change the center of the Bing map nothing happens, also when I try to zoom on the map on certain point like this:

Bing.setCenter(new OpenLayers.LonLat(rec.get('x'),rec.get('y')).transform('EPSG:4326','EPSG:26191'), 9);

It doesn't zoom on this point with the x and y, all I get is the zoom with degree 9.

Here's the code:

var Bing;
var apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
 Bing = new OpenLayers.Map("map");          
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    var road = new OpenLayers.Layer.Bing({
            name: "Road",
            key: apiKey,
            type: "Road"
        });
        var hybrid = new OpenLayers.Layer.Bing({
            name: "Hybrid",
            key: apiKey,
            type: "AerialWithLabels"
        });
        var aerial = new OpenLayers.Layer.Bing({
            name: "Aerial",
            key: apiKey,
            type: "Aerial"
        });
        Bing.addLayers([road, hybrid, aerial]);
        var center = new OpenLayers.LonLat(-93.27, 44.98).transform(
            'EPSG:4326', 'EPSG:3857'
        );      
        Bing.setCenter(new OpenLayers.LonLat(-110, 45), 3);

 bingpanel =  new GeoExt.MapPanel({
          region:"center",
          height: 400,
          width: 600,
          map: Bing

      });

3 Answers 3

1

The "center" variable is never used in your example:

var center = new OpenLayers.LonLat(-93.27, 44.98).transform(
            'EPSG:4326', 'EPSG:3857'
        );

Also, Bing maps take position in decimal degrees so try removing the transform from

Bing.setCenter(new OpenLayers.LonLat(rec.get('x'),rec.get('y')).transform('EPSG:4326','EPSG:26191'), 9);
3
  • sorry i copied wrong the code i have center in my code, but still doesn't work , i removed transform
    – Geographic
    Jun 4, 2013 at 13:41
  • it seems like bingmap doesn't accept the setCenter ...
    – Geographic
    Jun 4, 2013 at 13:48
  • Bing.setCenter(new OpenLayers.LonLat(-110, 45), 3); does not work, because the coordinates are not transformed to EPSG:3857. Try Bing.setCenter(center, 3); because the var center is already transformed.
    – AndreJ
    Jun 4, 2013 at 14:34
1

setCenter doesn't exists in Bing, use setView instead.

You can check methods and events in the microsoft reference webpage for the Map Class here: http://msdn.microsoft.com/en-us/library/gg427609.aspx

You can find properties for ViewOption objects here: http://msdn.microsoft.com/en-us/library/gg427628.aspx

2
0

I think you need to test a simple example first, something like this:

<!DOCTYPE HTML>
<html>
  <head>
    <title>OpenLayers Demo</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>
    <script src="OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
        var bingRoad = new OpenLayers.Layer.Bing(
          {
            name: "Road",
            key: apiKey,
            type: "Road"
          }
        );
        //var mapnik         = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:3857"); // to Spherical Mercator Projection
        //var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position       = new OpenLayers.LonLat(-93.27,44.98).transform( fromProjection, toProjection);
        var zoom           = 3; 

        map.addLayer(bingRoad);
        map.setCenter(position, zoom );
      }
    </script>
  </head>
  <body onload="init();">
    <div id="basicMap"></div>
  </body>
</html>

once that worked, you can adjust that to include GeoExt. If you want to center or zoom into a specific position, you need to do it in the map call (ie., map = new OpenLayers.Map("basicMap");) rather than in the Bing layer. AFAIK that should work in that way.

Hope this helps,

8
  • i try this, but i still have the same problem, i tried to change the longitude and the latitude i get the same view , it seems that bings didn't take changes, do u have any idea about this problem?
    – Geographic
    Jun 4, 2013 at 14:49
  • uhmmm no really, and do you get any error messages? have you tried Firebug to see if some errors appear?
    – Gery
    Jun 4, 2013 at 14:52
  • no i don't have any error with chrome console
    – Geographic
    Jun 4, 2013 at 15:33
  • i think i know the source of the error is that i have cartesian coordinate that i transform to lon lat, do i have to transform xy to lon/lat and then do the transform????
    – Geographic
    Jun 4, 2013 at 15:39
  • 1
    I think that transforms longitude/latitude (ie, EPSG:4326) to utm values (ie., EPSG:26191). So, you would need: OpenLayers.LonLat(rec.get('x'),rec.get('y')).transform('EPSG:26191','EPSG:4326')‌​, 9); to convert from UTM to long/lat, is that what you need?
    – Gery
    Jun 4, 2013 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.