0

I need high-res map images for my application (solar power system design). Bing Maps in OL is good for finding the right building, but too low-res for laying out solar panels. So, I want to use a small high-res static map for doing the layout. Here's what I have currently. First load the Bing Maps layer:

    var layers = [];
    var baseBingMapLayer = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'XXXXX',
            imagerySet: 'AerialWithLabels',
        })
    });
    layers.push(baseBingMapLayer);

    var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
            center: [-13569845.9277,4485666.89612],
            zoom: 5,
        })
    });

Then when I want to load the static map, the strategy is to remove the Bing Maps layer and then add the static image layer. I'm doing the following:

                var extent = [0, 0, 1024, 768];
                var projection = new ol.proj.Projection({
                  code: 'xkcd-image',
                  units: 'pixels',
                  extent: extent
                });
                var staticURL =
                    "https://maps.googleapis.com/maps/api/staticmap"
                    + "?center=37.7431569802915,-121.4451930197085&"
                    + "zoom=20&size=1024x768&scale=2&zoom=3&"
                    + "format=jpg&maptype=satellite"
                    + "&key=XXX";

                map.removeLayer(baseBingMapLayer);
                var imageLayer = new ol.layer.Image({
                    source: new ol.source.ImageStatic({
                    url: staticURL,
                    imageSize: [1024,768],
                    projection: projection,
                    imageExtent: extent
                  })
                });
                var imageLayerView = new ol.View({
                    projection: projection,
                    center: ol.extent.getCenter(extent),
                    zoom: 2
                });
                map.addLayer(imageLayer);
                map.addView(imageLayerView);

Needless to say, this isn't working. I just get a blank screen with no exceptions thrown.

I actually had some success using jQuery to just empty the entire map div and start over with a new map object. However this seems to cause other problems and didn't seem like the right approach to me.

I'm going to continue working on this problem, but thought I would post since I'm sure I won't be the last person to try this little stunt :-)

Gary

MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
Gary Hethcoat
  • 31
  • 5
  • The extent is not the size of the image but the extent in real-world coordinates that the image is covering. For calculating this extent, this thread might help you: http://stackoverflow.com/questions/12507274/how-to-get-bounds-of-a-google-static-map – tsauerwein Jan 30 '15 at 08:00
  • Thanks @tsauerwein -- that code is indeed helpful, but I am still struggling with the problem of clearing the map and loading a StaticImage. I have also tried leaving the base map layer intact and loading an image as another layer, no luck there yet either. – Gary Hethcoat Feb 02 '15 at 19:39
  • Try to use `map.setView()` instead of `map.addView()`. – tsauerwein Feb 03 '15 at 08:40
  • Yes, good catch @tsauerwein, but unfortunately it doesn't help. Thanks for your time and help. I noticed that the example of ImageStatic from openlayers.org doesn't work without modification. You have to add the ImageSize parameter. – Gary Hethcoat Feb 04 '15 at 16:07

0 Answers0