Geocoding Control

The MapTiler Geocoding control module for MapTiler SDK, MapLibre GL JS and Leaflet utilizes MapTiler Cloud Geocoding API. With this control, users of your application can find any place on Earth (States, Cities, Streets, …) down to the address level and POIs, restrict the search area to a specific country, highlight searched results on the map, autocomplete words while typing, and much more.

The component can be used as an ES module or UMD module.

Geocoding control is also provided as React component and Svelte component.

Get started




API Reference



This reference documents every object and method available. Each section describes classes or objects as well as their properties, parameters, methods, and associated events. Many sections also include inline code examples and related resources.




    




Usage



Choose how you would like to integrate the Geocoding control. See code examples of how to use the Geocoding control with different map libraries and Javascript frameworks:




    




UMD global variables



If you import script from CDN using <script src="https://cdn.maptiler.com/maptiler-geocoding-control/v${version}/${Script filename}"></script> then it creates a global variable according to the following table:




  
    

      Script filename
      UMD global variable name
      Exports
    

  
  
    

      leaflet.umd.js
      leafletMaptilerGeocoder
      class GeocodingControl,function createLeafletMapController
    

    

      maplibregl.umd.js
      maplibreglMaptilerGeocoder
      class GeocodingControl, function createMapLibreGlMapController
    

    

      maptilersdk.umd.js
      maptilersdkMaptilerGeocoder
      class GeocodingControl, function createMapLibreGlMapController
    

    

      openlayers.umd.js
      openlayersMaptilerGeocoder
      class GeocodingControl, function createOpenLayersMapController
    

    

      react.umd.js
      reactMaptilerGeocoder
      class GeocodingControl
    

    

      vanilla.umd.js
      maptilerGeocoder
      class GeocodingControl
    

    

      leaflet-controller.umd.js
      leafletMaptilerGeocodingController
      function createLeafletMapController
    

    

      maplibregl-controller.umd.js
      maplibreglMaptilerGeocodingController
      function createMapLibreGlMapController
    

    

      openlayers-controller.umd.js
      openlayersMaptilerGeocodingController
      function createOpenLayersMapController
    

  




The variable is an object with properties representing library-exported variables, for example maplibreglMaptilerGeocoder.GeocodingControl.




  
    
    
  • alternatively you can use different CDN, for example https://www.unpkg.com/@maptiler/geocoding-control@${version}/${Script filename}
    • 
    
  • replace `${version}` with the desired library version and ${Script filename} with the script filename from the table above.
    • 
  





About Geocoding control



Graphical component for the Geocoding control in your map application (MapTiler SDK, Leaflet, MapLibre and more).



Here are some features:



    
  
  • autocomplete words while typing
    • 
  
  • restrict the search area to a specific country
    • 
  
  • highlight searched results on the map
    • 
  
  • search results closer to a given point
    • 
  
  • restrict the search area to a specific bounding box.
    • 
  
  • filter of feature types to return
    • 
  
  • specify the language(s) to use for response text and query result weighting
    • 
  
  • included in your FREE MapTiler Cloud plan!
    • 




POI icons and bundlers



POI icons are served from CDN per default. If there is an requirement to serve them from a different location and the control is used in the application which is build with Web Application bundler (like Webpack or Vite) then it is necessary to do some extra configuration. Icons are bundled in the library and you can find them in node_modules/@maptiler/geocoding-control/icons. Configure your bundler and/or provide iconsBaseUrl option for the icons to be properly resolved. You can also copy icons from that directory to your public directory.