Planification d’itinéraire à l’aide d’Open Street Map

Introduction

Dans cet article de blog, nous approfondirons l’utilisation de Leaflet.js, une bibliothèque JavaScript open source, en conjonction avec React pour créer des cartes interactives en remplacement de Google Maps. Comprendre l’application de Leaflet.js peut nous permettre de présenter efficacement les données de localisation et de créer sans effort des applications personnalisées centrées sur les cartes.

Pour ce didacticiel et à l’avenir, nous utiliserons les outils suivants :

• Brochure
  Une bibliothèque JavaScript pour cartes interactives
• Réagir
  Une bibliothèque JavaScript pour créer des interfaces utilisateur
• Dépliant React
  Composants React pour les cartes Leaflet

Qu’est-ce que Dépliant ?

Leaflet se distingue comme la première bibliothèque JavaScript open source conçue pour les cartes interactives adaptées aux mobiles. Avec une taille compacte d’environ 42 Ko de JS, il englobe toutes les fonctionnalités de cartographie essentielles dont la plupart des développeurs ont besoin.

Conçu avec la simplicité, les performances et la convivialité à la base, Leaflet fonctionne de manière transparente sur toutes les principales plates-formes de bureau et mobiles. Il offre une extensibilité étendue grâce à de nombreux plugins, dispose d’une API attrayante et intuitive avec une documentation complète et propose un code source simple et lisible qui favorise des contributions agréables.

L’intégration

Nous pouvons installer le package pour réagir-leaflet en suivant la commande.

npm install react-dom leaflet

Cela aidera à configurer la carte

Configuration de la carte

Tout d’abord, modifiez le fichier App.js avec le code suivant pour que les composants de base soient invoqués pour la carte.

Voici la structure de fichier de l’exemple d’application

L’intégration de la carte démarre à partir du composant

Veuillez créer le fichier et copier le code suivant

Pour la création d’itinéraires entre deux points, le composant est créé.
La bibliothèque « react-bootstrap » est utilisée pour les entrées de contrôle de formulaire, et React Select affichera le résultat de la recherche à partir de la géolocalisation.

Celui-ci sera chargé de permettre la recherche géographique par texte à l’aide de la « recherche géographique par dépliant » et d’enregistrer l’emplacement de début et de fin dans React Context.

« leaflet-routing-machine » mettra en évidence la route entre les coordonnées fournies.

Avec une intégration complète, le résultat final de la planification d’itinéraire sera le suivant : –

Remarque : Le composant conteneur de carte de dépliant doit avoir une hauteur et une largeur fixes, sinon la carte risque de ne pas être visible correctement.

Vous pouvez trouver le lien du dépôt GitHub pour l’exemple de projet complet ici nom de la succursale : planification d’itinéraire

Conclusion

Il est prudent de dire que React-leaflet n’est peut-être pas en mesure de fournir toutes les fonctionnalités dont disposent les autres bibliothèques payantes. Mais il a la capacité d’être utile lorsque l’on peut avoir besoin d’une bibliothèque de cartes alternative open source pour les applications de suivi de base ou la livraison à domicile et bien d’autres cas d’utilisation.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE