leaflet - Custom Mapbox Geocoder Control -
i felt simple task google / stackoverflow search for, can't seem find on topic... anyways, want create own geocoder search bar works outside of mapbox map.
for instance, take zillow homepage. when visit homepage, not yet on map. can enter zip code search bar provided, press enter (or button), , map appears, centering on zip code provided.
i looking same thing. on homepage, want have simple zip code input , button click triggers map appear , center on zip code provided.
can provide insight on how achieve this? thank much!
if show mapbox geocoder results not in conjunction 1 of maps, violate mapbox terms of service. explain why there no independent libraries doing so.
but describe doesn't sound run afoul of tos , should simple, though highly dependent on how homepage implemented.
check out jsfiddle simple example: https://jsfiddle.net/7tf8dfl5/19/
l.mapbox.accesstoken = 'pk.yourmapboxaccesstokengoeshere'; var geocoder = l.mapbox.geocoder('mapbox.places'), map = null; function showmap(err, data) { // geocoder can return area, city, or // point, address. here handle both cases, // fitting map bounds area or zooming point. if (!map) { map = l.mapbox.map('map', 'mapbox.streets'); } if (data.lbounds) { map.fitbounds(data.lbounds); } else if (data.latlng) { map.setview([data.latlng[0], data.latlng[1]], 13); } } function geocodethis() { var text = document.getelementbyid('search').value; if (text.length >= 5) { geocoder.query(text, showmap); } }
<div id='map'></div> <input type='text' oninput='geocodethis()' id='search'>
this based on this mapbox.js example.
Comments
Post a Comment