mapbox/mapbox-search-integration

mapbox/mapbox-search-intégration

Workflow complet pour intégrer la recherche Mapbox dans vos applications - des questions de découverte à une intégration prête pour la production avec les meilleures pratiques

Questions de découverte

Avant de commencer l'intégration, posez les questions suivantes pour mieux comprendre le contexte :

• Quel type de recherche souhaitez-vous implémenter ? (adresse, lieu, catégorie, etc.)
• Quelle plateforme ciblez-vous ? (web, iOS, Android, backend)
• Avez-vous déjà une clé API Mapbox ?
• Quelles sont les exigences de performances et de précision ?
• Voulez-vous utiliser le SDK Mapbox GL ou une API REST ?

Configuration initiale

1. Obtenir une clé API Mapbox :

   • Rendez-vous sur mapbox.com
   • Créez un compte ou connectez-vous
   • Générez un token d'accès public (pk.* ou sk.*)

2. Installer les dépendances (selon la plateforme) :

   • Web : npm install mapbox-gl @mapbox/search-js-core
   • React : npm install @mapbox/search-js-react
   • Node.js : npm install @mapbox/search-js-node

3. Configurer l'environnement :

   MAPBOX_ACCESS_TOKEN=pk.votre_token_ici
   

Intégration prête pour la production

1. Recherche d'adresse (géocodage)

Exemple avec l'API REST Mapbox Search :

import { SearchBox } from '@mapbox/search-js-core';

const search = new SearchBox({ accessToken: process.env.MAPBOX_ACCESS_TOKEN });
const results = await search.search('123 rue de Paris');
console.log(results);

Exemple avec React :

import { SearchBox } from '@mapbox/search-js-react';

function App() {
  const handleRetrieve = (result) => {
    console.log('Résultat :', result);
  };

  return (
    <SearchBox
      accessToken={process.env.MAPBOX_ACCESS_TOKEN}
      onRetrieve={handleRetrieve}
    />
  );
}

2. Affichage des résultats sur une carte

import { Map } from 'react-map-gl/mapbox';

<Map
  mapboxAccessToken={process.env.MAPBOX_ACCESS_TOKEN}
  initialViewState={{
    longitude: result.geometry.coordinates[0],
    latitude: result.geometry.coordinates[1],
    zoom: 12
  }}
  style={{ width: 600, height: 400 }}
  mapStyle="mapbox://styles/mapbox/streets-v12"
/>

3. Bonnes pratiques

• Limitation de débit : Utilisez des requêtes de recherche avec debounce pour éviter de dépasser les limites de l'API.
• Gestion des erreurs : Implémentez une gestion d'erreur robuste pour les cas de géocodage échoué.
• Mise en cache : Mettez en cache les résultats de recherche récents pour améliorer les performances.
• Sécurité : Ne stockez jamais le token d'accès public côté serveur ; utilisez des tokens temporaires ou des proxies.
• Filtrage : Utilisez les paramètres country, proximity ou types pour affiner les résultats.

4. Ressources supplémentaires

• Documentation Mapbox Search
• Guide de démarrage rapide
• Référence SDK Search-js

---

Workflow généré par la compétence mapbox/mapbox-search-integration