react-map-gl-geocoder/dist/index.modern.js

React wrapper for mapbox-gl-geocoder for use with react-map-gl

import{PureComponent as e}from"react";import o from"prop-types";import t from"@mapbox/mapbox-gl-geocoder";import{FlyToInterpolator as r}from"react-map-gl";import n from"viewport-mercator-project";import i from"mapbox-gl";const s=["top-left","top-right","bottom-left","bottom-right"];class l extends e{constructor(...e){super(...e),this.geocoder=null,this.cachedResult=null,this.initializeGeocoder=()=>{const e=this.getMapboxMap(),o=this.getContainerNode(),{mapboxApiAccessToken:r,inputValue:n,origin:l,zoom:a,placeholder:c,proximity:h,trackProximity:d,collapsed:u,clearAndBlurOnEsc:p,clearOnBlur:g,bbox:m,types:b,countries:f,minLength:x,limit:R,language:y,filter:C,localGeocoder:E,localGeocoderOnly:v,reverseGeocode:G,enableEventLogging:w,marker:L,render:z,getItemValue:O,onInit:k,position:I}=this.props,M={accessToken:r,origin:l,zoom:a,flyTo:!1,placeholder:c,proximity:h,trackProximity:d,collapsed:u,clearAndBlurOnEsc:p,clearOnBlur:g,bbox:m,types:b,countries:f,minLength:x,limit:R,language:y,filter:C,localGeocoder:E,localGeocoderOnly:v,reverseGeocode:G,enableEventLogging:w,marker:L,mapboxgl:i};z&&"function"==typeof z&&(M.render=z),O&&"function"==typeof O&&(M.getItemValue=O),this.geocoder=new t(M),this.subscribeEvents(),o?o.appendChild(this.geocoder.onAdd(e)):e.addControl(this.geocoder,s.find(e=>I===e)),null!=n?this.geocoder.setInput(n):this.cachedResult&&this.geocoder.setInput(this.cachedResult.place_name),(this.cachedResult||null!=n)&&this.showClearIcon(),k(this.geocoder)},this.showClearIcon=()=>{this.geocoder._clearEl.style.display="block"},this.getMapboxMap=()=>{const{mapRef:e}=this.props;return e&&e.current&&e.current.getMap()||null},this.getContainerNode=()=>{const{containerRef:e}=this.props;return e&&e.current||null},this.subscribeEvents=()=>{this.geocoder.on("clear",this.handleClear),this.geocoder.on("loading",this.handleLoading),this.geocoder.on("results",this.handleResults),this.geocoder.on("result",this.handleResult),this.geocoder.on("error",this.handleError)},this.unsubscribeEvents=()=>{this.geocoder.off("clear",this.handleClear),this.geocoder.off("loading",this.handleLoading),this.geocoder.off("results",this.handleResults),this.geocoder.off("result",this.handleResult),this.geocoder.off("error",this.handleError)},this.removeGeocoder=()=>{const e=this.getMapboxMap();this.unsubscribeEvents(),e&&e.removeControl&&this.getMapboxMap().removeControl(this.geocoder),this.geocoder=null},this.handleClear=()=>{this.cachedResult=null,this.props.onClear()},this.handleLoading=e=>{this.props.onLoading(e)},this.handleResults=e=>{this.props.onResults(e)},this.handleResult=e=>{const{result:o}=e,{onViewportChange:t,onResult:i}=this.props,{bbox:s,center:l,properties:a={}}=o,{short_code:c}=a,[h,d]=l,u={fr:{name:"France",bbox:[[-4.59235,41.380007],[9.560016,51.148506]]},us:{name:"United States",bbox:[[-171.791111,18.91619],[-66.96466,71.357764]]},ru:{name:"Russia",bbox:[[19.66064,41.151416],[190.10042,81.2504]]},ca:{name:"Canada",bbox:[[-140.99778,41.675105],[-52.648099,83.23324]]}},{width:p,height:g}=this.getMapboxMap().getContainer().getBoundingClientRect();let m=this.geocoder.options.zoom;const b=(e,o)=>new n(o).fitBounds(e);try{!u[c]&&s?m=b([[s[0],s[1]],[s[2],s[3]]],{width:p,height:g}).zoom:u[c]&&(m=b(u[c].bbox,{width:p,height:g}).zoom)}catch(e){console.warn("following result caused an error when trying to zoom to bbox: ",o),m=this.geocoder.options.zoom}t({longitude:h,latitude:d,zoom:m,transitionInterpolator:new r,transitionDuration:3e3}),i(e),this.cachedResult=o,this.geocoder._typeahead.selected=null,this.showClearIcon()},this.handleError=e=>{this.props.onError(e)}}componentDidMount(){this.initializeGeocoder()}componentWillUnmount(){this.removeGeocoder()}componentDidUpdate(){this.removeGeocoder(),this.initializeGeocoder()}getGeocoder(){return this.geocoder}render(){return null}}l.propTypes={mapRef:o.object.isRequired,containerRef:o.object,onViewportChange:o.func,mapboxApiAccessToken:o.string.isRequired,inputValue:o.string,origin:o.string,zoom:o.number,placeholder:o.string,proximity:o.object,trackProximity:o.bool,collapsed:o.bool,clearAndBlurOnEsc:o.bool,clearOnBlur:o.bool,bbox:o.array,types:o.string,countries:o.string,minLength:o.number,limit:o.number,language:o.string,filter:o.func,localGeocoder:o.func,localGeocoderOnly:o.bool,reverseGeocode:o.bool,enableEventLogging:o.bool,marker:o.oneOfType([o.bool,o.object]),render:o.func,getItemValue:o.func,position:o.oneOf(s),onInit:o.func,onClear:o.func,onLoading:o.func,onResults:o.func,onResult:o.func,onError:o.func},l.defaultProps={onViewportChange:()=>{},origin:"https://api.mapbox.com",zoom:16,placeholder:"Search",trackProximity:!1,collapsed:!1,clearAndBlurOnEsc:!1,clearOnBlur:!1,minLength:2,limit:5,reverseGeocode:!1,enableEventLogging:!0,marker:!0,position:"top-right",onInit:()=>{},onClear:()=>{},onLoading:()=>{},onResults:()=>{},onResult:()=>{},onError:()=>{}};export default l;
//# sourceMappingURL=index.modern.js.map