Giter VIP home page Giter VIP logo

Comments (14)

abjerner avatar abjerner commented on September 27, 2024

Just throwing this in here as a possible fix:

https://github.com/jawj/OverlappingMarkerSpiderfier

I researched it once for a project, but ended up with another solution, so I haven't used it myself. The demos appear to just use regular markers, so I'm also not sure how it will work with clusters.

from ourumbraco.

warrenbuckley avatar warrenbuckley commented on September 27, 2024

Oh neat find @abjerner I will have to look & investigate that.
Think the first thing is to fix this bug/issue & then take a look at implementing this library if that is the solution. As London has quite a few that overlap not just 2 or so

from ourumbraco.

warrenbuckley avatar warrenbuckley commented on September 27, 2024

@nul800sebastiaan the underlying issue is due to our rounding of the lat & lon it seems if I revert this on my local copy then this works fine.

Will see if I can find a solution & get this sorted whilst making sure the markers are rounded & not too precise from the API controller

from ourumbraco.

nul800sebastiaan avatar nul800sebastiaan commented on September 27, 2024

Aha.. okay cool, maybe we should add in a random fudge factor after the 2nd digit then, location will become a random spot in the 1.1km area then.

from ourumbraco.

daniel-chenery avatar daniel-chenery commented on September 27, 2024

Nothing like magic numbers to fix a problem 🤣

from ourumbraco.

nul800sebastiaan avatar nul800sebastiaan commented on September 27, 2024

Random numbers! ;-)

I mostly want to make sure we're not disclosing people's locations too much down to the centimeter.

from ourumbraco.

abjerner avatar abjerner commented on September 27, 2024

But ... two sorta-random locations may still share the same coordinates - or be really close.

I may however have a solution that I've used in the past. I can try to look into that later ;)

from ourumbraco.

nul800sebastiaan avatar nul800sebastiaan commented on September 27, 2024

You're right! I got it to work now with randomized locations but of course then this happens (and sometimes the markers are not even in the viewport any more.

mapsclusterfck

from ourumbraco.

abjerner avatar abjerner commented on September 27, 2024

Okay - so the solution I was talking works by grouping locations (or in this case members) with the exact same coordinates, and then run the latitude and longitude through the two methods below. It will do nothing for the first location (where group is zero), but the remaining locations will be placed around the original coordinates.

Here illustrated with my awesome Paint skills:

image

The methods probably needs a bit of adjustments - and technically the locations placed around the original coordinates may also overlap other locations in close proximity, so maybe we should initially group coordinates in close proximity. Again, there are a few things to take into consideration.

I'll try to play around with this (hopefully the Our test database will have sufficient data to test with).

private void AdjustLatitude(ref double latitude, int count) {

    const double factor = 0.000025;

    if (count >= 1 && count <= 2) latitude += factor;
    if (count >= 4 && count <= 6) latitude -= factor;

    if (count >= 9 && count <= 12) latitude += (2 * factor);
    if (count == 13 || count == 23) latitude += factor;

    if (count == 15 || count == 21) latitude -= factor;
    if (count >= 16 && count <= 20) latitude += (2 * factor);

}

private void AdjustLongitude(ref double longitude, int count) {

    const double factor = 0.000050;

    if (count >= 2 && count <= 4) longitude += factor;
    if (count >= 6 && count <= 8) longitude -= factor;

    if (count >= 12 && count <= 16) longitude += (2 * factor);
    if (count >= 20 && count <= 54) longitude -= (2 * factor);

    if (count == 11 || count == 17) longitude += factor;
    if (count == 9 || count == 19) longitude -= factor;

}

from ourumbraco.

abjerner avatar abjerner commented on September 27, 2024

Btw - is you GIF from London? I suddenly feel like going to BEST KEBAB 😄

Also, what tool do you use for converting a screencast to a GIF?

from ourumbraco.

nul800sebastiaan avatar nul800sebastiaan commented on September 27, 2024

Haha, yes! Send more Kebab. It's actually near where Warren lives, South-End.

Camtasia makes the gifs for me, but costs a bit of course.

from ourumbraco.

nul800sebastiaan avatar nul800sebastiaan commented on September 27, 2024

btw I've just added a max zoom level to the whole map, so we could add this as well, to uncluster at the max zoom level:

https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/src/markerclusterer.js#L338

Not sure how well your adjustments will work if just zooming in on the central point of "London" where there 166 people.

image

from ourumbraco.

warrenbuckley avatar warrenbuckley commented on September 27, 2024

I would say the original issue is fixed that avatars under the map disappeared when you zoomed in super close @nul800sebastiaan & we should close this?

Perhaps create a new issue & link back here to talk about how to improve the map UI when there are 150+ users at same location, perhaps from @abjerner suggestion/s

from ourumbraco.

nul800sebastiaan avatar nul800sebastiaan commented on September 27, 2024

This has been open for a while now and it's still a good idea but it seems like nobody has had time to pick it up.

I'll close this for now and add the idea tag so we can find it later when we have some more time to spend on this.

from ourumbraco.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.