Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MuellerMatthew opened this issue May 26, 2015 · 2 comments
Open

Comments

@MuellerMatthew
Copy link

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
Copy link

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
Copy link

iKnowMagic commented Sep 22, 2020

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')
          }
        }
      })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants