All skills
mapbox avatar

/mapbox-search-integration

@65bab68 official
by mapboxmapbox/mapbox-agent-skills80 stars
17

Complete workflow for implementing Mapbox search in applications - from discovery questions to production-ready integration with best practices

Use this Skill: https://skilld.dev/gh/mapbox/mapbox-agent-skills/mapbox-search-integration

This session only. Nothing lands on disk.

referencesandroid-search.md

≈1.1k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Android: Search SDK for Android

Option 1: Search SDK with UI (Easiest)

When to use: Android app, want pre-built search UI, fastest implementation

Installation:

// Add to build.gradle
dependencies {
    implementation 'com.mapbox.search:mapbox-search-android-ui:2.0.0'
    implementation 'com.mapbox.maps:android:11.0.0'
}

Complete implementation with built-in UI:

import com.mapbox.search.ui.view.SearchBottomSheetView
import com.mapbox.maps.MapView

class SearchActivity : AppCompatActivity() {
    private lateinit var searchView: SearchBottomSheetView
    private lateinit var mapView: MapView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_search)

        mapView = findViewById(R.id.map_view)

        // SearchBottomSheetView provides complete UI automatically
        searchView = findViewById(R.id.search_view)
        searchView.initializeSearch(
            savedInstanceState,
            SearchBottomSheetView.Configuration()
        )

        // Handle result selection
        searchView.addOnSearchResultClickListener { searchResult ->
            // SDK handled all the search interaction
            val coordinate = searchResult.coordinate

            mapView.getMapboxMap().flyTo(
                CameraOptions.Builder()
                    .center(Point.fromLngLat(coordinate.longitude, coordinate.latitude))
                    .zoom(15.0)
                    .build()
            )

            searchView.hide()
        }
    }
}

Option 2: Search SDK Core (Custom UI)

When to use: Need custom UI, integrate with SearchView, full control over UX

Complete implementation:

import com.mapbox.search.SearchEngine
import com.mapbox.search.SearchEngineSettings
import com.mapbox.search.SearchOptions
import com.mapbox.maps.MapView

class SearchActivity : AppCompatActivity() {
    private lateinit var searchEngine: SearchEngine
    private lateinit var mapView: MapView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Initialize Search Engine (SDK handles debouncing and session tokens)
        searchEngine = SearchEngine.createSearchEngine(
            SearchEngineSettings("YOUR_MAPBOX_TOKEN")
        )

        setupSearchView()
        setupMap()
    }

    private fun setupSearchView() {
        val searchView = findViewById<SearchView>(R.id.search_view)

        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
            override fun onQueryTextSubmit(query: String): Boolean {
                performSearch(query)
                return true
            }

            override fun onQueryTextChange(newText: String): Boolean {
                if (newText.length >= 2) {
                    // Search SDK handles debouncing automatically
                    performSearch(newText)
                }
                return true
            }
        })
    }

    private fun performSearch(query: String) {
        val options = SearchOptions(
            countries = listOf("US"),
            limit = 5
        )

        searchEngine.search(query, options) { results ->
            results.onSuccess { searchResults ->
                displayResults(searchResults)
            }.onFailure { error ->
                Log.e("Search", "Error: $error")
            }
        }
    }

    private fun displayResults(results: List<SearchResult>) {
        // Display in custom RecyclerView
        handleResultSelection(results[0])
    }

    private fun handleResultSelection(result: SearchResult) {
        val coordinate = result.coordinate

        mapView.getMapboxMap().flyTo(
            CameraOptions.Builder()
                .center(Point.fromLngLat(coordinate.longitude, coordinate.latitude))
                .zoom(15.0)
                .build()
        )
    }
}

Option 3: Direct API Integration (Advanced)

When to use: Very specific requirements, server-side Android backend

Important: Only use if SDK doesn't meet your needs. You must handle debouncing and session tokens manually.

// Direct API calls - see Web direct API example
// Not recommended for Android - use Search SDK instead

Source: SKILL.md on GitHub

No alerts15d5 checks · Risk SAFE
  • Gen Agent Trust Hub15d

    The mapbox-search-integration skill is a professional implementation guide for Mapbox search services. It adheres to security best practices, uses official Mapbox SDKs and APIs, and provides clear guidance on secure credential handling.

  • Socket15d

    No alerts

  • Snyk15d

    Risk: LOW · No issues

  • Runlayer6mo

    1/1 file flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at 65bab68. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 10 hours ago.

Activeupdated 6 months ago
  • API
  • React
  • mapbox
  • search
  • geocoding
  • location
  • web
  • ios
  • android
  • autocomplete

README badge

README badge for mapbox/mapbox-agent-skills/mapbox-search-integration

Guides implementation of Mapbox search through discovery questions, product selection, and production-ready integration patterns. Covers Search Box API for interactive address and POI search, Geocoding API for batch geocoding, and platform-specific SDKs for web, React, iOS, and Android.

Generated from the current SKILL.md.

Should I use the Search Box API or Geocoding API?
Use Search Box API for all interactive/user-facing search, including address search, autocomplete, and POI search. Use Geocoding API only for batch server-side geocoding or maintaining an existing Geocoding API integration.
What's the difference between Search JS React, Search JS Web, and Search JS Core?
Search JS React is a React library with built-in UI (easiest for React apps). Search JS Web is a Web Components library with UI for vanilla JS. Search JS Core is a JavaScript wrapper for the API where you build your own UI.
Do I need to implement debouncing and session tokens?
Yes. Debouncing (300ms recommended) reduces API calls during typing, and session tokens are required for proper billing on every suggest/retrieve request in interactive flows.
Which platform SDK should I use?
Use Mapbox Search JS for web apps (with React/Web/Core variants), Search SDK for iOS for native iOS apps, and Search SDK for Android for native Android apps. Avoid direct API calls in favor of SDKs to handle debouncing and session management automatically.
What geographic filtering options are available?
You can use the country parameter for single/multiple countries, bbox parameter for bounding box constraints, and proximity parameter for location-based filtering.

Generated from the current SKILL.md. These answers refresh after source changes.