Last active
May 31, 2020 12:47
-
-
Save samgehret/f74a1c7d22afc2ca17fe4033158a7187 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title>Supplement forward geocoding search results from another data source</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' /> | |
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| .coordinates { | |
| background: rgba(0, 0, 0, 0.5); | |
| color: #fff; | |
| position: absolute; | |
| bottom: 40px; | |
| left: 10px; | |
| padding: 5px 10px; | |
| margin: 0; | |
| font-size: 11px; | |
| line-height: 18px; | |
| border-radius: 3px; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <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> | |
| <pre id='coordinates' class='coordinates'></pre> | |
| <script> | |
| mapboxgl.accessToken = | |
| 'pk.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqZWExcDdwNTAxYnEyeG1tZnQ4MTNsODkifQ.68r_UjBeRkubf5eUs4uw-g'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/streets-v11', | |
| center: [-122.3983, 37.7918], | |
| zoom: 13 | |
| }); | |
| var marker = new mapboxgl.Marker({ | |
| draggable: true | |
| }) | |
| .setLngLat([-122.3983, 37.7918]) | |
| .addTo(map); | |
| function getAroundMe(long, lat) { | |
| console.log('search input', geoCoder._inputEl.value) | |
| axios.get( | |
| `https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/tilequery/${long},${lat}.json?limit=10&radius=500&geometry=point&dedupe=true&access_token=pk.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqZWExcDdwNTAxYnEyeG1tZnQ4MTNsODkifQ.68r_UjBeRkubf5eUs4uw-g` | |
| ) | |
| .then(function (response) { | |
| if (response) { | |
| customData = response.data | |
| console.log('customn data', customData) | |
| } | |
| axios.get( | |
| `https://api.mapbox.com/geocoding/v5/mapbox.places/${long},${lat}.json?access_token=pk.eyJ1Ijoic2FtZ2VocmV0IiwiYSI6ImNqZWExcDdwNTAxYnEyeG1tZnQ4MTNsODkifQ.68r_UjBeRkubf5eUs4uw-g` | |
| ) | |
| .then(function (response2) { | |
| customData.features.unshift(response2.data.features[0]) | |
| console.log('reverse', response2.data) | |
| }) | |
| }) | |
| .catch(function (err) { | |
| console.log(err) | |
| }) | |
| } | |
| function onDragEnd() { | |
| var lngLat = marker.getLngLat(); | |
| coordinates.style.display = 'block'; | |
| coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat; | |
| getAroundMe(lngLat.lng, lngLat.lat) | |
| } | |
| function reverseGeocoder(query) { | |
| var allFeatures = [] | |
| if (geoCoder._inputEl.value.length > 1) { | |
| allFeatures = [] | |
| } else { | |
| console.log(customData) | |
| if (customData.features) { | |
| for (var i = 0; i < customData.features.length; i++) { | |
| if (i === 0) { | |
| console.log('address', customData.features[i]) | |
| var feature = customData.features[i] | |
| feature['place_name'] = feature.place_name; | |
| feature['center'] = feature.center; | |
| feature['place_type'] = ['address']; | |
| allFeatures.push(feature); | |
| } else { | |
| if ((customData.features[i].properties.tilequery.layer === "poi_label" || customData | |
| .features[i].properties.tilequery.layer === "natural_label") && customData.features[ | |
| i].properties.name) { | |
| var feature = customData.features[i]; | |
| // handle queries with different capitalization than the source data by calling toLowerCase() | |
| // console.log(feature) | |
| // add a tree emoji as a prefix for custom data results | |
| // using carmen geojson format: https://github.com/mapbox/carmen/blob/master/carmen-geojson.md | |
| feature['place_name'] = '🏢 ' + feature.properties.name; | |
| feature['center'] = feature.geometry.coordinates; | |
| feature['place_type'] = ['park']; | |
| allFeatures.push(feature); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| return allFeatures; | |
| } | |
| marker.on('dragend', onDragEnd); | |
| let geoCoder = new MapboxGeocoder({ | |
| accessToken: mapboxgl.accessToken, | |
| localGeocoder: reverseGeocoder, | |
| zoom: 14, | |
| placeholder: "Enter search e.g. Lincoln Park", | |
| mapboxgl: mapboxgl, | |
| minLength: 0 | |
| }) | |
| map.addControl(geoCoder); | |
| var customData | |
| map.on('load', function () { | |
| getAroundMe(-122.3983, 37.7918) | |
| var geocoderRev = document.querySelector(".mapboxgl-ctrl-geocoder") | |
| var closeButton = document.querySelector(".geocoder-icon-close") | |
| geocoderRev.addEventListener("click", function () { | |
| geoCoder._geocode(' ') | |
| }) | |
| closeButton.addEventListener("click", function () { | |
| console.log('XXX') | |
| allFeatures = [] | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great work man! I try since long hours to adaptate your code to obtain a draggable marker after search location... But I don't manage... Do u have a solution?