Comment construire une vitrine de vacances Coach avec WRLD –

Cet article a été créé en partenariat avec WRLD . Merci de soutenir les partenaires qui rendent SitePoint possible.

Depuis la fin des années 2000, les cartes sont un incontournable du web et sont aujourd'hui plus omniprésentes que jamais. Ils ont une variété d'utilisations, en complétant la page de contact d'une entreprise à la cartographie des lieux d'intérêt à travers une région géographique. Alors que la puissance de calcul devient plus abordable, les cartes 3D ont gagné en popularité, démontrant l'échelle des bâtiments et la nature du terrain environnant, ajoutant une touche de nouveauté à ces expériences, ainsi que des avantages pratiques.

Les cartes 3D sont WRLD . Les grandes villes telles que New York, Londres, Paris et Bangkok ont ​​été générées en 3D à l'aide de données géographiques réelles. Ces données peuvent être utilisées pour créer des cartes personnalisées contenant des points d'intérêt et d'autres métadonnées utiles, et grâce à leur bibliothèque JavaScript il est possible de les déposer dans une page Web avec quelques lignes de code; ce flux de travail sera l'objet de notre article.

En utilisant le concepteur de cartes de WRLD, nous allons construire une carte pour un voyage en autocar, que nous intégrerons ensuite dans un site Web alimenté par Node.js

Avant de pouvoir utiliser le concepteur de cartes de WRLD, nous devons enregistrer . Connectez-vous une fois que vous avez créé et vérifié votre compte.

Accédez au concepteur de cartes . Cette page répertorie toutes les cartes que vous avez créées, et vous permet d'en créer de nouvelles. Cliquez sur Créer une carte pour lancer le concepteur

Ensemble, nous allons créer une carte pour une visite culinaire de Dundee. Cliquez sur Nouvelle carte sur la gauche et dans la nouvelle carte Nouvelle modale, entrez un titre de Circuit alimentaire Dundee puis appuyez sur Confirmez une nouvelle carte

Maintenant que nous avons créé notre carte, nous devons choisir un emplacement de départ. Cliquez sur le bouton de menu à côté de l'entrée de recherche, cliquez sur Emplacements et choisissez Dundee.

Ajout de notre première place

doit utiliser le concepteur de lieux de WRLD, ce qui facilite la création d'ensembles de lieux qui peuvent ensuite être importés et réutilisés.

Sur la droite, cliquez sur l'icône du repère, puis sur Gérer les collections de lieux . Cela ouvrira le concepteur au même endroit géographique. Ajoutons notre première collection de lieux en cliquant sur Collection de nouveaux lieux . Donnez le titre à Dundee Food Tour puis ajoutez une référence à notre application Dundee Food Tour, qui reliera la collection de lieux à notre carte. Finalisez cela avec Confirmez la nouvelle collection .

Cliquez sur Nouvelle marque de marqueur en regard de la zone de recherche. Un marqueur devrait apparaître sur le bâtiment Dundee Food Tour, mais il peut être déplacé si nécessaire. Dans le volet à droite, entrez un titre de Dundee Food Tour – ceci sera sauvegardé automatiquement.

Ajoutez autant d'endroits que vous le souhaitez suivant cette approche, et revenez au Map Designer une fois que vous en avez assez. Notre nouvelle collection devrait avoir été détectée et automatiquement incluse dans notre carte, mais nous pouvons la configurer manuellement en cliquant sur le marqueur des lieux sur la droite et en sélectionnant notre set de lieux

[19659003] Avant d'afficher la carte sur notre site Web, nous devrions définir un point de départ. Faites glisser et zoomer la carte jusqu'à ce que vous ayez trouvé une vue optimale, puis, en utilisant l'icône réticule sur la droite, ouvrez le formulaire Opening Map View et cliquez sur Use Current Map View . 19659003]

Inclusion de la carte sur un site Web

Malgré la modélisation 3D détaillée fournie par WRLD, la véritable puissance de cette plate-forme réside dans la possibilité d'intégrer des cartes dans des sites Web et d'autres applications. . En plus d'exposer diverses API HTTP pour interroger directement des données, il existe des bibliothèques pour le rendu de cartes sur de nombreuses plates-formes, notamment iOS, Android et le Web. Nous utiliserons la bibliothèque wrld.js qui est également disponible sur npm .

Configuration

Le site Web standard auquel nous allons ajouter notre carte se trouve à l'adresse suivante: GitHub . Veuillez cloner ce dépôt et installer les dépendances requises:

 git clone https://github.com/jamesseanwright/wrld-tours.git
cd wrld-tours
nvm install # ceci installera la version de Node.js trouvée dans .nvmrc. Assurez-vous que nvm est installé
npm je

Pour vérifier que le projet fonctionne comme prévu, exécutez npm run watch ; ceci démarrera le projet en utilisant nodemon en redémarrant automatiquement quand des changements sont faits. Lors de l'ouverture de http: // localhost: 8001 / trips dans votre navigateur, vous devriez voir une liste de trajets avec un seul élément.

Saisir et configurer votre jeton de développeur

Notre application consommera des données de deux des API HTTP de WRLD, qui sont protégées par des jetons de développeur. Pour acquérir votre token, connectez-vous et rendez-vous sur la section My Account puis cliquez sur l'onglet Developer Token ; assurez-vous de le copier.

Dans le code de notre application, ouvrez config.json sur le serveur ]et collez votre jeton comme valeur de devToken ; cette propriété sera utilisée pour effectuer les appels d'API mentionnés ci-dessus à l'étape suivante.

 {
    "devToken": "insérez votre jeton de dev ici"
}

Appel des API HTTP de WRLD

Ouvrez le projet dans votre éditeur et dirigez-vous vers le fichier trips.json dans le répertoire du serveur . Ceci est une carte de hachage de tous les voyages disponibles répertoriés sur notre site Web, claveté par une limace séparée par un trait d'union. Ceux-ci sont accessibles via la route / voyages de sorte que nous pouvons atteindre le Dundee Food Tour via / trips / dundee-food-tour . Vous remarquerez que l'entrée pour le Dundee Food Tour a deux propriétés vides, mapSceneId et poiSetId . Nous y reviendrons sous peu.

Examinons le code côté client qui récupère les données cartographiques. Ouvrez TripView.js ( et non TripView.js ) dans le répertoire client / vues et étudions la méthode onNavigatedTo . Cela appelle deux points de terminaison qui sont fournis au client par le serveur:

 const [mapScene, poiSet] = wait Promise.all ([
    callEndpoint(endpoints.mapScene),
    callEndpoint(endpoints.poiSet),
]);

Ceux-ci ne pointent pas directement vers les API WRLD. Au contraire, ils sont exposés par notre propre serveur afin que notre jeton de développeur ne soit pas divulgué au navigateur. Jetons un coup d'oeil à ces routes dans serveur / apiRouter.js :

 router.get ('/ mapscenes /: id', (req, res) => {
    res.status (404) .send ();
});

router.get ('/ pois /: poiSetId', (req, res) => {
    res.status (404) .send ();
});

Actuellement, ils se comportent comme s'ils n'existaient pas. Pour les implémenter, nous pouvons utiliser le module request déjà importé pour transmettre nos requêtes aux API WRLD respectives et les renvoyer au navigateur:

 router.get ('/ mapscenes /: id' , (req, res) => {
    request.get (`https://wrld.mp/v1.1/mapscenes/$ {req.params.id}? token = $ {config.devToken}`)
        .pipe (res);
});

router.get ('/ pois /: poiSetId', (req, res) => {
    request.get (`https://poi.wrld3d.com/v1.1/poisets/$ {req.params.poiSetId} / pois /? token = $ {config.devToken}`)
        .pipe (res);
});

Chaque fois que le JavaScript côté client est évalué pour un voyage, il appelle ces points de terminaison avec les identifiants appropriés, en éloignant le jeton développeur du navigateur.

Vérification de nos points de terminaison

Pour vérifier que cela fonctionne, nous pouvons appeler nos propres points de terminaison API directement. Pour obtenir les ID respectifs de notre collection mapscene et place, nous pouvons appeler le répertoire API WRLD avec notre jeton de développeur, à savoir:

• https://wrld.mp/v1.1/mapscenes/?token= [your dev token]
• https : //poi.wrld3d.com/v1.1/poisets/? token = [your dev token]

Nous pouvons alors prendre les propriétés id et les transmettre à nos propres points de terminaison locaux, par exemple http: // localhost: 8001 / api / mapscenes / 10786 et http: // localhost: 8001 / api / pois / 4149. Si nous avons correctement implémenté ces routes, nous devrions recevoir des données des API WRLD

Mise à jour de la définition du trajet

Revenir au fichier trips.json . Rappelez-vous les deux propriétés vides, mapSceneId et poiSetId ? Définissez leurs valeurs respectives sur les identifiants que vous avez pris pour la collection mapscene et la collection de lieux, par exemple :

"mapSceneId ":" 10597 ",
"poiSetId": "4160"

Rendu de la carte

Nous sommes maintenant prêts à tracer les données API sur une carte rendue par un navigateur. Revenons au fichier TripView.js .

Ci-dessous les appels à nos noeuds finaux (par exemple Promise.all ([), appelez wrld.map avec ces arguments précis:

 const map = wrld.map (document.querySelector ('. Map-container'), mapScene.api_key, mapScene);

En utilisant wrld.js, que nous avons importé dans ce fichier sous le nom wrld nous traduisons notre carte dans un HTMLDivElement avec une classe de .map-container en passant la clé API et les données cartographiques renvoyées par notre endpoint / api / mapscene . Si vous ouvrez la page de voyage Dundee Food Tour dans votre navigateur (ie http: // localhost: 8001 / trips / dundee-food-tour ), vous devriez voir notre carte avec la vue d'ouverture prévue. ] Adding Our Places Collection

Pour conclure, nous allons ajouter des marqueurs pour chaque place de notre collection sur la carte. Dans le TripView implémentez la méthode addPointsToMap :

 static addPointsToMap (map, points) {
    points.forEach (({lat, lon, title, height_offset}) => {
        const popup = wrld.popup ({
            élévation: height_offset,
            closeOnClick: faux,
            closeButton: false,
        });

        popup.setLatLng ([lat, lon])
            .setContent (titre)
            .addTo (carte);
    });
}

Nous prenons ici les données de points brutes renvoyées par le point d'extrémité / api / pois et les mappons dans des marqueurs de carte, en les transformant comme requis pour la méthode wrld.popup .

Assurez-vous que le premier paramètre passé à TripView.addPointsToMap au bas de onNavigatedTo est nommé correctement, par exemple:

 const map = wrld.map (document.querySelector ( '.map-container'), mapScene.api_key, mapScene);

TripView.addPointsToMap (map, poiSet);

En rechargeant la page dans le navigateur, nous remarquerons que les points ont été ajoutés à notre carte, accompagnés du nom de chaque endroit.

Résumé

Les cartes Web peuvent facilement exprimer des informations dans un variété de contextes, dont nous avons mis en place un avec un accent axé sur le consommateur. Avec WRLD et quelques lignes de JavaScript, nous avons augmenté l'expérience de notre site Web, augmentant ainsi l'engagement potentiel. J'espère que cela a démontré la polyvalence et l'importance des cartes sur le web.

James est un développeur de logiciels à part entière chez YLD, passionné par les technologies Web. Il travaille actuellement avec une variété de langues et a conçu des solutions pour Sky, Channel 4, Trainline et NET-A-PORTER.