Uploaded image for project: 'Offre de formation'
  1. Offre de formation
  2. ODF-1017

Override icons of the points of interest on the map of the search ODF does not work

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Major Major
    • 2.4.0
    • 2.3.0
    • None
    • None

      How to reproduce :

      • use ODF demo
      • add a geolocation field on program content
      • paste the folder attached in skins/[NOM_SKIN]/resources/img/
      • on a page, insert the ODF search service with geolocation view
      • launch a research on preview
        > the override of the icons does not work :
        <img src="undefinedletter/1.png" class="geo-pin">

          [ODF-1017] Override icons of the points of interest on the map of the search ODF does not work

          Laurence Aumeunier made changes -
          Status Original: Resolved [ 5 ] New: Closed [ 6 ]
          Laurence Aumeunier made changes -
          Resolution New: Fixed [ 1 ]
          Status Original: Open [ 1 ] New: Resolved [ 5 ]

          Waiting for a release version with the fix you need to override the template "display-geo-map" in your skin with following:

              <xsl:template name="display-geo-map">
              
                  <xsl:variable name="scheme" select="substring-before($absolute-uri-prefix, '://')"/>
                  <script src="{$scheme}://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
                  <script src="{ametys:pluginResourceURL('web', 'js/jquery.gmap.js')}" type="text/javascript"></script>
                  <script src="{ametys:pluginResourceURL('web', 'js/GmapViewer.js')}" type="text/javascript"></script>
                  
                  <script type="text/javascript">
                      <xsl:comment>
                          geocode_map_<xsl:value-of select="$uniqueId"/> = [];
                          coordinates_<xsl:value-of select="$uniqueId"/> = {};
                          geocode_sorted_latlng_<xsl:value-of select="$uniqueId"/> = [];
                          
                          var pinIdx = 0, lat, lng, geocode_entry, coord_entry;
                          <xsl:variable name="cl" select="count($colors/color)"/>;
                          
                          <xsl:for-each select="/search/hits/hit[latitude != '' and longitude != '']">
                              lat = String(<xsl:value-of select="latitude" />);
                              lng = String(<xsl:value-of select="longitude" />);
                              <xsl:variable name="tooltip-title"><xsl:call-template name="get-tooltip-title" /></xsl:variable>
                              
                              coord_entry = coordinates_<xsl:value-of select="$uniqueId"/>[lat] || {};
                              coord_entry = coord_entry[lng];
                              
                              if (!coord_entry) // no entry at the coordinates
                              {
                                  <xsl:variable name="pos" select="position()"/>
                                  pinIdx++;
                                  
                                  if (!coordinates_<xsl:value-of select="$uniqueId"/>[lat])
                                  {
                                      coordinates_<xsl:value-of select="$uniqueId"/>[lat] = {};
                                  }
                                  
                                  coord_entry = coordinates_<xsl:value-of select="$uniqueId"/>[lat];
                                  
                                  coord_entry[lng] = {
                                      number: String(pinIdx),
                                      color: '<xsl:value-of select="$colors/color[(($pos - 1) mod $cl)+1]"/>',
                                      titles: ['<xsl:value-of select="ametys:escapeJS($tooltip-title)"/>']
                                  };
                              }
                              else
                              {
                                  coord_entry.titles.push('<xsl:value-of select="ametys:escapeJS($tooltip-title)"/>');
                              }
                              
                              // Keep reference to coordinates in the same order
                              geocode_sorted_latlng_<xsl:value-of select="$uniqueId"/>.push([lat, lng]);
                          </xsl:for-each>
                          
                          <xsl:for-each select="/search/hits/hit[latitude != '' and longitude != '']">
                              coord_entry = coordinates_<xsl:value-of select="$uniqueId"/>[String(<xsl:value-of select="latitude" />)][String(<xsl:value-of select="longitude" />)];
                              
                              geocode_entry = {
                                  lat: <xsl:value-of select="latitude" />,
                                  lng: <xsl:value-of select="longitude" />,
                                  number: coord_entry.number,
                                  title: coord_entry.titles.join('&lt;br/&gt;')
                              };
                              
                              geocode_map_<xsl:value-of select="$uniqueId"/>.push(geocode_entry);
                          </xsl:for-each>
                      </xsl:comment>
                  </script>
          
                  <!-- Allow the possibility to define the js function onAfterGmapViewerSetup via a template -->
                  <xsl:call-template name="display-geo-map-js-listener" />
                  
                  <script type="text/javascript">
                      $j(document).ready(function () 
                      {
                          $j('#<xsl:value-of select="$uniqueId"/>-map').show();
                          
                          var data = {
                              iconBase: '<xsl:value-of select="ametys:absoluteUriPrefix()"/>/plugins/web/icons/map/<xsl:value-of select="$skin"/>/',
                              zoomLevel: geocode_map_<xsl:value-of select="$uniqueId"/>.length &gt; 0 ? 15 : <xsl:value-of select="$default-zoom"/>,
                              lat: (geocode_map_<xsl:value-of select="$uniqueId"/>[0] || {}).lat || <xsl:value-of select="$default-coord-lat"/>,
                              lng: (geocode_map_<xsl:value-of select="$uniqueId"/>[0] || {}).lng || <xsl:value-of select="$default-coord-lng"/>,
                              mapTypeId:  google.maps.MapTypeId.ROADMAP,
                              markers: geocode_map_<xsl:value-of select="$uniqueId"/>,
                              polygons: []
                          };
                          
                          var gmapViewer = new GmapViewer();
                          gmapViewer.setUp('#<xsl:value-of select="$uniqueId"/>-map', data, true);
                          
                          // onAfterGmapViewerSetup hook.
                          if ($j.isFunction(window.onAfterGmapViewerSetup))
                          {
                              window.onAfterGmapViewerSetup(gmapViewer, geocode_sorted_latlng_<xsl:value-of select="$uniqueId"/>, coordinates_<xsl:value-of select="$uniqueId"/>);
                          }
                      });
                  </script>
                  
                  <!-- map placeholder -->
                  <div id="{$uniqueId}-map" class="map" style="height: {$map-height}px; display: none;">
                  </div>
              </xsl:template>
          

          Laurence Aumeunier added a comment - Waiting for a release version with the fix you need to override the template "display-geo-map" in your skin with following: < xsl:template name= "display-geo-map" > < xsl:variable name= "scheme" select= "substring-before($absolute-uri-prefix, '://' )" /> <script src= "{$scheme}://maps.google.com/maps/api/js?sensor=false" type= "text/javascript" > </script> <script src= "{ametys:pluginResourceURL( 'web' , 'js/jquery.gmap.js' )}" type= "text/javascript" > </script> <script src= "{ametys:pluginResourceURL( 'web' , 'js/GmapViewer.js' )}" type= "text/javascript" > </script> <script type= "text/javascript" > < xsl:comment > geocode_map_ < xsl:value-of select= "$uniqueId" /> = []; coordinates_ < xsl:value-of select= "$uniqueId" /> = {}; geocode_sorted_latlng_ < xsl:value-of select= "$uniqueId" /> = []; var pinIdx = 0, lat, lng, geocode_entry, coord_entry; < xsl:variable name= "cl" select= "count($colors/color)" /> ; < xsl:for-each select= "/search/hits/hit[latitude != '' and longitude != ' ']" > lat = String( < xsl:value-of select= "latitude" /> ); lng = String( < xsl:value-of select= "longitude" /> ); < xsl:variable name= "tooltip-title" > < xsl:call-template name= "get-tooltip-title" /> </ xsl:variable > coord_entry = coordinates_ < xsl:value-of select= "$uniqueId" /> [lat] || {}; coord_entry = coord_entry[lng]; if (!coord_entry) // no entry at the coordinates { < xsl:variable name= "pos" select= "position()" /> pinIdx++; if (!coordinates_ < xsl:value-of select= "$uniqueId" /> [lat]) { coordinates_ < xsl:value-of select= "$uniqueId" /> [lat] = {}; } coord_entry = coordinates_ < xsl:value-of select= "$uniqueId" /> [lat]; coord_entry[lng] = { number: String(pinIdx), color: ' < xsl:value-of select= "$colors/color[(($pos - 1) mod $cl)+1]" /> ' , titles: [ ' < xsl:value-of select= "ametys:escapeJS($tooltip-title)" /> ' ] }; } else { coord_entry.titles.push( ' < xsl:value-of select= "ametys:escapeJS($tooltip-title)" /> ' ); } // Keep reference to coordinates in the same order geocode_sorted_latlng_ < xsl:value-of select= "$uniqueId" /> .push([lat, lng]); </ xsl:for-each > < xsl:for-each select= "/search/hits/hit[latitude != '' and longitude != ' ']" > coord_entry = coordinates_ < xsl:value-of select= "$uniqueId" /> [String( < xsl:value-of select= "latitude" /> )][String( < xsl:value-of select= "longitude" /> )]; geocode_entry = { lat: < xsl:value-of select= "latitude" /> , lng: < xsl:value-of select= "longitude" /> , number: coord_entry.number, title: coord_entry.titles.join( '&lt;br/&gt;' ) }; geocode_map_ < xsl:value-of select= "$uniqueId" /> .push(geocode_entry); </ xsl:for-each > </ xsl:comment > </script> <!-- Allow the possibility to define the js function onAfterGmapViewerSetup via a template --> < xsl:call-template name= "display-geo-map-js-listener" /> <script type= "text/javascript" > $j(document).ready(function () { $j( '# < xsl:value-of select= "$uniqueId" /> -map' ).show(); var data = { iconBase: ' < xsl:value-of select= "ametys:absoluteUriPrefix()" /> /plugins/web/icons/map/ < xsl:value-of select= "$skin" /> /' , zoomLevel: geocode_map_ < xsl:value-of select= "$uniqueId" /> .length &gt; 0 ? 15 : < xsl:value-of select= "$default-zoom" /> , lat: (geocode_map_ < xsl:value-of select= "$uniqueId" /> [0] || {}).lat || < xsl:value-of select= "$default-coord-lat" /> , lng: (geocode_map_ < xsl:value-of select= "$uniqueId" /> [0] || {}).lng || < xsl:value-of select= "$default-coord-lng" /> , mapTypeId: google.maps.MapTypeId.ROADMAP, markers: geocode_map_ < xsl:value-of select= "$uniqueId" /> , polygons: [] }; var gmapViewer = new GmapViewer(); gmapViewer.setUp( '# < xsl:value-of select= "$uniqueId" /> -map' , data, true); // onAfterGmapViewerSetup hook. if ($j.isFunction(window.onAfterGmapViewerSetup)) { window.onAfterGmapViewerSetup(gmapViewer, geocode_sorted_latlng_ < xsl:value-of select= "$uniqueId" /> , coordinates_ < xsl:value-of select= "$uniqueId" /> ); } }); </script> <!-- map placeholder --> <div id= "{$uniqueId}-map" class= "map" style= "height: {$map-height}px; display: none;" > </div> </ xsl:template >
          Laurence Aumeunier made changes -
          Assignee New: Laurence Aumeunier [ laurence ]
          Laurence Aumeunier made changes -
          Fix Version/s New: 2.4.0 [ 12390 ]
          Laure Lopez created issue -

            laurence Laurence Aumeunier
            llopez Laure Lopez
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: