Blog

Comment la section Map m’a facilitée la vie à New York

  Mis à jour le   5 min de lecture

S’installer à New York quand on ne connaît pas du tout la ville peut vite impressionner. Il y a tellement de choses à faire, de restaurants à tester et de magnifiques endroits à découvrir. C’est alors que les applications de type « City Guide » prennent tout leur sens ! Meilleurs spots pour bruncher, magasins vintages en tout genre, célèbres bars clandestins, réseau de métro… Une app peut s’avérer être un bon moyen de découvrir une ville si vous en faites bon usage.
 
A travers des exemples concrets tirés de mon expérience personnelle, cet article est un témoignage de mon usage de la section Map dans ma vie quotidienne à New York City. En quelques points, je vais vous expliquer comment configurer correctement votre section Map en la mettant en contexte, avec en prime quelques bonnes adresses new-yorkaises ;)

Généralités sur la section Map

Vous allez dans un premier temps devoir produire des points de manière interne grâce au CMS, ou de manière externe en téléchargeant un fichier KML. Puis, optionnellement, vous allez pouvoir ajouter des tracés (lignes, surfaces) par-dessus vos points.

1/ Production des points : comment collecter vos adresses préférées dans votre app

Avant toute chose, il va vous falloir créer les Points que vous voulez faire apparaître sur votre Map. Pour ce faire, la manière qui m’a paru être la plus simple c’est d’ajouter les points directement depuis le backoffice, grâce au CMS. C’est ainsi que j’ai pu rentrer les adresses de mes restaurants, bars et lieux préférés dans le champs indiqué (la latitude et longitude se remplissant automatiquement).
 
Chaque Point est également customisable. Je pense notamment à la personnalisation des icônes, en choisissant parmi la bibliothèque de GoodBarber ou en téléchargeant votre propre image, à condition qu’elle soit blanche, au format .png et sur un fond transparent. Sa taille devra également être comprise entre 150x150 et 150x300 px.
 
Vos Points se configurant comme une page Article, vous avez également la possibilité d’ajouter des textes, embeds, vidéos et photos. De quoi enrichir votre Map et la rendre plus interactive !
Je vous conseille d’utiliser la section à son maximum en ajoutant d’autres fonctionnalités à votre Map telles que le moteur de recherche, les commentaires Disqus, ou encore l’organisation du contenu par catégorie. Pour cette dernière, rendez-vous dans l’onglet Settings de votre section Map pour créer vos catégories. Pour ma part, j’ai surtout cherché à pouvoir catégoriser mes adresses Food préférées à travers New York City !
Et pour ceux qui ont des compétences avancées, je ne vous oublie pas !
Vous avez en effet la possibilité de choisir une source externe pour créer vos points. Vous allez alors devoir télécharger un fichier KML avec vos points pour que votre section Map puisse fonctionner correctement. Pour cela, deux options :
 
- Vous pouvez importer un fichier au préalable téléchargé sur ordinateur
- Vous pouvez également utiliser une URL en renseignant l’URL correspondante dans le champ indiqué
 

Remarques :

- Si vous téléchargez un fichier KML contenant des points, des lignes et des polygones sous la zone “Points” de la section, seuls les points seront affichés sur la carte.
- La section KML peut gérer au maximum 1000 points. Afin de veiller au bon fonctionnement de la section, veuillez ne pas en ajouter un de plus.
- Seuls les 100 premiers points de la carte seront affichés à l’ouverture de la section. Pour afficher les 100 points suivants, l’utilisateur fera défiler la liste des lieux vers le bas, et répéter l’action pour les 100 points suivant, etc.

2/ Ajout de tracés par-dessus vos points : comment mettre en relief vos circuits de visite futurs ou préférés

Avec tout ce que New York a à vous offrir, quoi de mieux que de garder une trace des différents parcours à effectuer dans la ville ou de pouvoir mettre en relief certaines zones que vous aimeriez visiter ? Grâce à quelques compétences en langage XML, vous pouvez, à l’aide d’un fichier KML, afficher des lignes et des polygones sur votre carte.
 
Voici un exemple de code avec la structure KML que vous pouvez suivre pour afficher ces propriétés sur votre carte.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Placemark>
      <name>Line</name>
      <Style>
        <LineStyle>
          <width>10</width>
          <color>ff00ffff</color>
        </LineStyle>
      </Style>
      <LineString>
        <tessellate>1</tessellate>
       <coordinates>
          8.9648438,42.1634034,0.0 
          -4.3945312,39.6395376,0.0 -117.5976562,57.4212944,0.0 
          -112.6757812,36.3151251,0.0 
          -50.9765625,-15.2841851,0.0 
          24.2578125,-4.5654736,0.0 
          133.4179688,-22.268764,0.0 
          101.953125,36.7388841,0.0 
          39.7265625,58.9953112,0.0 
          -1.7578125,52.8027614,0.0 
          9.2175293,42.2366519,0.0
        </coordinates>
      </LineString>
    </Placemark>
    <Placemark>
        <name>Polygon</name>
        <Style>
          <LineStyle>
            <width>3</width>
            <color>ffff00ff</color>
          </LineStyle>
          <PolyStyle>
            <color>ff000000</color>
          </PolyStyle>
        </Style>
        <Polygon>
            <tessellate>1</tessellate>
            <outerBoundaryIs>
                <LinearRing>
                    <coordinates>
                        -101.2703028084182,44.03484070243132,0
                        -93.50548036075496,32.23807715431979,0
                        -81.86615113861016,38.17061241766041,0
                        -101.2703028084182,44.03484070243132,0 
                    </coordinates>
                </LinearRing>
            </outerBoundaryIs>
        </Polygon>
    </Placemark>
  </Document>
</kml>
Pour ma part, j’ai voulu créer un polygone rouge pour Central Park et tracer en bleu le circuit de ma balade préférée dans Manhattan : la High Line.

Pour afficher des lignes et des polygones, que vous utilisiez le CMS ou une source externe, vous devez télécharger votre fichier KML dans votre back office. Si vous choisissez le CMS, vous pouvez le faire depuis l’onglet Paramètres de la section puis télécharger votre fichier sous “Routes”.
 
Bonnes découvertes et Happy App Building :)

POUR ALLER PLUS LOIN :

 

À lire aussi

  4 min de lecture

Vos lives et vos vidéos Twitch, désormais dans votre app

En bref. Twitch est une extension de GoodBarber, l'app builder sans code, qui ajoute une chaîne Twitch comme source d'une section Vidéo. Quand la chaîne est en live, le stream prend la tête de la section ; le reste du temps, la section liste les vidéos de la chaîne. Vous la connectez une fois, avec un Client ID et un Client Secret obtenus dans la console des développeurs Twitch. Elle est gratuite pour les apps Content : chaque section compte pour une des extensions incluses dans votre plan.Le public est sur Twitch. En septembre 2026, les spectateurs y ont regardé 1,51 milliard d'heures de lives, avec en moyenne 2,1 millions de personnes devant un stream à tout moment, selon TwitchTracker. Voici ce que donne l'extension pour une créatrice qui passe en live tous les mardis à 20 h.

  4 min de lecture

Transformez vos documents en réponses avec GoodBarber Chatbot

Dans une app, publier un document utile n’est qu’une partie du travail. Encore faut-il que chacun retrouve la bonne information au moment d’agir. Un fichier bien nommé aide à parcourir une bibliothèque, mais le lecteur peut avoir une question plus immédiate.La communication d’entreprise n’est qu’une application possible. La même approche peut servir des ressources pédagogiques, des guides pour les membres d’une organisation, des références techniques ou d’autres documents utiles partagés dans une app. Dans notre exemple, un collaborateur prépare un déplacement chez un client et souhaite savoir :Quels frais de déplacement nécessitent une autorisation préalable ?Nous avons ajouté les documents aux sources de GoodBarber Chatbot pour que les fichiers que vous tenez déjà à jour puissent alimenter ces échanges. Vous choisissez les documents. Les utilisateurs posent leurs questions avec leurs propres mots. L’assistant recherche les passages pertinents et s’appuie dessus pour formuler sa réponse.La question devient une porte d’entrée dans la politique de déplacement. Le collaborateur peut partir de la décision qu’il doit prendre, même sans connaître le titre du document qui l’explique.

Conseils pour créer une app