none
Creating Dynamic InfoBox content RRS feed

  • Question

  • I have a template I am loading fine. How would I loop through this within the html: content tag to reduce my code to one line assignment with an index ie

     .replace('{address0}', ETAAddress[i])

                           var ETASummaryinfobox = new Microsoft.Maps.Infobox(Corridorcenter, {
                               htmlContent: ETASummaryinfoboxTemplate 
    
                           .replace('{address0}', ETAAddress[0])
                           .replace('{address1}', ETAAddress[1])
                           .replace('{address2}', ETAAddress[2])
                           .replace('{address3}', ETAAddress[3])
                           .replace('{address4}', ETAAddress[4])
                           .replace('{address5}', ETAAddress[5])
                           .replace('{address6}', ETAAddress[6])
                           .replace('{address7}', ETAAddress[7])
                           .replace('{address8}', ETAAddress[8])
                           .replace('{address9}', ETAAddress[1])
                           .replace('{address10}', ETAAddress[10])
                           .replace('{address11}', ETAAddress[11])
                           .replace('{address12}', ETAAddress[12])
                           .replace('{address13}', ETAAddress[13])
                           .replace('{address14}', ETAAddress[14])
                           .replace('{address15}', ETAAddress[15])               
                           })
                           map.entities.push(ETASummaryinfobox);

    Thanks in Advance

    Monday, February 12, 2018 4:05 PM

Answers

  • You could do this: 

    var html = ETASummaryinfoboxTemplate;
    
    for(var i=0;i<ETAAddress.length;i++){
    	html = html.replace('{address' + i + '}', ETAAddress[i]);
    }
    
    var ETASummaryinfobox = new Microsoft.Maps.Infobox(Corridorcenter, {
    	htmlContent: html
    };
    
    ETASummaryinfobox.setMap(map);

    Note that you use the infoboxes setMap function to assign an infobox to a map, not map.entities.push.


    [Blog] [twitter] [LinkedIn]

    Monday, February 12, 2018 5:14 PM
  • A couple of options:

    • By default the infobox renders within the map div and does not overflow outside of it. If you would prefer it overflows outside of it, simple add allowInfoboxOverflow: true as a map option when loading the map. 
    • You could add code that centers the map on the location that was clicked and then open the infobox. This is pretty easy to do.
    • Adjust the max height/width of the infobox so that it is smaller and let the scroll bars appear.
    • You could calculate the pixel size of the infobox and the minimum offset needed to move the map so that the infobox comes just into view. This is a bit of work and to be honest any of the first three option are likely better options. 

    [Blog] [twitter] [LinkedIn]

    Thursday, February 22, 2018 6:27 PM

All replies

  • You could do this: 

    var html = ETASummaryinfoboxTemplate;
    
    for(var i=0;i<ETAAddress.length;i++){
    	html = html.replace('{address' + i + '}', ETAAddress[i]);
    }
    
    var ETASummaryinfobox = new Microsoft.Maps.Infobox(Corridorcenter, {
    	htmlContent: html
    };
    
    ETASummaryinfobox.setMap(map);

    Note that you use the infoboxes setMap function to assign an infobox to a map, not map.entities.push.


    [Blog] [twitter] [LinkedIn]

    Monday, February 12, 2018 5:14 PM
  • Thanks. Thought I had marked this as answer.

    On last question on this info box. I have it working correctly with your recommendation. One problem I am having is this is a fairly large info box and is often times off the screen. I crossed some code that insures your box is in view but I can't seem to find that. Could you point me to that.

    Thanks in Advance.

    Thursday, February 22, 2018 1:07 PM
  • A couple of options:

    • By default the infobox renders within the map div and does not overflow outside of it. If you would prefer it overflows outside of it, simple add allowInfoboxOverflow: true as a map option when loading the map. 
    • You could add code that centers the map on the location that was clicked and then open the infobox. This is pretty easy to do.
    • Adjust the max height/width of the infobox so that it is smaller and let the scroll bars appear.
    • You could calculate the pixel size of the infobox and the minimum offset needed to move the map so that the infobox comes just into view. This is a bit of work and to be honest any of the first three option are likely better options. 

    [Blog] [twitter] [LinkedIn]

    Thursday, February 22, 2018 6:27 PM
  • my default behavior is not that. Maybe because I am defining this in a HTML template???
    Friday, February 23, 2018 4:04 PM