Overview

This web app allows users to search for places in the Netherlands, view them on an interactive map, and locate their current position using GPS. It is built with Leaflet.js and OpenStreetMap data.

Main Features

1. Search for a Place

• At the top of the page is a search bar labeled “Search a place…”.
• Type the name of a location in the Netherlands (e.g. Amsterdam, Utrecht).
• After typing at least two letters, a list of suggestions will appear.
• Click on a suggestion to:
  • Zoom to that location on the map.
  • Place a marker on it.
  • Show the full location name in the search field.

2. Locate Me Button

• Click the blue circular button next to the search bar (📍 icon).
• The app will ask for permission to use your current location.
• After permission is granted:
  • A marker will appear on your location.
  • The map will center and zoom in on your position.
• If the location cannot be retrieved, a message appears: “Could not get your location.”

3. Map Interaction

• The map uses OpenStreetMap tiles.
• You can zoom in/out using the mouse wheel or pinch gesture (on mobile).
• You can drag the map to explore other areas.
• Each new search or location action replaces the previous marker.

Technical Details

Component	Description
Library	Leaflet.js
Map Tiles	OpenStreetMap
Geocoding	Nominatim API
Languages	HTML, CSS, JavaScript

Code Structure

Section	Purpose
HTML	Defines layout: search bar, button, and map container
CSS	Handles design and responsiveness for desktop & mobile
JavaScript	Controls map creation, autocomplete, and GPS location

Mobile Usage

On mobile devices, the map automatically adjusts to a square layout. All controls work via touch.

Troubleshooting

Issue	Possible Cause	Solution
Map not displayed	No internet or blocked scripts	Check your connection and allow map scripts
Search not working	Nominatim request failed	Try again or check your browser’s network access
“Could not get your location”	Location access denied or GPS off	Allow location in browser settings or enable GPS
No suggestions shown	Query too short	Type at least 2 characters

Privacy

Your location is used only temporarily in your browser. No data is stored or shared, except search queries sent to OpenStreetMap Nominatim for place name results.

Developer Customization

Change search region:

fetch(`https://nominatim.openstreetmap.org/search?format=json&q=$

{encodeURIComponent(query + ', Netherlands')}`)

Replace Netherlands with another country (e.g. Belgium).

Change default map view:

var map = L.map('map').setView([52.1, 5.3], 7);

Adjust the coordinates (latitude, longitude) and zoom level.