none
How to add an input control to Bing Maps V8? RRS feed

  • Question

  • Hi all,

    I am migrating over from leaflet.js to using the native V8 control and I am attempting to add a search box on top of the V8 map. So far I have had no luck.  I am not looking to have the search box outside of the map control which was the only example I saw on the interactive sdk.

    Ultimately I'm looking for something similar to this:

    www.ryanfrenchdev.com

    I have tried the following approach which only resulted in a runtime error.

            var input = document.createElement("input");
            input.type = "text";
            input.id = "searchtext";
            map.addControl(input);

    Also does Bing Maps have anything similar to ant path on leaflet? https://github.com/rubenspgcavalcante/leaflet-ant-path

    Thanks!

    Ryan

    Tuesday, March 27, 2018 9:29 PM

Answers

  • <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'>
        var map, contextMenu;
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                //Hide the default navigation bar.
                showDashboard: false 
            });
        }
        </script>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
        <style>
            .mapContainer, #myMap{
                ;
                width:600px;
                height:400px;
            }
            .customNavBar {
                ;
                top: 10px;
                left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="mapContainer">
            <div id="myMap" style=";width:800px;height:600px;"></div>
    
            <div class="customNavBar">
                <input type="button" value="Road" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.road});"/>
                <input type="button" value="Aerial" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.aerial});" />
                <input type="button" value="Canvas Light" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.canvasLight});" />
                <input type="button" value="Canvas Dark" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.canvasDark});" />
                <input type="button" value="Grayscale" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.grayscale});" />
            </div>
        </div>
    
        <fieldset style="width:800px;margin-top:10px;">
            <legend>Custom Navigation Bar Sample</legend>
            This sample shows how to create a custom navigation bar by hiding the default navigation bar and floating custom navigation controls over the map.
        </fieldset>
    </body>
    </html>

    You can use to position it over top of the map. Take a look at the sample code I provided above.

    
    

    Also there isn't anything similar to the ant path from leaflet. Can you provide me with more context as to what you are trying to accomplish? Maybe the Bing Maps Snap to Road API could be of use to you. You can read more about it here:

    https://www.microsoft.com/en-us/maps/snap-to-road

    https://msdn.microsoft.com/en-us/library/mt814926.aspx?f=255&MSPPError=-2147217396



    Wednesday, March 28, 2018 12:10 AM
    Moderator

All replies

  • <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'>
        var map, contextMenu;
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                //Hide the default navigation bar.
                showDashboard: false 
            });
        }
        </script>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
        <style>
            .mapContainer, #myMap{
                ;
                width:600px;
                height:400px;
            }
            .customNavBar {
                ;
                top: 10px;
                left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="mapContainer">
            <div id="myMap" style=";width:800px;height:600px;"></div>
    
            <div class="customNavBar">
                <input type="button" value="Road" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.road});"/>
                <input type="button" value="Aerial" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.aerial});" />
                <input type="button" value="Canvas Light" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.canvasLight});" />
                <input type="button" value="Canvas Dark" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.canvasDark});" />
                <input type="button" value="Grayscale" onclick="map.setView({mapTypeId:Microsoft.Maps.MapTypeId.grayscale});" />
            </div>
        </div>
    
        <fieldset style="width:800px;margin-top:10px;">
            <legend>Custom Navigation Bar Sample</legend>
            This sample shows how to create a custom navigation bar by hiding the default navigation bar and floating custom navigation controls over the map.
        </fieldset>
    </body>
    </html>

    You can use to position it over top of the map. Take a look at the sample code I provided above.

    
    

    Also there isn't anything similar to the ant path from leaflet. Can you provide me with more context as to what you are trying to accomplish? Maybe the Bing Maps Snap to Road API could be of use to you. You can read more about it here:

    https://www.microsoft.com/en-us/maps/snap-to-road

    https://msdn.microsoft.com/en-us/library/mt814926.aspx?f=255&MSPPError=-2147217396



    Wednesday, March 28, 2018 12:10 AM
    Moderator
  • Thank you, for the example. 

    In our Android client we log location every few minutes on multiple devices. This location data gets put on a map so that an end user can quickly find out the path taken by devices and can also see quickly what direction they are moving in the path.

    Wednesday, March 28, 2018 4:47 PM