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

Make NEU Location Marker Interactive - No JS Solution #40

Open
iAnonymous3000 opened this issue Oct 26, 2024 · 1 comment
Open

Make NEU Location Marker Interactive - No JS Solution #40

iAnonymous3000 opened this issue Oct 26, 2024 · 1 comment
Labels
to be confirmed Issues under consideration for development

Comments

@iAnonymous3000
Copy link
Member

Replace the static "NEU" text on our world map with a simple, clickable element that opens location in various map apps (OpenStreetMap, OsmAnd, etc.).

Proposed Solution

Use CSS-only dropdown menu for the NEU marker:

<div class="map-marker">
    <span>NEU</span>
    <div class="map-links">
        <a href="https://www.openstreetmap.org/?mlat=42.3398&mlon=-71.0892">OpenStreetMap</a>
        <a href="https://osmand.net/map#11/42.3398/-71.0892">OsmAnd</a>
        <a href="https://organicmaps.app/?v=1&dv=1&ll=42.3398,-71.0892&z=15">Organic Maps</a>
    </div>
</div>
  • Simple hover/focus effect to show map options
  • Maintains current minimalist design
  • Works without JavaScript
  • Accessible via keyboard
  • Mobile-friendly

Technical Notes

  • Pure HTML/CSS implementation
  • Uses :hover and :focus-within for interaction
  • Opens in new tab with target="_blank"
  • Requires minimal CSS changes

Thoughts on this approach? We can explore alternatives or expand on specific aspects if needed.

@Parthiv-M Parthiv-M added the to be confirmed Issues under consideration for development label Oct 27, 2024
@taivlam
Copy link

taivlam commented Dec 12, 2024

This would be helpful (though not a complete deal-breaker) if a user happens to be using Tor Browser on the Medium or High security slider settings; where JS is extremely limited or completely unavailable - just something to keep in mind (though, on the other hand, I don't imagine the majority of your site traffic to be from Tor Browser users).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
to be confirmed Issues under consideration for development
Projects
None yet
Development

No branches or pull requests

3 participants