I have a dynamic map enabled so there is a view with a Common Map instance and an attachment instance which is a standard list. Both view instances return the same results and with ajax enabled they update together nicely. This is working great.

What I'm looking for is some way to show a hover state between the two. So for example, if you were to hover over a row result in the list, the corresponding marker would do something to indicate which is the correct one, such as swap the marker icon or load the markerinfo.

I've experimented with the approach in this ticket: https://www.drupal.org/project/geolocation/issues/2852902 but am not sure how to tell a markerinfo to load up.

I've also looked at: https://www.drupal.org/project/geolocation/issues/3034216 where an anchor link zooms to the desired pin. This feature is great and I intend to use it, but it's not the same request as being able to hover.

This is something the AirBNB web site does. I'd consider it a nice feature to have, but am only really at this stage looking for advice on how to achieve outside of the modules code. Any pointers would be very welcome.

Comments

iancawthorne created an issue. See original summary.

iancawthorne’s picture

iancawthorne commented
Title: Dynamic map hover interations » Dynamic map hover interactions from another view
chris matthews’s picture

chris matthews commented
Version: 8.x-3.0-rc2 » 8.x-3.x-dev
iancawthorne’s picture

iancawthorne commented

I made some progress on this by copying js/MapFeature/geolocation-marker-scroll-to-id.js which handles the click to zoom to the pin feature, to a custom location.

Changing the click to a hover and removing the centre logic so it just does a bounce effect.

iancawthorne’s picture

iancawthorne commented
Status: Active » Closed (works as designed)
amysiano4x3’s picture

amysiano4x3 commented

Trying to implement this feature as well -from #4, do you need to create a custom module to overwrite the geolocation-marker-scroll-to-id.js or can it be placed the the custom js folder in the theme?

iancawthorne’s picture

iancawthorne commented

@4x3 I copied it into my custom theme, but I guess a custom module that includes the js file might be a better approach. Here's the contents of my file anyway in case it helps you.

(function ($, Drupal) {

  'use strict';

  /**
   * Google MarkerIcon.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches common map style functionality to relevant elements.
   */
  Drupal.behaviors.geolocationMarkerHoverAnchor = {

    attach: function (context, drupalSettings) {

      $('.geolocation-marker-hover').once('geolocation-marker-hover-anchor').hover(function (e) {

        var markerAnchor = $(this).children('h4').children('a').attr('href').split('#').pop();

        Drupal.geolocation.executeFeatureOnAllMaps(
            'marker_zoom_to_animate',

            /**
             * @param {GeolocationGoogleMap} map - Current map.
             * @param {MarkerIconSettings} featureSettings - Settings for current feature.
             */
            function (map, featureSettings) {
              $.each(map.mapMarkers, function (index, marker) {
                if (marker.locationWrapper.data('marker-zoom-anchor-id') === markerAnchor) {

                  var intialIcon = marker.icon;
                  if (intialIcon.includes('marker-price.png')) {
                    var iconHover = intialIcon.replace('marker-price.png', 'marker-price-hover.png');
                    marker.setIcon(iconHover);
                  } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                    window.setTimeout(function () {
                      marker.setAnimation(null);
                    }, 2000);
                  }
                }
              });

              return false;
            },
            drupalSettings
        );

      }, function (e) {

        var markerAnchor = $(this).children('h4').children('a').attr('href').split('#').pop();

        Drupal.geolocation.executeFeatureOnAllMaps(
            'marker_zoom_to_animate',

            /**
             * @param {GeolocationGoogleMap} map - Current map.
             * @param {MarkerIconSettings} featureSettings - Settings for current feature.
             */
            function (map, featureSettings) {
              $.each(map.mapMarkers, function (index, marker) {

                if (marker.locationWrapper.data('marker-zoom-anchor-id') === markerAnchor) {
                  var intialIcon = marker.icon;
                  if (intialIcon.includes('marker-price-hover.png')) {
                    var iconHover = intialIcon.replace('marker-price-hover.png', 'marker-price.png');
                    marker.setIcon(iconHover);
                  }

                }
              });

              return false;
            },
            drupalSettings
        );

      });

    },
    detach: function (context, drupalSettings) {}
  };

})(jQuery, Drupal);
PeterStubRaindrop’s picture

PeterStubRaindrop commented

@iancawthorne Could u share more of your code - like your templates...I'm a bit lost in jQuery.
Or maybe share a little more info - if u have the time.
Thank you very much.

iancawthorne’s picture

iancawthorne commented

No templates as such. It's all done as fields on the view instances. I think most of what you want is done in views.

There is the map view instance and then there is the list instance...

.geolocation-marker-hover is a wrapper for each list item. So when you hover on the h4 child hyperlink, the jQuery finds the corresponding anchor based on the id of the item after the # in the url.

<div class="geolocation-marker-hover views-row-1">
  <h4><a href="/currenturl#{{ nodeid }}">Item 1 name</a></h4>
</div>
<div class="geolocation-marker-hover views-row-2">
  <h4><a href="/currenturl#{{ nodeid }}">Item 2 name</a></h4>
</div>

marker-zoom-anchor-id is an attribute on each map view result which contains the node id to match up with. That is set in the map view instance under "Geolocation CommonMap | Settings". Open the GOOGLE MAPS SETTINGS and there is an option under "map features" for "Marker Zoom & Animate". Set the anchor id {{ nodeid }} here using the views tokens.

Hope that helps a bit?