Mapbox-gl-geocoder v4 examples

docs/pages/example/mapbox-gl-geocoder-custom-render.html

@@ -0,0 +1,30 @@
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.0.0/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.0.0/mapbox-gl-geocoder.css' type='text/css' />
+<style>
+.result{
+    font-style: italic;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    color: gray;
+}
+</style>
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    center: [-79.4512, 43.6568],
+    zoom: 13
+});
+
+var geocoder = new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken,
+    render: function(item){
+        // add a custom render function that shows an icon in the dropdown menu
+        var maki = item.properties.maki || 'marker';
+        return `<span class='result'><img src='https://unpkg.com/@mapbox/[email protected]/icons/${marker}-11.svg'>${item.place_name}</span>`
+    }
+});
+map.addControl(geocoder);
+
+</script>

docs/pages/example/mapbox-gl-geocoder-custom-render.js

@@ -0,0 +1,13 @@
+/*---
+title: Add a custom render function to a geocoder
+description: >-
+  Use the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  control to search for places using Mapbox Geocoding API, and render the matching 
+  places in a customized way.
+tags:
+  - geocoder
+pathname: /mapbox-gl-js/example/mapbox-gl-geocoder-custom-render/
+---*/
+import Example from '../../components/example';
+import html from './mapbox-gl-geocoder-custom-render.html';
+export default Example(html);

docs/pages/example/mapbox-gl-geocoder-proximity-bias.html

@@ -11,21 +11,9 @@
 });
 
 var geocoder = new MapboxGeocoder({
-    accessToken: mapboxgl.accessToken
+    accessToken: mapboxgl.accessToken,
+    trackProximity: true
 });
 map.addControl(geocoder);
 
-map.on('load', updateGeocoderProximity); // set proximity on map load
-map.on('moveend', updateGeocoderProximity); // and then update proximity each time the map moves
-
-function updateGeocoderProximity() {
-    // proximity is designed for local scale, if the user is looking at the whole world,
-    // it doesn't make sense to factor in the arbitrary centre of the map
-    if (map.getZoom() > 9) {
-        var center = map.getCenter().wrap(); // ensures the longitude falls within -180 to 180 as the Geocoding API doesn't accept values outside this range
-        geocoder.setProximity({ longitude: center.lng, latitude: center.lat });
-    } else {
-        geocoder.setProximity(null);
-    }
-}
 </script>

docs/pages/example/mapbox-gl-geocoder-with-language.html

@@ -0,0 +1,19 @@
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.0.0/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.0.0/mapbox-gl-geocoder.css' type='text/css' />
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    center: [-79.4512, 43.6568],
+    zoom: 13
+});
+
+var geocoder = new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken,
+    language: 'de-DE'
+});
+map.addControl(geocoder);
+
+</script>

docs/pages/example/mapbox-gl-geocoder-with-language.js

@@ -0,0 +1,12 @@
+/*---
+title: Localize the geocoder to a given language
+description: >-
+  Localize the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  to set the UI language and improve result relevance in that language.
+tags:
+  - geocoder
+pathname: /mapbox-gl-js/example/mapbox-gl-geocoder-with-language/
+---*/
+import Example from '../../components/example';
+import html from './mapbox-gl-geocoder-with-language.html';
+export default Example(html);

docs/pages/example/point-from-geocoder-result.html

@@ -13,7 +13,12 @@
     container: 'map',
     style: 'mapbox://styles/mapbox/streets-v9',
     center: [-79.4512, 43.6568],
-    zoom: 13
+    zoom: 13,
+    addToMap: true,
+    markerOptions: {
+        color: 'orange',
+        draggable: true
+    }
 });
 
 var geocoder = new MapboxGeocoder({
@@ -22,31 +27,4 @@
 
 map.addControl(geocoder);
 
-// After the map style has loaded on the page, add a source layer and default
-// styling for a single point.
-map.on('load', function() {
-    map.addSource('single-point', {
-        "type": "geojson",
-        "data": {
-            "type": "FeatureCollection",
-            "features": []
-        }
-    });
-
-    map.addLayer({
-        "id": "point",
-        "source": "single-point",
-        "type": "circle",
-        "paint": {
-            "circle-radius": 10,
-            "circle-color": "#007cbf"
-        }
-    });
-
-    // Listen for the `result` event from the MapboxGeocoder that is triggered when a user
-    // makes a selection and add a symbol that matches the result.
-    geocoder.on('result', function(ev) {
-        map.getSource('single-point').setData(ev.result.geometry);
-    });
-});
 </script>