OpenLayers Bing OSM

Bing aerial imagery and OpenStreetMap presented as basic layers within OpenLayers. Bing requires an API key.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers Bing OSM example</title>

<script src="../../openlayers/OpenLayers.js"></script>

var map;

function init() {
    var epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection

map = new OpenLayers.Map({
        div: "map",
        displayProjection: epsg4326
    });

map.addControls([new OpenLayers.Control.LayerSwitcher(),
                     new OpenLayers.Control.ScaleLine()]);

var bingAerialLayer = new OpenLayers.Layer.Bing({
        name: "bing Aerial",
        key: bingAPIKey,
        type: "Aerial",
        visibility: true,
        protocol: 'https:'
    });

var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap",
                                           ["https://a.tile.openstreetmap.org/${z}/${x}/${y}.png", 
                                            "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
                                            "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"],
                                            {attribution: "&copy; <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> and contributors, under an <a href='http://www.openstreetmap.org/copyright' title='ODbL'>open license</a>",
                                            "tileOptions": { "crossOriginKeyword": null }});

map.addLayers([bingAerialLayer, osmLayer]);

var latLon = new OpenLayers.LonLat(-0.1279688, 51.5077286)
                   .transform(epsg4326, map.getProjectionObject());

if (!map.getCenter()) map.setCenter(latLon, 14 );
}
</script>

</head>
  <body onload="init()">
    <div id="map"></div>
    
  </body>
</html>

Home
Blog
About
Maps
Other
Contact

Harry Wood

OpenLayers Bing OSM