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

      });
| improve this question | |
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);
| improve this answer | |
  • sorry i copied wrong the code i have center in my code, but still doesn't work , i removed transform – Geographic Jun 4 '13 at 13:41
  • it seems like bingmap doesn't accept the setCenter ... – Geographic Jun 4 '13 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 '13 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

| improve this answer | |
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,

| improve this answer | |
  • 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 '13 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 '13 at 14:52
  • no i don't have any error with chrome console – Geographic Jun 4 '13 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 '13 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 '13 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.