none
map control - disable vertical dragging + align infobox location RRS feed

  • Question

  • hi,

    i'm working with the ajax control v7.0.
    i'm facing 2 issues that i couldn't find a decent answer on the web yet:

    1. i understand that unlimited panning is enabled by default, but regarding the vertical dragging - it seems possible to drag the map up and down out from its boundaries.
    Are there any capability of the control or another best practice to fix it?

    2. i use BingTheme and create for each pushpin an infoBox on the same exact location (lat\long).
    however, the infobox opens up in a way that [a] it doesnt aim to the related pushpin [b] it sometimes out of the map.
    I use the default and give it the same pushpin's lat\long, so its position should be handled by the control.
    << I attached an example >>

    am i missing something? how can i handle it so the infoBox will point to the pushpin and will open always on the map?

    thanks,
    Orco



    • Edited by Orco365 Thursday, January 7, 2016 6:54 AM
    Wednesday, January 6, 2016 9:36 AM

Answers

  • The first item is by design. If you weren't able to pan the map vertically like this, you wouldn't be able to center the map over areas that are in the far south or north.  There is no option in V7 to disable this behavior.

    For your second issue, can you provide some source code. This sounds like an issue in your code possibly. Personally, I recommend using the BingTheme module in general as it severely limits your ability to customize things. When it comes to infoboxes I generally recommend creating one and reusing it. This creates a lot less DOM elements and makes your app much more scalable. I have a blog post on how to do this here: https://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/


    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Wednesday, January 6, 2016 6:06 PM
    • Unproposed as answer by Orco365 Wednesday, January 6, 2016 6:56 PM
    • Proposed as answer by Ricky_Brundritt Saturday, February 20, 2016 1:50 AM
    • Marked as answer by Ricky_Brundritt Saturday, February 20, 2016 1:51 AM
    Wednesday, January 6, 2016 6:06 PM
  • 1) that was my understanding of what your issue is. There is no way to disable that functionality.

    2) I'm not able to reproduce this. I suspect that there may be some CSS somewhere in your app that the infobox is inheriting which may be causing it to be offset. Try inspecting the infobox CSS styles and verify that they are only coming from the Bing Maps CSS files and not any of your CSS styles. Also make sure your map has a position, width and height values defined in CSS or inline styles, otherwise this could cause a rendering issue.


    http://rbrundritt.wordpress.com

    Wednesday, January 6, 2016 9:21 PM
  • thanks.

    @1: is there any best practice to implement this that you can recommend?

    @2: this is my suspicion too, but i couldnt put my finger on the issue, as the infoBox has a calculated top and left values in the css, it's not something relative.
    the map seems to have position, height and width.

    would you mind to see the below infobox's css, copied from the browser style?

    element.style {
        ;
        overflow: visible;
        white-space: normal;
        line-height: 16px;
        pointer-events: none;
        left: 251.26px;
        top: 83.8425px;
        z-index: 3000;
    }
    user agent stylesheetdiv {
        display: block;
    }
    Inherited from div.basic-tile.overview-tile-medium.map-tile
    .basic-tile {
        background: #f2f2f2;
        border: 1px solid #f2f2f2;
        color: #595959;
        padding: 5px;
        ;
    }
    Inherited from div#dashboardhost
    Style Attribute {
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        visibility: visible;
    }
    Inherited from body
    body {
        font-family: "Segoe UI";
        font-size: 12px;
        margin: 0;
        border: 0;
        height: 100%;
        max-height: 100%;
        background: #666;
        color: #151515;
        background: #fff;
        overflow-y: hidden;
    }

    • Marked as answer by Orco365 Sunday, February 21, 2016 8:08 AM
    Thursday, January 7, 2016 5:48 AM

All replies

  • The first item is by design. If you weren't able to pan the map vertically like this, you wouldn't be able to center the map over areas that are in the far south or north.  There is no option in V7 to disable this behavior.

    For your second issue, can you provide some source code. This sounds like an issue in your code possibly. Personally, I recommend using the BingTheme module in general as it severely limits your ability to customize things. When it comes to infoboxes I generally recommend creating one and reusing it. This creates a lot less DOM elements and makes your app much more scalable. I have a blog post on how to do this here: https://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/


    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Wednesday, January 6, 2016 6:06 PM
    • Unproposed as answer by Orco365 Wednesday, January 6, 2016 6:56 PM
    • Proposed as answer by Ricky_Brundritt Saturday, February 20, 2016 1:50 AM
    • Marked as answer by Ricky_Brundritt Saturday, February 20, 2016 1:51 AM
    Wednesday, January 6, 2016 6:06 PM
  • thanks Ricky.

    @1 - i meant to disable vertical dragging to outside of the map, so you cannot drag beyond the map borders and see the blank space.

    @2 - in fact i do use Bing theme, from thinking that it will take care of lots of things for me, inc. this.
    below is a piece of code when creating the pins and infoboxes. although it's the same lat\long, in the html they got a different location.

    what do i miss? :)

    mapLayers.forEach((layer, i) => {
                    var dataLayer = new Microsoft.Maps.EntityCollection();
                    this.map.entities.push(dataLayer);
    
                    var locations = locationsResult[layer.Name];
                    locations.forEach((location, j) => {
                        var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(location.latitude, location.longtitude),
                            { text: location.count.toString(), icon: layer.Options.pushpinImg });
    
                        dataLayer.push(pin);
                        this.map.entities.push(pin);
                        this.map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(location.latitude, location.longtitude),
                            { title: location.threatType, description: layer.Options.InfoBoxText + "</br>IP: " + location.IP, pushpin: pin, zIndex: 100 }));
                        });
                });

    Wednesday, January 6, 2016 6:38 PM
  • 1) that was my understanding of what your issue is. There is no way to disable that functionality.

    2) I'm not able to reproduce this. I suspect that there may be some CSS somewhere in your app that the infobox is inheriting which may be causing it to be offset. Try inspecting the infobox CSS styles and verify that they are only coming from the Bing Maps CSS files and not any of your CSS styles. Also make sure your map has a position, width and height values defined in CSS or inline styles, otherwise this could cause a rendering issue.


    http://rbrundritt.wordpress.com

    Wednesday, January 6, 2016 9:21 PM
  • thanks.

    @1: is there any best practice to implement this that you can recommend?

    @2: this is my suspicion too, but i couldnt put my finger on the issue, as the infoBox has a calculated top and left values in the css, it's not something relative.
    the map seems to have position, height and width.

    would you mind to see the below infobox's css, copied from the browser style?

    element.style {
        ;
        overflow: visible;
        white-space: normal;
        line-height: 16px;
        pointer-events: none;
        left: 251.26px;
        top: 83.8425px;
        z-index: 3000;
    }
    user agent stylesheetdiv {
        display: block;
    }
    Inherited from div.basic-tile.overview-tile-medium.map-tile
    .basic-tile {
        background: #f2f2f2;
        border: 1px solid #f2f2f2;
        color: #595959;
        padding: 5px;
        ;
    }
    Inherited from div#dashboardhost
    Style Attribute {
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        visibility: visible;
    }
    Inherited from body
    body {
        font-family: "Segoe UI";
        font-size: 12px;
        margin: 0;
        border: 0;
        height: 100%;
        max-height: 100%;
        background: #666;
        color: #151515;
        background: #fff;
        overflow-y: hidden;
    }

    • Marked as answer by Orco365 Sunday, February 21, 2016 8:08 AM
    Thursday, January 7, 2016 5:48 AM