A website locator can look like a small job: a map, three markers and a popup. Choosing a JavaScript library settles only part of it. The streets and labels must come from somewhere, your places need their own data, and the page needs a host. Someone also has to keep the places up to date.
Those decisions lead to three useful free routes:
| If the work is mainly… | A complete starting route | What remains yours to arrange |
|---|---|---|
| Adding a locator to a website | Leaflet + a suitable background tile service | The page, data, interactions and website hosting |
| Styling geographic information and filtering layers | MapLibre GL JS + OpenFreeMap | The page, your data and layer code, and website hosting |
| Maintaining a collection through graphical controls | uMap on a public community host | The places, descriptions, permissions and a backup |
Here is what each route supplied in a small checked example, and which conditions change the choice. Documentation, service conditions and representative browser workflows were checked on 20 October 2026. The Leaflet and MapLibre examples ran locally; they were not publicly deployed. The uMap example was a private editor workflow.
Leaflet: when the map belongs inside your page
For a page with a place list beside a map, Leaflet gives you markers, popups and the interactions between them. It does not supply a graphical place editor or a background service.
The checked pairing was Leaflet 1.9.4 with OSMF's Standard raster tile service. The service supplies finished background images; Leaflet draws the places over them. In the local example, a visitor could open a place from either a marker or the list.
Leaflet 1.9.4 supplies the markers and popup; OSMF's Standard raster service supplies the background. Local demonstration with map data © OpenStreetMap contributors, ODbL.
Map credit: © OpenStreetMap contributors, ODbL.
The Leaflet quick start covers the CSS, JavaScript, a map container with a height, and a tile layer. Its GeoJSON guide covers bringing feature properties into popups. The same format can carry a trail or boundary as well as points.
For this route, your HTML, CSS, JavaScript and data belong together on your website. Develop over HTTP too: opening an HTML file directly is a poor check when the page fetches a separate data file. To change the places, edit that file or provide your own editing workflow.
The background service has a separate contract. Under OSMF's tile-use policy, ordinary interactive viewing needs visible attribution, normal browser identification and referrers, and proper caching. Keep browser defaults. Do not suppress referrers, bypass caching, bulk-download the tiles or add offline saving. This is a best-effort service that can block access, rather than a hosting guarantee.
That pairing suits the modest example. If a project needs other traffic allowances or support, select a background provider that offers them, changing its URL and credits together. Keep a persistent link to OpenStreetMap's contributors and data licence.
MapLibre: when properties should change the drawing
The next route earns its extra setup when styling and layers are part of the project. MapLibre GL JS draws vector backgrounds in the browser from geographic features and style rules. OpenFreeMap supplies a background service to pair with it.
The local example used MapLibre GL JS 6.15.0 and OpenFreeMap's Liberty style. The places were a separate GeoJSON source and circle layer. A category property controlled their colours, while a filter selected which places remained visible.
The same collection, filtered to its Library category in MapLibre GL JS 6.15.0. Background: OpenFreeMap Liberty, © OpenMapTiles, data from OpenStreetMap. The filter is code in this local example.
Background credits: OpenFreeMap, © OpenMapTiles, data from OpenStreetMap.
The three places are the British Museum, British Library and Wellcome Collection. Selecting Libraries leaves one point; Museums leaves two. Wellcome Collection also has a library, but belongs to the museum category in this demonstration. Three points demonstrate that the styling and filtering work here; they establish nothing about large-data performance.
The official GeoJSON point and layer-filter examples explain the source/layer approach, which also supports geographic lines and polygons.
Use the current installation documentation rather than an older global-script snippet: version 6 uses ES modules and workers, and 6.15.0 requires working WebGL2. Check the background URL when borrowing an example too. Some official examples use a different provider that needs a key.
At the check date, OpenFreeMap offered its public service without an account or API key, including commercial use, and advertised no cap on ordinary map views or requests. It has no SLA. Its terms distinguish normal viewing from automated collection and offline downloads. Keep the supplied OpenMapTiles and OpenStreetMap attribution.
OpenFreeMap hosts the background. Your website still hosts the page and your places; neither service gives this route uMap's graphical editing controls.
uMap: when maintaining the collection is the main job
Code is not necessary just to keep a places guide current. uMap on OpenStreetMap France supplies a hosted editor with markers, descriptions, popups, layers and sharing settings. You can add places directly or import a file.
The same three-place collection was imported as GeoJSON into an editable layer:
Detail of the imported three-place layer in uMap France’s editor. Map data © OpenStreetMap contributors, ODbL. This is not a published visitor view.
Map credit: © OpenStreetMap contributors, ODbL.
Create a map, add or import the places, name the layer, check a popup and save. Separate layers can distinguish groups that visitors should browse independently. uMap supports CSV and several geographic formats.
On this host, an anonymous map could be saved as Draft (private) without an account. Its secret edit link is the recovery dependency: keep it safe. The inspected anonymous viewing options were private draft or public. Broader software documentation does not establish unlisted anonymous sharing on every host.
Check viewing permission and editing permission separately before publishing. The publishing guide covers public sharing and iframe embedding. With an embed, uMap hosts the map and your page contains it. Export a backup too: a full uMap backup preserves more of the project than a plain GeoJSON export of its features.
“Free” remains specific to the host and the background. OSM France's tile-service conditions require public, nonprofit use and moderate traffic, with limited tolerance for low-volume company sites. Those conditions govern background services; they are not a complete uMap hosting contract or a promise of unlimited storage and permanent hosting.
Keep the places portable, then publish the page
All three examples used approximate venue points from Wikidata's records for the British Museum, British Library and Wellcome Collection. They represent venues, rather than entrances or an itinerary. Wikidata's structured data is CC0; the background has its own credits.
Keep that information in a separate source file. CSV can hold a small list of names and coordinates. GeoJSON adds points, lines, polygons and properties, with longitude, latitude coordinate order. Direct Leaflet marker calls take latitude, longitude, so copying a pair between them needs a check.
An address column does not become a map point automatically. Supply coordinates, place markers yourself, or check a separate geocoding step. uMap's spreadsheet tutorial explains the distinction; its complete version is currently in French. Background maps also do not supply directions or live information. The free-APIs guide covers possible data and service ingredients, including postcode coordinates and route calculation.
For the two code routes, an existing static website can host the page and data. Another option is GitHub Pages, free from a public repository on GitHub Free. It needs a GitHub account, makes the page and published data public, and provides a github.io address without buying a domain.
Keep index.html, CSS, JavaScript and GeoJSON together with their relative paths intact. In Settings → Pages, choose “Deploy from a branch” and select the branch and root folder containing the page. The creation guide gives the full flow. This publishing route was documentation-checked, not deployed for these examples.
Pages has usage limits, including a 1 GB published-site limit, and is not offered to run an online business, e-commerce site or commercial SaaS. A business locator may belong on its existing business host. Later backend needs such as functions, VMs and databases are covered in the Free Compute guide; serving your page remains a different job from serving the world's background tiles.
For a small collection, the maintenance choice is quite concrete: edit through uMap's browser controls, keep a Leaflet locator in your website code, or use MapLibre layers when properties should drive appearance and filtering. Keep the source file, check each place, and preserve the credits whichever route you take.
Want to talk about something I’ve written or built? Get in touch.
This article was adapted with AI assistance from an original article on billiem.uk. The original article was reviewed before publication.
Top comments (0)