1 2 Previous Next 15 Replies Latest reply on Mar 10, 2011 6:53 AM by v.bannur

    show point on the map

    y0da

      Hi!
      For now I remade the JSF example and I show the map on my JSP, but how can I load Points in the map?

      my JSP (example JSP):

      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
      <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
      
      <html>
       <head>
       <title>Hello World</title>
       </head>
       <body>
       <f:view>
       <h:panelGrid columns="2">
       <rich:gmap gmapVar="map" zoom="17" style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}" />
      
       <h:panelGroup>
       <rich:tabPanel switchType="ajax" width="350" height="400">
       <rich:tab label="Using Google Map API">
       <h:panelGrid columns="2" columnClasses="optionList">
       <h:outputText value="Controls:" />
       <h:panelGroup>
       <a href="javascript: void 0" onclick="map.hideControls()">Hide</a>
       <a href="javascript: void 0" onclick="map.showControls()">Show</a><br/>
       </h:panelGroup>
      
       <h:outputText value="Zoom:" />
       <rich:inputNumberSlider id="zoom" showInput="false" minValue="1" maxValue="18"
       value="#{gmBean.zoom}" onchange="map.setZoom(this.value)"/>
      
      
       <h:outputText value="Map Type:" />
       <h:panelGroup>
       <a href="javascript: void 0" onclick="map.setMapType(G_SATELLITE_MAP)">Satellite</a>
       <a href="javascript: void 0" onclick="map.setMapType(G_HYBRID_MAP)">Hybrid</a><br/>
       </h:panelGroup>
      
       </h:panelGrid>
       </rich:tab>
      
       <rich:tab label="Using Ajax with JSON">
       <rich:dataGrid var="place" value="#{gmBean.point}" columns="2" >
       <h:graphicImage onclick="showPlace('#{place.id}')" style="cursor:pointer" value="resource://#{place.pic}" />
       </rich:dataGrid>
      
       </rich:tab>
      
       </rich:tabPanel>
       </h:panelGroup>
       </h:panelGrid>
      
       <h:form>
       <a4j:jsFunction name="showPlace" data="#{gmBean.currentPlace}" reRender=":zoom"
       oncomplete="map.setCenter(new GLatLng(data.lat, data.lng),data.zoom)">
       <a4j:actionparam name="id" assignTo="#{gmBean.currentId}"></a4j:actionparam>
       </a4j:jsFunction>
       </h:form>
       </f:view>
      
       </body>
      </html>
      
      


        • 1. Re: show point on the map
          ilya_shaikovsky

          Google Map component allow to use all the google map JS API to control the component.

          So you may take the goole map JS api for you case from google map project page.

          • 2. Re: show point on the map
            y0da

            Hi!

            Well I'm really new with that (Google Map, Richfaces) - can someone show me a short exmaple how I can load some points to the map with Google Map API + Richfaces (I know how it works which Google Map API - but how it will work with Google Map + Richfaces I dont know).

            best regards

            • 3. Re: show point on the map

              There is no difference. If you know how it works which Google Map API, go ahead and put the points the same way.

              • 4. Re: show point on the map
                y0da

                Well, this will work?


                <rich:gmap gmapVar="map" zoom="17" style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}" />
                

                --> map initialized?
                At Google MapAPI I did just following (JavaScript):
                 var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                 southWest.lng() + lngSpan * Math.random());
                 map.addOverlay(new GMarker(point));
                

                So how/where can I did that with RichFaces?Furthermore I wanna load points from a servlet - I thought I can do this without JavaScript with RichFaces?

                • 5. Re: show point on the map
                  y0da

                  Now I wanna try something like this:

                  My asking how can I call the RichFaces Map which are initiated
                  -->

                  <rich:gmap gmapVar="map" zoom="17" style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}"
                   binding="#{gmBean.map}" oninit="load()" />
                  


                  on the JavaScript Part.
                  -->
                  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAU5IDceLqYFSp4k84FYLxyRRgeQkgRfNxas6wOxz_k5H84q9S-RS4CBqq0ByHDVCpcXcHHzLQ7xrSbA"
                   type="text/javascript"></script>
                   <script type="text/javascript">
                  
                   //<![CDATA[
                   function load() {
                   var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                   southWest.lng() + lngSpan * Math.random());
                   map.addOverlay(new GMarker(point));
                   }
                   //]]>
                  </script>
                  


                  whole page:

                  <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                  <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                  <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
                  <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                  <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
                  
                  
                  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAU5IDceLqYFSp4k84FYLxyRRgeQkgRfNxas6wOxz_k5H84q9S-RS4CBqq0ByHDVCpcXcHHzLQ7xrSbA"
                   type="text/javascript"></script>
                   <script type="text/javascript">
                  
                   //<![CDATA[
                   function load() {
                   var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                   southWest.lng() + lngSpan * Math.random());
                   map.addOverlay(new GMarker(point));
                   }
                   //]]>
                  </script>
                  
                  
                  <html>
                   <head>
                   <title>Hello World</title>
                   </head>
                   <body>
                   <f:view>
                   <h:panelGrid columns="2">
                   <rich:gmap gmapVar="map" zoom="17" style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}"
                   binding="#{gmBean.map}" oninit="load()" />
                   </h:panelGrid>
                   <h:form>
                   <h:commandButton tabindex="0" id="blubButton"
                   value="BUTTON" action="#{gmBean.doSomething}"/>
                   </h:form>
                   </f:view>
                  
                   </body>
                  </html>
                  


                  • 6. Re: show point on the map
                    y0da

                    Hmm..not edit function activated?

                    Well it works now with following code:

                    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                    <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
                    <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                    <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
                    
                    <script type="text/javascript">
                     //<![CDATA[
                     function load() {
                     map.openInfoWindow(map.getCenter(),
                     document.createTextNode("Hello, world"));
                    
                     // Add 10 markers in random locations on the map
                     var bounds = map.getBounds();
                     var southWest = bounds.getSouthWest();
                     var northEast = bounds.getNorthEast();
                     var lngSpan = northEast.lng() - southWest.lng();
                     var latSpan = northEast.lat() - southWest.lat();
                     for (var i = 0; i < 10; i++) {
                     var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                     southWest.lng() + lngSpan * Math.random());
                     map.addOverlay(new GMarker(point));
                     }
                     }
                     //]]>
                    </script>
                    
                    
                    <html>
                     <head>
                     <title>Hello World</title>
                     </head>
                     <body>
                     <f:view>
                     <h:panelGrid columns="2">
                     <rich:gmap gmapVar="map" zoom="17" style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}"
                     lat="37.4419" lng="-122.1419" binding="#{gmBean.map}" oninit="load()" />
                     </h:panelGrid>
                     <h:form>
                     <h:commandButton tabindex="0" id="blubButton"
                     value="BUTTON" action="#{gmBean.doSomething}"/>
                     </h:form>
                     </f:view>
                    
                     </body>
                    </html>
                    


                    But someone now how can I get the points dynamically (from Bean?)?

                    • 7. Re: show point on the map

                      You can do it using a4j:jsFunction like it shown in the demo.
                      http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf

                      • 8. Re: show point on the map
                        y0da

                        Hi, yes this will be work!

                        Someone also know how can I eliminate4 following problem (load values for more Markers from a bean into Javascript):

                        My idea:

                        <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                        <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                        <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
                        <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                        <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
                        
                        <script type="text/javascript">
                        
                         //<![CDATA[
                         function loadOnePoint(data) {
                         var point = new GLatLng(data.lat, data.lng);
                         map.setCenter(point,data.zoom);
                         map.addOverlay(new GMarker(point));
                         map.openInfoWindow(map.getCenter(),
                         document.createTextNode("Fortschritt ;D"));
                         }
                        
                         function loadMorePoints(data) {
                         //geht nicht - JS kennt Collection nicht! :(
                         for (var i = 0; i < 3; i++) {
                         map.setCenter(point,data.getAttribute("zoom"));
                         // var point = new GLatLng(data.lat, data.lng);
                         // map.addOverlay(new GMarker(point));
                         map.openInfoWindow(map.getCenter(),
                         document.createTextNode("Fortschritt ;D"));
                         }
                        
                         } 
                         //]]>
                        </script>
                        
                        <html>
                         <head>
                         <title>Hello World</title>
                         </head>
                         <body>
                         <f:view>
                         <h:panelGrid columns="2">
                         <rich:gmap binding="#{gmBean.map}"/>
                         </h:panelGrid>
                         <h:form>
                         <a4j:jsFunction name="loadPoints" data="#{gmBean.loadPoints}"
                         oncomplete="loadMorePoints(data)">
                         </a4j:jsFunction>
                        
                         <h:commandButton tabindex="0" id="blubButton"
                         value="BUTTON" action="#{gmBean.doSomething}"/>
                         </h:form>
                         </f:view>
                        
                         </body>
                        </html>
                        


                        Bean:

                        package org.richfaces.demo.gmap;
                        
                        import java.util.ArrayList;
                        import java.util.HashMap;
                        
                        import javax.faces.context.ExternalContext;
                        import javax.faces.context.FacesContext;
                        
                        import org.richfaces.component.html.HtmlGmap;
                        
                        
                        public class Bean {
                        
                         //------------------------------------------------------------------------------------------------------------------
                         // FIELDS
                         //------------------------------------------------------------------------------------------------------------------
                        
                         private Integer zoom = new Integer(17);
                        
                         /** google map */
                         private HtmlGmap map;
                        
                         /** whole authorization for google map */
                         private String gmapKey;
                        
                         /** google key for this application */
                         private static final String GOOGLE_API_KEY =
                         "ABQIAAAAU5IDceLqYFSp4k84FYLxyRTwM0brOpm-All5BF6PoaKBxRWWERSDiAIGyx-hbmMfA3v7tHF4Tvwfaw";
                        
                         /** application url */
                         private static final String APPL_URL = "localhost:8080";
                        
                         /** host string */
                         private static final String HOST = "host";
                        
                         /** error message if key is not generated for <code>Bean.APPL_URL</code> */
                         private static final String KEY_ERROR_MSG =
                         "get the key for your domain at http://www.google.com/apis/maps/signup.html";
                        
                         /** style of the google map */
                         private static final String MAP_STYLE = "width:400px;height:400px";
                        
                         /** java script method which load KML file */
                         private static final String LOAD_POINTS_KML = "loadPoints()";
                        
                         /** google map initial zoom */
                         private static final String MAP_ZOOM_INITIAL = "10";
                        
                         /** google map initial lattidude value */
                         private static final String MAP_LATTIDUDE_INITIAL = "37.4419";
                        
                         /** google map initial longtidude value */
                         private static final String MAP_LONGTIDUDE_INITIAL = "-122.1419";
                        
                         /** google map initial type of show value */
                         private static final String MAP_TYPE_INITIAL = "G_NORMAL_MAP";
                        
                         /** google map variable for java script */
                         private static final String MAP_GMAP_VAR = "map";
                        
                         //------------------------------------------------------------------------------------------------------------------
                         // HELPER METHODS
                         //------------------------------------------------------------------------------------------------------------------
                        
                         public ArrayList<Place> getLoadPoints() {
                         ArrayList<Place> point = new ArrayList<Place>();
                         point.add(new Place ("eiffeltower", "/src/main/webapp/tower.gif", "48.858489", "2.295295" , 17,
                         "Eiffel Tower, Paris"));
                         point.add(new Place ("goldengate", "/src/main/webapp/resourcegold.gif", "37.81765", "-122.477603" , 14,
                         "Golden Gate Bridge, San Francisco"));
                        
                         //FIXME hier kml befüllen? und so map mit pkt befüllen?
                        
                         return point;
                         }
                        
                         /**
                         * create the whole google map key
                         * @return key generated key
                         */
                         private String createKey() {
                         HashMap<String, String> hosts = new HashMap<String, String>();
                         hosts.put(Bean.APPL_URL, Bean.GOOGLE_API_KEY);
                         ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
                         String host = (String)ec.getRequestHeaderMap().get(Bean.HOST);
                         String key = hosts.get(host);
                         if (key != null)
                         return key;
                         else
                         return Bean.KEY_ERROR_MSG;
                         }
                        
                         /**
                         * dummy button - just test
                         *
                         */
                         public void doSomething() {
                         System.out.println("laft");
                         this.map.getGmapVar();
                         this.map.getAttributes();
                         }
                        
                         //------------------------------------------------------------------------------------------------------------------
                         // GETTER/SETTER
                         //------------------------------------------------------------------------------------------------------------------
                        
                         /**
                         * getter method
                         * @return zoom
                         */
                         public Integer getZoom() {
                         return this.zoom;
                         }
                        
                         /**
                         * setter method
                         * @param zoom
                         */
                         public void setZoom(final Integer zoom) {
                         this.zoom = zoom;
                         }
                        
                         /**
                         * getter method
                         * @return gmapKey
                         */
                         public String getGmapKey() {
                         if (gmapKey == null) {
                         gmapKey = createKey();
                         }
                         return gmapKey;
                         }
                        
                         /**
                         * setter method
                         * @param gmapKey
                         */
                         public void setGmapKey(final String gmapKey) {
                         this.gmapKey = gmapKey;
                         }
                        
                         /**
                         * getter method
                         * @return
                         */
                         public HtmlGmap getMap() {
                         return this.map;
                         }
                        
                         /**
                         * setter method
                         * also initialized google map
                         * @param map
                         */
                         public void setMap(final HtmlGmap map) {
                         if (this.map == null) {
                         this.map = map;
                         this.map.setGmapVar(Bean.MAP_GMAP_VAR);
                         this.map.setOninit(Bean.LOAD_POINTS_KML);
                         this.map.setZoom(Bean.MAP_ZOOM_INITIAL);
                         this.map.setStyle(Bean.MAP_STYLE);
                         this.map.setGmapKey(this.getGmapKey());
                         this.map.setLat(Bean.MAP_LATTIDUDE_INITIAL);
                         this.map.setLng(Bean.MAP_LONGTIDUDE_INITIAL);
                         this.map.setMapType(Bean.MAP_TYPE_INITIAL);
                         } else {
                         this.map = map;
                         }
                         }
                        }
                        
                        




                        The problem is that the bean delivery a Java Array - can I convert it into Javascript?

                        • 9. Re: show point on the map

                          data returns object in JSON notation. It might be primitive object, array, collection or hierarchy of object. So, I do not understand where is the problem your met.

                          Write alert(data); and you can see what is the returned structure.

                          • 10. Re: show point on the map
                            y0da

                            Well thx, it works now.

                            • 11. Re: show point on the map
                              y0da

                              by the way is it possible to load the markers at the servlet?
                              org.richfaces.component.html.HtmlGmap didnt have any method to do this.

                              Or I really must do it in JavaScript like this:

                              <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                              <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                              <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
                              <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                              <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
                              
                              <script type="text/javascript">
                               //<![CDATA[
                               function createPoints(data) {
                               for (var i = 0; data.length; i++) {
                               var point = new GLatLng(data.lat, data.lng);
                               map.addOverlay(createMarkerWithIdentifier(point, data.desc));
                               }
                               }
                              
                               function createMarkerWithIdentifier(point, desc) {
                               var marker = new GMarker(point);
                               GEvent.addListener(marker, "click", function() {
                               marker.openInfoWindowHtml(desc);
                               });
                               return marker;
                               }
                               //]]>
                               </script>
                              
                               <html>
                               <head>
                               <title>Hello World</title>
                               </head>
                               <body>
                               <f:view>
                               <h:panelGrid columns="2">
                               <rich:gmap binding="#{gmBean.map}"/>
                               </h:panelGrid>
                               <h:form>
                               <a4j:jsFunction name="initializePoints" data="#{gmBean.points}"
                               oncomplete="createPoints(data)">
                               </a4j:jsFunction>
                               </h:form>
                               </f:view>
                              
                               </body>
                               </html>
                              
                              


                              • 12. Re: show point on the map
                                hispeedsurfer

                                Hi Sergey,

                                To display in JSON format returned data I have use alert(data) in loadMorePoints

                                <a4j:jsFunction name="loadPoints" data="#{gmBean.loadPoints}"
                                 oncomplete="loadMorePoints(data)">
                                </a4j:jsFunction>


                                But I only see the outcome '[object Object]' in alert-box. How can I display the JSON structure?

                                Thanks

                                • 13. Re: show point on the map

                                  What else you expect to see there pointing to the object?

                                  More practical question: what the structure that #{gmBean.loadPoints} returns?

                                  • 14. Re: show point on the map
                                    hispeedsurfer

                                    Ohhhh, I'm act like a fool...... sorry

                                    But because of your comment

                                    data returns object in JSON notation


                                    I hoped to see content in JSON format. But where is here JSON? I know about JSON only a little bit.

                                    1 2 Previous Next