none
How to iterate a list (Java) and create pins in bingmap? RRS feed

  • Question

  • I'm using API version 8 and while running this code , I can able to get only one pin which has data in first object in the list.

    Here List has objects from object we have Latitude , Longitude , Title and Description.

    Iteration is done successfully but only first data is reflected in the BingMap.

    How can I get all the pins from the list and that reflected in BingMap.


    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'
        src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async
        defer></script>
    <style>
    #myMap {;
        width: 800px;
        height: 600px;
    }

    #inputForm {;
       
       
        padding: 10px;
        background-color: white;
        border: 1px solid #000;
        border-radius: 10px;
    }
    </style>
    </head>
    <body>
        <div id="myMap" style=""></div>

        <script type='text/javascript'>
            var map, infobox, currentPushpin;

            function GetMap() {
                map = new Microsoft.Maps.Map('#myMap', {
                    credentials : 'bing map key',
                    zoom : 0
                });
                document.getElementById('inputForm').style.display = '';

                var lat = document.getElementById('lat').value;

                var lon = document.getElementById('lon').value;

                var center = new Microsoft.Maps.Location(lat, lon);

                //Create a pushpin.
                currentPushpin = new Microsoft.Maps.Pushpin(center);
                currentPushpin.metadata = {
                    title : document.getElementById('title').value,
                    description : document.getElementById('description').value
                };

                //Add a click event to the pushpin.
                Microsoft.Maps.Events.addHandler(currentPushpin, 'click',
                        pushpinClicked);

                //Add the pushpin to the map.
                map.entities.push(currentPushpin);
            }
            function pushpinClicked(e) {

                //Create an infobox that will render in the center of the map.
                infobox = new Microsoft.Maps.Infobox(e.target.getLocation(), {
                    title : e.target.metadata.title,
                    description : e.target.metadata.description
                });
                //Assign the infobox to a map instance.
                infobox.setMap(map);
            }
        </script>
        <div id="inputForm" style="display: none;">

            <TABLE>
                <c:forEach var="message" items="${list}">
                    <tr>
                        <td><input id="lat" type="hidden" value="${message.lat}" /> <input
                            id="lon" type="hidden" value="${message.lon}" /> <input
                            id="title" type="hidden" value="${message.title}" /> <input
                            id="description" type="hidden" value="${message.description}" />
                        </td>
                    </tr>
                </c:forEach>
            </TABLE>
        </div>
    </body>
    </html>

    Tuesday, June 14, 2016 5:06 PM

Answers

  • This isn't really a Bing Maps question, but more of a Spring MVC question. Looking at your HTML the first issue I see is that each item in your table has an ID assigned to them. ID's are meant to be unique in HTML, but with the code you have you will end up creating multiple elements with the same ID which is technically creating an invalid HTML and you will only be able to retrieve the last item by ID. Pulling your data from t a table like this likely isn't the best way to implement your application. There is likely some way to generate a JSON object using Spring MVC, however I'm not familiar with Spring MVC development. If you want to continue with the method you are using I would suggest changing the ID's to classes and then you will be able to retrieve the elements by class name. Here is an example worth trying.

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
     <!DOCTYPE html>
     <html>
     <head>
     <title></title>
     <meta charset="utf-8" />
     <script type='text/javascript'
         src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async
         defer></script>
     <style>
     #myMap {;
         width: 800px;
         height: 600px;
     }
    
     #inputForm {     
         padding: 10px;
         background-color: white;
         border: 1px solid #000;
         border-radius: 10px;
     }
     </style>
     </head>
     <body>
         <div id="myMap" style=""></div>
    
         <script type='text/javascript'>
             var map, infobox, currentPushpin;
    
             function GetMap() {
                 map = new Microsoft.Maps.Map('#myMap', {
                     credentials : 'bing map key',
                     zoom : 0
                 });
    			 
    			 //Create a reusable infobox
    			 infobox = new Microsoft.Maps.Infobox(map.getCenter(), {visible: false});
    			 infobox.setMap(map);
    			 
                 document.getElementById('inputForm').style.display = '';
    			 
    			 var lats = document.getElementsByClassName('lat');
    			 var lons = document.getElementsByClassName('lon');
    			 var titles = document.getElementsByClassName('titles');
    			 var descriptions = document.getElementsByClassName('description');
    			 
    			 //The lats, lons, titles and descriptions values should be arrays of equal length.
    
    			 var loc, pin;
    			 
    			 for(var i = 0, len = lats.length; i < len; i++){
    				loc = new Microsoft.Maps.Location(parseFloat(lats[i].value), parseFloat(lons[i].value));
    				pin = 
    				
    				pin.metadata = {
    					title : titles[i].value,
    					description : descriptions[i].value
    				};
    				 
    				Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
    
    				map.entities.push(pin);
    			}
             }
    		 
             function pushpinClicked(e) {
                 //Create an infobox that will render in the center of the map.
                 infobox.setOptions({
    				location: e.target.getLocation(),
                    title : e.target.metadata.title,
                    description : e.target.metadata.description,
    				visible: true
                 });
             }
         </script>
         <div id="inputForm" style="display: none;">
    
             <TABLE>
                 <c:forEach var="message" items="${list}">
                     <tr>
                         <td><input class="lat" type="hidden" value="${message.lat}" /> <input
                             class="lon" type="hidden" value="${message.lon}" /> <input
                             class="title" type="hidden" value="${message.title}" /> <input
                             class="description" type="hidden" value="${message.description}" />
                         </td>
                     </tr>
                 </c:forEach>
             </TABLE>
         </div>
     </body>
     </html> 


    [Blog] [twitter] [LinkedIn]

    Tuesday, June 14, 2016 5:53 PM