none
Replace Bing Map Tiles with Open Street Map for V8 javascript API? RRS feed

  • Question

  • Bing (and Google) Maps have poor coverage for remote parts of Africa, where I am doing remote equipment remote monitoring. OSM has much better coverage.

    Is there a way to use OSM tiles with the V8 javscript api instead of the default Bing tiles? This can be done with the Google maps API, (and the Leaflet javascript library) but I prefer to use Bing for various reasons. Leaflet has limited support for SVG pushpins/markers for example.

    There was a much earlier thread here discussing it for Silverlight but I can't find anything since. 

    There are implications in the documentation that this might be done using configuration driven maps and I have made some attempts but without success.

    thanks, Tom

    Sunday, April 5, 2020 5:55 PM

All replies

  • Hi tkreyche,

    You should be able to layer any image you want in the Bing Maps control.  Have you tried something that has failed?

    I would expect that you can do something like this...https://www.bing.com/api/maps/sdk/mapcontrol/isdk/tilelayerquadkey

    Sincerely,

    IoTGirl

    Wednesday, April 8, 2020 7:18 PM
    Owner
  • Yes, I looked at that and other similar examples and wrote some test code without any luck. Here's my working code (that someone else wrote) to get OSM on Google maps...as you can see it's doable but not trivial since there are some magic numbers and formula. This does a tile replacement - not just an overlay. I believe Bing uses the same tile definitions.

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 46.852947, lng: -121.760424 },
                zoom: 10,
                mapTypeId: "OSM",
                mapTypeControl: false,
                streetViewControl: false
            });

            //Define OSM map type pointing at the OpenStreetMap tile server
            map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function (coord, zoom) {
                    // "Wrap" x (longitude) at 180th meridian properly
                    // NB: Don't touch coord.x: because coord param is by reference, and changing its x property breaks something in Google's lib
                    var tilesPerGlobe = 1 << zoom;
                    var x = coord.x % tilesPerGlobe;
                    if (x < 0) {
                        x = tilesPerGlobe + x;
                    }
                    // Wrap y (latitude) in a like manner if you want to enable vertical infinite scrolling
                    return "https://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
            }));
        }

    Wednesday, April 8, 2020 7:28 PM
  • Hi tkreyche,

    In your Bing Maps attempts are you are just replacing parts of the map or are you using a bounding box and just placing the tiles for a specific area? 

    Please note that OSM is very clear about their tile services usages and the code you show above may be an issue.  Please take a look at https://operations.osmfoundation.org/policies/tiles/ and ensure you are in compliance with their service.

    Being mindful of OSMs rules, please take a look at the following sample:

    https://www.bing.com/api/maps/sdk/mapcontrol/isdk/tilelayerpublicxyzoom

    The X/Y is placed into the URL such as this:

    uriConstructor: 'https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png

    Sincerely,

    IoTGirl




    Thursday, April 9, 2020 11:48 PM
    Owner