Cartographie avec leaflet

Bonjour !

Je débute avec tout ce qui est cartographie dans une application. C’est encore très confus dans ma tête et j’ai pas mal de questions de débutants. Pour l’instant je ne trouve pas de source pour appréhender tout ce que je dois apprendre de manière globale, et l’ordre par lequel je dois procéder (je maitrise le principe de base du tuto de Zeste de Savoir). Des tutos pour faire ceci ou cela, il y en a plein, mais ce que je cherche actuellement, c’est la vision globale.

Mon objectif final : afficher sur une application une carte stylée (= jolie) avec un ensemble de points d’intérêts qui réagissent au clic pour afficher d’avantages d’informations. Idéalement, il y aurait un ensemble de filtres que l’utilisateur peut utiliser pour ajouter / supprimer des points d’intérêts. Les infos à afficher ne concernent qu’un département français : ce n’est pas le monde entier que je cherche à cartographier.

Donc voilà plein de questions : si certain.e.s d’entre vous ont des réponses, merci !

Concernant le fournisseur des tuiles : La zone fait environ 60km de rayon (j’ai vu qu’on pouvait empêcher un utilisateur de sortir d’une zone). Je ne cherche pas à avoir un niveau de zoom dément (le détail des rues ne m’intéresse pas), il s’agit juste d’indiquer à mon utilisateur quel événement se passe à quel endroit. Du coup, est-ce que ce serait envisageable d’héberger sur mon propre serveur ma carte ? Je n’ai aucune idée du poids ou de la charge que ça représente. Est-ce que ça a un intérêt ?

Concernant le style des tuiles : La carte doit être jolie et respecter les styles du reste de l’appli. Or, la carte par défaut de OSM ne convient pas. Je vois que des boites comme Mapbox permettent de styler une carte de façon intéressante, moyennant finance, et c’est eux qui fournissent l’hébergement des tuiles. Comment faire de mon côté ? Je ne trouve pas de tuto à ce sujet. Et sur le principe même, je ne suis pas sûr de comprendre : est-ce qu’on peut prendre les images de OSM et leur appliquer un filtre simplement ? Par exemple ne pas afficher certaines routes ou noms de villes ? Changer les couleurs pour respecter une charte de design ? Si oui, comment ? Tout ce que je trouve dit d’utiliser MapBox mais leur système de tarification à la Google ne m’inspire pas trop confiance.

Concernant les données : Je ne suis pas sûr de comprendre l’intérêt du format GEOJson par rapport à un simple appel à une BDD pour afficher des "marker" un par un. Quelqu’un saurait-il pourquoi utiliser GEOJson ? Par ailleurs, idéalement, j’aimerais afficher de base une vingtaine d’éléments dès l’affichage de la carte, puis permettre à l’utilisateur soit via un système de filtres soit en zoomant sur une zone plus spécifique, d’ajouter ou d’enlever des marqueurs. A la (très grosse) louche, j’ai environ 200 objets JSON (contenant lat/long, adresse éventuelle de l’image, descriptif court, nom, et différents tags pour filtrer). Pour une expérience utilisateur optimale, est-ce qu’il vaut mieux tout télécharger d’un coup et filtrer ensuite ? Ou au contraire télécharger au fur-et-à-mesure des besoins ?

Voilà pour l’instant ce qui me pose problème. Une fois que j’aurai mieux compris le fonctionnement de la cartographie sur internet, j’aurai probablement des questions beaucoup plus précises !

Merci !

Merci à tous les deux pour votre participation.

Mon souci avec ce que je développe c’est qu’on devrait théoriquement approcher dangereusement la limite gratuite de mapbox (50 000 initialisation par mois pour la version web). Tant qu’on est en dessous, ça roule, mais si on la dépasse avant d’avoir fini de monétiser l’application, on aura l’air bien bête. D’où mes questions sur une solution d’hébergement des cartes nécessaires à mon application. Si on pouvait avoir une jolie carte sans passer par un tiers payant, ce serait clairement mieux.

A propos des initialisations de Mapbox :

Tiré du site Mapbox > Pricing : "A map load is counted every time Mapbox GL JS initializes on a webpage or in a web app" (gratuit jusqu’à 50 000 par mois).

Si mon application utilise Vue, et que j’initialise donc Mapbox sur l’index - comme ressource nécessaire à tout utilisateur pour exploiter l’application : telle que l’app est pour le moment prévue, quand on clique sur un événement sur la carte, on doit aller sur une autre page pour avoir les détails des données. Là théoriquement, on aimerait aussi rappeler où se situe l’événement sur une carte.

=> est-ce que ça compterait aussi comme une initialisation ? Ou est-ce que l’on peut utiliser l’initialisation première de l’index ? Il y a un compteur de suivi sur Mapbox ?

Parce que si on a une initialisation par utilisateur et par session, on tient des mois avant d’atteindre la limite. Par contre, si à chaque affichage de la carte on ajoute une initialisation, la limite pourrait être atteinte bien trop rapidement (si un utilisateur tient à faire le tour de tous les événements répertoriés, par exemple). Cela nous obligerait donc à revoir complètement soit le budget, soit le fonctionnement prévu de l’app (je n’en suis pour l’instant qu’à gérer le back-end et le stockage des resources)

Je pense qu’ils comptent comme initialisation chaque fois que tu crées un composant Mapbox, donc chaque carte.

50k ça fait déjà pas mal de trafic, tous tes utilisateurs ne vont pas forcément regarder tout en détail.

Après les tarifs sont pas forcément très élevés non plus si ça dépasse, à $5 maximum pour 1000 impressions supplémentaires. Ça reste moins cher que d’héberger et gérer ton propre serveur.

Pour ta page de détails tu pourrais peut-être voir pour utiliser l’API statique, avec un quota dédié ?

Sinon tu peux voir si en front (comme tu utilises Vue) tu peux réutiliser ton objet entre chaque navigation…

Je vais faire des tests de fonctionnement dans les jours à venir pour compter les initialisations selon les techniques en Front que l’on utilisera. Tu as raison, il doit sans doute y avoir moyen de réutiliser le même objet, selon l’endroit depuis lequel j’initialise. Mmmm ça va être quelques jours passionnants (réellement ^^) Tu mentionnes "l’API statique, avec un quota dédié", je n’ai pas encore vu ça dans la doc, ça a l’air prometteur, c’est quoi, tu as un lien ?

Edit : t’embête pas, j’ai trouvé ! Merci.

Edit 2 : argh non je ne comprends pas leur système de facturation, du coup j’hésite à me lancer. Si quelqu’un a de l’expérience avec Mapbox, pourrait-il m’aider à comprendre ? J’ai laissé un message sur leur site, on verra si ils répondent.

La page Pricing parle de gratuit jusqu’à 50 000 monthly loads "A map load is counted every time Mapbox GL JS initializes on a webpage or in a web app". Je teste hier vite fait, j’explore mon compte ce matin et je trouve: "Static Tiles API : 396 / 200 000 free tile requests". Déjà, c’est monté très très vite, j’ai joué 2 minutes avec hier. Mais surtout, ça ne dit pas ce qui se passe quand on arrive à 200 000 ? Ce n’est pas mentionné non plus sur la page de Pricing. Je m’attendais à trouver "12 map loads" ou quelque chose du genre, pas 396 static tiles. Comment savoir du coup ce qu’on va devoir payer ? C’est moi ou c’est pas clair comme système ?

ok je viens de tilter la différence entre mapbox gl js et mapbox js. Quand je parlais d’un univers complètement inconnu pour moi…’Fin bon, je trouve ça vraiment pas très clair.

Quelqu’un pourrait-il me confirmer que cette fois j’ai compris ?

• j’ai le droit à 50 000 initialisations de mapbox gl, qui permettrait sur mon accueil de faire des zooms, des rotations et autres trucs débiles qu’on n’avait pas envisagé un instant auparavant. Le coût est très raisonnable au-delà.
• j’ai le droit à 200 000 téléchargements de tuiles, qui permettraient par exemple de rajouter une carte statique sur chaque page "détail" en dehors de la home. Ces mêmes tuiles sont ce qui est téléchargé par le client si j’utilise leaflet et que je fais exactement comme ce que le tuto de Zeste de Savoir dit de faire. D’où mes 396 téléchargements en quelques utilisations.

J’ai bon ou je suis encore à côté de la plaque ?

Donc encore des questions :

• que se passe-t-il une fois les 200 000 tuiles gratuites atteintes ?
• y a-t-il moyen de ne charger qu’une fois le Mapbox GL pour éviter de compter un chargement à chaque retour sur l’accueil depuis une page "detail" ?

Edit : non mais oubliez ces questions sur les tarifications. Read the F***ing Manual, crétin de Lapin (moi)

Par contre, sur l’utilisation de leur moteur GL avec Vue, je reste intéressé pour une optimisation du chargement pour éviter d’en faire trop, trop rapidement.