none
Move bing map using mouse RRS feed

  • Question

  • Hello, I am using bing map using javascript

    I want to add ability to move/drag the map like it is in the bing map api site.

    When I do zoom in using mouse wheel and try to move map using mouse it is rather too slow or map doesn't seems to move.

    Can anyone please suggest on this.

    Thanks

    Tuesday, February 12, 2013 7:14 AM

Answers

  • See documentation here: http://msdn.microsoft.com/en-us/library/gg427629.aspx

    For example:

    CSS Class

    .pinClass:hover{

    cursor:pointer;

    }

    JavaScript:

    var pin = new MM.Pushpin(location, { typeName : pinClass });


    http://rbrundritt.wordpress.com

    Wednesday, February 13, 2013 5:27 PM
  • One possible issue is that your "map" variable is global and you keep replacing it when you create a new map. This could be acting like a pointer and messing around with your events. I do believe there are some issues with running multiple maps on the same page but this doesn't come up too often. Maybe try searching through the forums.

    http://rbrundritt.wordpress.com

    Thursday, February 14, 2013 12:27 PM

All replies

  • Can you provide sample code for your application so we can test. It shouldn't be slow unless to have too much data on the map.

    http://rbrundritt.wordpress.com

    Tuesday, February 12, 2013 10:20 AM
  • Thanks for the reply.

    I will try to see if I can share the sample code. I am not plotting a lot of data on it. I am getting data from sharepoint list and plotting polygons, pushpins and polylines.

    When I pan without doing zoom, it seems better . But when I tried to do zoom and then do panning then it becomes terribly slow.

    Any idea what could be the reason for this. This happens in IE browsers mostly and especially in IE 8

    Thanks.

    Tuesday, February 12, 2013 4:45 PM
  • Hello,
    I can't share the url as it is an internal site with in the company (sorry for that).
    Atleast I will try to share atleast som information if that can help.
    I am getting the data from sharepoint list and plotting region, pushpins and polylines on map.
    In javascript file in documnet.ready function I am calling a method displayMap and that renders the map with the regions/polylines and son on based on conditions.
    I have a for loop that adds pushpin on map and I have added click event for pushpin in for loop (since its need to be there for every pushpin) to show a jquery dialog when clicked on the pushpin or polyline or polygon
    I have added click event for map to change cursor style to  make it to default.

    $(document).ready(function () {
     displayMap(param1,param2,param3);
    });

    function displayMap(param1,param2,param3)
    {
     var mapContainer = map.getRootElement();
         mapContainer.style.cursor = 'default';

     map = new MM.Map(document.getElementById(divId), { credentials: Key, disablePanning: false,
            width: width, height: height, disableZooming: false, mapTypeId: displayMode, showCopyright:false,
            enableClickableLogo: false, enableSearchLogo: false, showLogo: false,showBreadcrumb:true
         });

     Microsoft.Map.Events.addHandler(map, 'click', function () {
            map.style.cursor = "default";
        });
    }

    panning in IE 9 seems much good compared to IE8. But in IE8 panning and zooming is not very smooth. Also IE9 zoom is not that smooth.

    Thanks

    Wednesday, February 13, 2013 7:51 AM
  • Roughly how many pushpins and polylines are you showing on the map? How complex are the polylines (2, 3 points, or 100's or points)?

    http://rbrundritt.wordpress.com

    Wednesday, February 13, 2013 10:09 AM
  • Thanks for the reply.

    10-15 pushpins and polylines or polygons are 5-6 points. But not more than this as of now.

     I have added these events while drawing on the map

    var map1 =  new Microsoft.Map(.....)

    MM.Events.addHandler(map1, 'click', function () {
            mapElem.style.cursor = "default";
        });
        MM.Events.addHandler(map1, 'mouseover', function () {
            mapElem.style.cursor = "default";
        });
        MM.Events.addHandler(map1, 'mouseout', function () {       
            mapElem.style.cursor = "default";
        });
        MM.Events.addHandler(map1, 'mouseup', function () {
            mapElem.style.cursor = "default";
        });
        MM.Events.addHandler(map1, 'mousewheel', function () {
            mapElem.style.cursor = "default";
        });

    Also. what happens is that next to map, I have a silverlight control. After adding the above events and after zooming in and out when I take the cursor out of the map the cursor style is of hand. This cursor style is when we drag map or while zooming in or out. But when I move away from may on the silverlight cursor I cannot click on that as the cursor style is of hand.

    when I zoom in and zoom out or zoom out and zoom in to original state means without zooming then I can click the silverlight control. But in case of zooming the cursor is of style hand and cannot be clicked.

    Thanks. Please suggest on this.

    Thanks.

    Wednesday, February 13, 2013 2:39 PM
  • Ok, this sounds very odd. The amount of data on the map is definitely not an issue. There could be an issue with events clashing. That said changing the cursor in the manner shown is not the proper way to do it. You are accessing the base map element and changing it's style and this is not a supported method for altering things in the map. A better approach is to create CSS classes and assign these to your shapes using the typeName property in the options of those classes.

    http://rbrundritt.wordpress.com

    Wednesday, February 13, 2013 2:46 PM
  • Thanks for the reply.

    Can you please suggest how to assign Css classes and use the typeName property. Because everything is dynamic. creating the divs dynamically , adding the data on maps dynamically.

    I think because of adding the data dynamcially with creating everything dynamically the zooming is not smooth.

    I am creating the div's dynamically and adding the map in that. Means the

    map = new MM.Map(document.getElementById(divId), { credentials: Key, disablePanning: false,
            width: width, height: height, disableZooming: false, mapTypeId: displayMode, showCopyright:false,
            enableClickableLogo: false, enableSearchLogo: false, showLogo: false,showBreadcrumb:true
         });

    divId used id dynamic. On the page there can be multiple maps. Based on conditions I am drawing different shapes on the maps.

    I have a page and on that page there are multiple maps drawn. Sometimes what happens is if I mouse over on map and click mouse wheel zoom in and zoom out happens. When I move mouse on next map then try to zoom in or zoom out then the previous/earlier map zooms in or zooms out and not the current.

    Even, if click on first map and zlick on next map and try to zoom in and zoom out using mouse wheel then also the first map zooms in or zoom out.

    Please suggest on this.

    Also, if you can suggest a better approach on dynamcially adding multiple maps on page with data on that. That would help

    Thanks.

    Wednesday, February 13, 2013 5:23 PM
  • See documentation here: http://msdn.microsoft.com/en-us/library/gg427629.aspx

    For example:

    CSS Class

    .pinClass:hover{

    cursor:pointer;

    }

    JavaScript:

    var pin = new MM.Pushpin(location, { typeName : pinClass });


    http://rbrundritt.wordpress.com

    Wednesday, February 13, 2013 5:27 PM
  • Thanks for the answer.

    When I add multiple maps on page and when I zoom in or zoom out and on a map and then I click on other map and try to zoom in or zoom out on that map , then also the previous map gets zoom in or zoom out. Not sure why this is happening

    Also, when zoomed in and draged the map or moved the map the cursor changes to hand style and when I move the cursor away from map and put it over other html or silverlight controls or even the web page scroolbar the cursor is still in hand mode and cannot be clicked.

    Please suggest on this.Thanks

    Thursday, February 14, 2013 5:59 AM
  • This is mostly the code that I am trying to use

    var map;
    var MM = Microsoft.Maps;
    var displayMode;
    var _longX = null, _latY = null;
    var mapContainer = null, _MapClickHandler = null,
    _points = [], _maskLine = null, _maskPoints = [],
    _MapMoveHandler = null, _shape = null,
    _mapX = null, _mapY = null;
    var height, width = null;
    var mapId = '';

    var _options = {
        shapeType: 'polyline',
        targetLayer: null,
        maskStrokeColor: new MM.Color(200, 0, 100, 100),
        maskFillColor: new MM.Color(000, 000, 000, 000),
        maskStrokeThickness: 2,
        maskStrokeDashArray: '2 2',
        shapeStrokeColor: new MM.Color(200, 0, 0, 200),
        shapeStrokeThickness: 2,
        shapeFillColor: new MM.Color(100, 000, 100, 000)
    };

    $(document).ready(function () {   
     var element = 1;
     var records,recordsNew=null; // These variables actually have data in json format
     for(i=0;i<5;i++)
    {
              DrawMap(records, element, recordsNew);
     }                  
    });
                   
    function DrawMap(filteredRows, element, ds) {

        var divId = 'ID_' + element;

        $(document.getElementById(divId)).empty();
        $(document.getElementById(divId)).html('');
        mapId = element;   
        map = new MM.Map(document.getElementById(divId), { credentials: key, disablePanning: false,
            width: 400, height: 400, disableZooming: false, mapTypeId: displayMode, showCopyright:false,
            enableClickableLogo: false, enableSearchLogo: false, showLogo: false,showBreadcrumb:true
        });

     

        $.each(filteredRows, function (key, val) {
            var pushpin = new MM.Pushpin(new MM.Location(filteredRows[key][0], filteredRows[key][0]));
            pushpin.MyProperty = element + "|" + filteredRows[key][0] + "~" + val[0];
            pushpin.Id = element + "__" + val[0];
            MM.Events.addHandler(pushpin, 'click', pinClicked);
            MM.Events.addHandler(pushpin, 'mouseover', function () {
                mapElem.style.cursor = "pointer";
            });

            MM.Events.addHandler(pushpin, 'mouseout', function () {
                mapElem.style.cursor = 'default';
            });

            map1.entities.push(pushpin);
        }); 


        mapContainer = map.getRootElement();
        mapContainer.style.cursor = 'default';   
        var mapElem = map.getRootElement();
       
        _options.targetLayer = mapElem.entities;
        _points = [];
    }

    //This function is used for pushpin click event
    function pinClicked(e) {
            mapContainer.style.cursor = 'pointer';
        e.handled = true;
    }

    //Remove the event handlers here
    function _Dispose() {
        mapContainer.style.cursor = 'hand'; ;
        //fix for FireFox double click event issue
        if (_points[_points.length - 1].toString() == _points[_points.length - 2].toString()) { _points.pop(); }
        _points.push(_points[0]);
        _shape.setLocations(_points);
        _options.targetLayer.remove(_maskLine);
        _shape = null;
    }


    The for loop in document ready function is used to draw maultiple maps based on requirements.

    I am facing issue in zooming, panning.

    Also, other thing is that when I have zoom in or out and when I remove my cursor from the map and move it on other controls , I

    cannot click those controls, also page scrollbar cannot be clicked. The mouse cursor is of type hand in that case.

    When multiple maps on the page zoom in and zoom out on one map and when moved the cursor to other map or clicked on other map,

    then also the zoom in or zoom out happens on previous map. I can't click any other controls on the page.

    Please suggest on this.

    Thans for the answer.

     

    Thursday, February 14, 2013 10:24 AM
  • One possible issue is that your "map" variable is global and you keep replacing it when you create a new map. This could be acting like a pointer and messing around with your events. I do believe there are some issues with running multiple maps on the same page but this doesn't come up too often. Maybe try searching through the forums.

    http://rbrundritt.wordpress.com

    Thursday, February 14, 2013 12:27 PM
  • Thanks for the reply.

    Just one thing any idea on why the cursor doesn't change on to default style when zoom in or zoom out on any map. When moved away from map it still remains as the hand style. Any suggestions on this.

    Thanks.

    Thursday, February 14, 2013 12:51 PM