Skip to content

Make NEU Location Marker Interactive - No JS Solution #40

@iAnonymous3000

Description

@iAnonymous3000

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    to be confirmedIssues under consideration for development

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions