none
Click on Infobox, launch larger infobox with expanded info within it RRS feed

  • Question

  • Hi everyone.  I have a bing maps app.   I grab data from an SQL database to populate pushpins on a map.  The description field being displayed on the pushpin infobox can get up to 400 to 500 characters and it will bleed over the box I have defined.  No problem, I wrote some code to abbreviate the string down to 100 characters with ... at the end to let the user know there is more data within this record.  I want to be able to click on the infobox and launch a larger infobox that will display the entire record at the same point.  I remove the small pushpininfobox and then try and launch the other, but I can not get the full record to display.  I have been able to get the abbreviated text to display within the larger info box even though I am trying to feed it the larger data variable.  Here is a snippet of the code I am working with.

    Any Suggestions?

    Thanks

    Chris.

    function addCustomPushpin(ctv, story, Location, myString)
        {
        var loc = new Microsoft.Maps.Location(Location);
        var pushpinOptions = {icon: 'http://www.highwayhistorysites.com/images/pushpin-with-shadow.png', width: 50, height: 50, draggable: false};
        var pushpin= new Microsoft.Maps.Pushpin(Location,pushpinOptions);
        
        // Create the info box for the abbreviated story
        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        // Create the infobox for the full story
        pinInfobox1 = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        infoboxLayer.push(pinInfobox);
        infoboxLayer.push(pinInfobox1);
            
        pushpin.Title = ctv;
        pushpin.Description = story;
        pushpin.Longstory = myString;
        pinLayer.push(pushpin); //add pushpin to pinLayer
                        
        // Add handler for the pushpin mouseover event.
        Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displayInfobox);
        
        // Add handler for the infobox click that will expand the abbreviated record.
        Microsoft.Maps.Events.addHandler(pinInfobox, 'click', displaybiginfobox(ctv, myString, location));

        // Hide the infobox when the map is moved.
        Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
        
        
          map.entities.push(pushpin);
          map.entities.push(pinInfobox);
        map.entities.push(pinInfobox1);
        }
          
          
    function displayInfobox(e)
        {
        pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, width: 246, height: 120, visible:true, offset: new Microsoft.Maps.Point(0,25)});
        pinInfobox.setLocation(e.target.getLocation());
        }                    

    function displaybiginfobox(ctv, myString, location)
        {
    //    Microsoft.Maps.Events.addHandler(pinInfobox, 'click', hideInfobox);
    //    document.write (ctv);
        pinInfobox1.setOptions({title: ctv, description: myString, width: 300, height: 300, visible:true, offset: new Microsoft.Maps.Point(0,25)});        
        pinInfobox1.setLocation(location);
        map.entities.push(pinInfobox1);
        }

    Friday, September 7, 2012 1:26 PM

Answers

All replies

  • Take a look at this module for custom infoboxes in Bing Maps: http://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control This infobox control will grow with your content. It will also allow you to use HTML in your infobox when can be handy if you want to word-wrap your title.

    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Friday, September 7, 2012 5:00 PM
    • Marked as answer by ChrisSchaller Sunday, September 9, 2012 8:07 PM
    • Unmarked as answer by ChrisSchaller Tuesday, September 11, 2012 12:55 AM
    • Marked as answer by Ricky_Brundritt Friday, September 14, 2012 12:46 PM
    Friday, September 7, 2012 5:00 PM
  • Hi, Thanks Richard for the reference to the custom infoboxes.  I have implemented them and they look good, but I have the exact same issue with this version of the boxes that I do the default infoboxes.

    What I want to do is click on an existing infobox and have it launch a infobox at the same position.  This infobox will display an un-shortened description field.  The initial infobox description field is shortened to 150 characters.

    Here is a chunk of my code:

    function displayInfobox(e)
        {
            customInfobox.setOptions({ offset: { x: 0, y: 25} }, { maxWidth:200 });
            var latlong = e.target.getLocation();
            //Define the layout contents in the infobox
            var html = ["<div style='padding:10px','color:#ddd'>"];
            html.push("<b>", e.target.Title, "</b><br/>");
            html.push(e.target.Description, "<br/>");
            html.push("</div>");
            //Display Infobox
            customInfobox.show(latlong, html.join(''));
            
            // Add handler for the infobox click that will expand the abbreviated record.
        Microsoft.Maps.Events.addHandler(customInfobox, 'click', displaybigInfobox);    


        }                    



    function displaybigInfobox(e)
        {
            if (customInfobox != null) {
                        map.entities.remove(customInfobox);
                        if (Microsoft.Maps.Events.hasHandler(customInfobox, 'mouseleave'))
                            Microsoft.Maps.Events.removeHandler(customInfobox.mouseLeaveHandler);
                        if (Microsoft.Maps.Events.hasHandler(customInfobox, 'mouseenter'))
                            Microsoft.Maps.Events.removeHandler(customInfobox.mouseEnterHandler);
                        customInfobox = null;    
            }
            
    //    Microsoft.Maps.Events.addHandler(pinInfobox, 'click', hideInfobox);
            Microsoft.Maps.Events.removeHandler(customInfobox);
            customInfobox = new CustomInfobox(map, { color: '#fff', arrowWidth: 12, maxWidth: 500 });
    //    document.write (myString);
            customInfobox.setOptions({ offset: { x: 0, y: 25} }, { maxWidth:200 });
            var latlong = location;
            //Define the layout contents in the infobox
            var html = ["<div style='padding:10px','color:#ddd'>"];
            html.push("<b>", e.target.Title, "</b><br/>");
            html.push(e.target.Longstory, "<br/>");
            html.push("</div>");
            //Display Infobox
            customInfobox.show(latlong, html.join(''));
        }

    Is it possible to use the handler with the customInfobox within it this way:

    Microsoft.Maps.Events.addHandler(customInfobox, 'click', displaybigInfobox);

    Any help is appreciated.

    thanks

    Chris.

    Tuesday, September 11, 2012 1:22 AM