AtlasMeasure

AtlasMeasure is an interactive Leaflet-based map app for searching places, measuring distances and areas, and showing the user's location.

Key Features

• Show user's location
• Place search and reverse geocoding (via local proxy to Nominatim)
• Distance measurement: user ↔ place and place ↔ place
• Area measurement: draw polygon and get km²
• Two panels (Control / Search). Only the selected panel is visible at once.
• Responsive UI for mobile and tablet

Quick Usage

• Open the app and choose a panel: Control or Search.
• Control panel:
  • Modes: Single Point, Distance, Area
  • "New Measurement" button clears previous area and markers
• Search panel:
  • Search a place or measure distance between two places
  • Results add markers/lines and show distance text
• Switching panels clears previous markers/measurements automatically

Mobile & Tablet Screenshots (place in docs/screenshots/)

• desktop.png — Desktop
• mobile.png — Mobile
• tablet.png — Tablet

Include each screenshot with a short caption in this README:

Implementation Notes

• Main files:
  • src/app/components/worldmap/worldmap.component.ts — app logic (locate, search, modes)
  • src/app/services/map.service.ts — Leaflet layer/marker/line/polygon management
  • src/app/services/location.service.ts — Nominatim requests (proxied)
  • src/app/components/control-panel/* and src/app/components/search-panel/* — UI components
• Search & reverse geocode go through the local proxy endpoint /nominatim/... to avoid CORS and set required headers.

Local Usage (development)

Follow these steps to run AtlasMeasure on your local machine:

1. Install dependencies

   npm install

2. Start the local proxy (required for Nominatim requests)

   node proxy-server.js

   • Proxy listens on port 3001 by default. Keep this running while developing.

3. Start the Angular app

   npx ng serve --open

   • The app typically opens at http://localhost:4200.

4. Allow location access in the browser

   • Geolocation works only on localhost or over https.
   • When prompted by the browser, allow location access. If you previously denied, reset site permissions in the browser settings.

5. Quick checks if geolocation fails

   • Ensure the proxy is running (step 2). Reverse geocoding/search uses http://localhost:3001/nominatim/....
   • Test network restrictions (company VPN/firewall may block location services). Try a mobile hotspot or home network.
   • For simulator testing, set a simulated location (iOS Simulator / Android Emulator).

6. Notes

   • Keep proxy-server.js running to avoid CORS and to set proper headers for Nominatim.
   • If you change proxy port or host, update src/app/services/location.service.ts URLs accordingly.