Add new Tile Layer to the Tile Layer Map Control (to add Openstreetmap) RRS feed

  • Question

  • With the 'tile layer map control', you can choose Road, Aerial etc. I'd like to add openstreetmap, so you can swap between looking at a (ordnance survey, a Bing Maps standard tile layer in the UK) tile layer and an openstreetmap tile layer.  Adding a openstreetmap tile layer looks straight forward from the example, but how do I add "openstreetmap" to the "tile layer map control", so I can swap between the them. The examples only show adding an "xyz" tile layer, they don't show adding it to the map control. Thanks. Andrew.
    Sunday, June 14, 2020 10:00 AM


All replies

  • Hi Andrew,

    The V8 navigation bar does not offer the ability to add custom items but you can build your own.  There is a simple sample at https://bingmapsv8samples.azurewebsites.net/#Custom%20Navigation%20Bar with a link to a GitHub with the sample code.



    • Marked as answer by aavmurphy Tuesday, June 16, 2020 7:59 AM
    Sunday, June 14, 2020 9:03 PM
  • Thanks @IoTgirl,

    Checked the code sample, almost look too easy :) I'll give it a go.

    Would it be possible to make "add/remove from the v8 navigation bar" a new feature request.  

    Tuesday, June 16, 2020 8:03 AM
  • Hi Andrew,

    Sadly, that control is not customizable "by design" as it is used in commercial product experiences.  Glad you are able to run with the sample and build your own though!



    Tuesday, June 16, 2020 5:56 PM
  • Some notes on implementation.

    1. It works by adding a new tile layer over the background tile layer - you can't edit the list of base layers, and add your own "maptypeid". So this layer will overlay the base layer.

    2. Toggle it on/off by using a custom control (an html <div>) containing a button to set the layer's visibility to true/false. See IoTgirl's link above for the html

    3. Really, should use the button for  'on', and listen for maptype change event, and use that  for 'off'

    // not the same as leafletjs
    // {zoom} and not {tilesource} as its 1,2,3 not a,b,c
    tile_source_osm     = new Microsoft.Maps.TileSource({ uriConstructor: 'https://b.tile.opentopomap.org/{zoom}/{x}/{y}.png' });
    // not a base layer, a layer over it, so hide it until we need it
    tile_layer_osm     = new Microsoft.Maps.TileLayer( { 
      mercator: tile_source_osm, visible:false } );
    map.layers.insert( tile_layer_osm );
    jQuery( '#the_button' ).on( 'click', () => {
            console.info( 'ON CLICK: toggle osm visibility' );
            is_visible =  tile_layer_osm.getVisible();
            tile_layer_osm.setVisible( ! is_visible );
            } );
    +1 to the bing maps team for having {bbox} as a uri constructor option

    • Edited by aavmurphy Thursday, June 18, 2020 9:16 PM spelling
    Thursday, June 18, 2020 9:08 PM
  • using a map type change event, tile_layer_osm created in the previous comment :) 

    // switch off
        (e) => {
            console.info( 'EVENT: MAP TYPE CHANGE: hide osm' );
            tile_layer_osm.setVisible( false );
    // switch on
    jQuery( '#the_button' ).on( 'click', () => {
        console.info( 'EVENT: OSM BTN CLICK: show osm' );
        tile_layer_osm.setVisible( true );
        } );

    • Edited by aavmurphy Friday, June 19, 2020 2:23 PM depersonalise example
    Friday, June 19, 2020 11:27 AM
  • Hi Andrew,

    Thanks for the follow up!  



    Wednesday, June 24, 2020 3:50 PM