Skip to content

Commit 3f9067a

Browse files
MichaelKreilMichaelKreil
committed
feat: add Geocoder example
1 parent 4948e99 commit 3f9067a

3 files changed

Lines changed: 74 additions & 0 deletions

File tree

‎playground/geocoder/code.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
6+
<!-- Load MapLibre GL JS -->
7+
<script src="https://tiles.versatiles.org/assets/lib/maplibre-gl/maplibre-gl.js"></script>
8+
<link href="https://tiles.versatiles.org/assets/lib/maplibre-gl/maplibre-gl.css" rel="stylesheet" />
9+
<!-- Load MapLibre GL Geocoder plugin -->
10+
<script src="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.9.0/dist/maplibre-gl-geocoder.js"></script>
11+
<link rel="stylesheet" href="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.9.0/dist/maplibre-gl-geocoder.css" />
12+
</head>
13+
14+
<body>
15+
<!-- Define the map container -->
16+
<div id="map" style="height:100vh"></div>
17+
18+
<!-- Initialize the map -->
19+
<script>
20+
// add the MapLibre GL RTL text plugin for proper rendering of right-to-left languages
21+
maplibregl.setRTLTextPlugin('./assets/lib/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js', true);
22+
23+
// start the map with a standard VersaTiles style
24+
const map = new maplibregl.Map({
25+
container: 'map', // id of the container to render the map in
26+
style: 'https://tiles.versatiles.org/assets/styles/colorful/style.json',
27+
bounds: [-4, 41, 25, 57], // set the initial map bounds
28+
});
29+
30+
// add address search control powered by Photon
31+
const geocoder = new MaplibreGeocoder({
32+
forwardGeocode: async (config) => {
33+
const url = `https://geocode.versatiles.org/api?q=${encodeURIComponent(config.query)}&limit=5`;
34+
const geojson = await (await fetch(url)).json();
35+
36+
geojson.features.forEach((f) => {
37+
const { name, city, country } = f.properties;
38+
f.place_name = [name, city, country].filter(Boolean).join(', ');
39+
f.place_type = ['place'];
40+
f.center = f.geometry.coordinates;
41+
});
42+
43+
return geojson;
44+
},
45+
}, { maplibregl, marker: false });
46+
47+
map.addControl(geocoder, 'top-left');
48+
</script>
49+
</body>
50+
51+
</html>

‎playground/geocoder/text.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Geocoder Plugin Example
3+
description: Add address search to the map.
4+
---
5+
6+
This example shows how to turn a **MapLibre GL JS** basemap into a fully search‑able map using **maplibre‑gl‑geocoder** plugin and a Photon geocoding backend that we host at `https://geocode.versatiles.org`.
7+
8+
### Why Photon + maplibre‑gl‑geocoder?
9+
10+
* **Photon** is an open‑source geocoder built on OpenStreetMap data. It returns GeoJSON, which makes it trivial to wire into MapLibre.
11+
* **maplibre‑gl‑geocoder** adds a polished search UI that drops straight into the MapLibre control bar.
12+
13+
### Further reading
14+
15+
- **Plugin source:** <https://github.com/maplibre/maplibre-gl-geocoder>
16+
- **Plugin docs:** <https://maplibre.org/maplibre-gl-geocoder/>
17+
- **Photon project:** <https://github.com/komoot/photon>

‎playground/toc.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,11 @@ export default [
1717
'add-marker',
1818
'add-geojson'
1919
]
20+
},
21+
{
22+
title: 'Adding UI Controls',
23+
examples: [
24+
'geocoder'
25+
]
2026
}
2127
] as const satisfies TOC;

0 commit comments

Comments
 (0)