jawj / OverlappingMarkerSpiderfier-Leaflet

Deals with overlapping markers in the Leaflet maps API, Google Earth-style
253 stars 68 forks source link

adjust the opacity/visibility of unspiderified markers on click #18

Open MuellerMatthew opened 9 years ago

MuellerMatthew commented 9 years ago

I think one enhancement to this plugin which would greatly improve usability is to have the plugin set all of the markers which are not being spiderified as opaque when the spiderify function is called so that when the markers are moved outward and covering up other nearby markers it is still easy to tell which markers are the spiderified markers. This is especially useful for maps with a lot of marker on the screen.

SvenDhaens commented 9 years ago

No idea how to implement permanently, but currently I manage like this:

I am using MarkerWithLabel class from http://sc.tvh.com/js/geomaps/markerwithlabel.js. for those kind of markers this works fine.

oms.addListener('spiderfy', function (markers,other) { //what happens when spiderify is triggered iw.close(); other.forEach(function (non_selected_markers) { non_selected_markers.setOptions({ labelStyle:{opacity: 0.2} }); non_selected_markers.setOptions({ opacity: 0.2 }); }); }); oms.addListener('unspiderfy', function (markers, other) { //what happens when spiderify is closed other.forEach(function (non_selected_markers) { non_selected_markers.setOptions({ opacity: 1 }); non_selected_markers.setOptions({ labelStyle: { opacity: 1 } }); });

        });
iKnowMagic commented 3 years ago

Here is how I set the markers that are not spiderfied to a lower opacity than the rest.

oms.addListener('spiderfy', (smarkers, umarkers) => {
       // do something with the spiderfied markers
        for (const smarker of smarkers) {

        }

        // do something with the unspiderfied markers
        for (const umarker of umarkers) {
          if (umarker && umarker._icon && umarker._icon.style) {
            umarker._icon.style.opacity = 0.1
          }
        }
      })
      oms.addListener('unspiderfy', (smarkers, umarkers) => {
        for (const smarker of smarkers) {

        }
        for (const umarker of umarkers) {
          if (umarker && umarker._icon && umarker._icon.style) {
            umarker._icon.style.opacity = 1
          }
        }
      })

It may be easier to add classes to both spiderfied and unspiderfied markers:

oms.addListener('spiderfy', (smarkers, umarkers) => {
        for (const smarker of smarkers) {
          if (smarker && smarker._icon) {
            smarker._icon.classList.add('spiderfied')
          }
        }
        for (const umarker of umarkers) {
          if (umarker && umarker._icon) {
            umarker._icon.classList.add('unspiderfied')
          }
        }
      })
      oms.addListener('unspiderfy', (smarkers, umarkers) => {
        for (const smarker of smarkers) {
          if (smarker && smarker._icon) {
            smarker._icon.classList.remove('spiderfied')
          }
        }
        for (const umarker of umarkers) {
          if (umarker && umarker._icon) {
            umarker._icon.classList.remove('unspiderfied')
          }
        }
      })