Créer votre première carte Leaflet

Depuis que Google Maps impose de saisir un numéro de carte bleue afin d'utiliser son (remarquable) service, cela a motivé certains développeurs à aller découvrir des concurrents. En tête de ceux-ci, la librairie Leaflet open source et gratuite.
Formations Front, Back et FullStack :
codeconcept.te...

[@cedricbouve]

es t il possible de faire une carte a partir d'un plan exemple une entreprise et l'ensemble des salles de reunion l ensemble des bureaux et permettre la localisation ?

[@arnaques-tuto-informatique]

bonsoir, et merci pour ce tuto (gros pouce bleu) et c'etait super la partie débug, ca permet de voir comment d'autres s'y prennent et en plus, ca fait un moment que j'ai pas codé de site internet donc ça me remet dans le bain avec la fameuse ligne qu'on oublie de declarer ^^ alors ce soir, je cherche des infos sur comment creer une map avec filtre possible et assez rapidement je suis tombé sur cette superbe librairie qu'est leaflet et aussi quelques tutos bien utiles dont le votre !! juste l'histoire du compte à créer, c'est etrange, sur d'autres tuto ils n"en parlait pas...peut-etre que ca a changé en 3 ans et ca depend peut-etre de la map.....(ah oui, c'est du mapbox pour ça ^^). je pense et j'espere qu'avec cette librairie, je vais arriver à faire ce que je veux mais vu que ca fait longtemps que j'ai jamais fait bcp de js (utiliser un peu jquery) j'espere pas trop perde de temps là dessus. je serais content si en quelques jours j'y arrive...mais j'ai pas encore epuisé les ressources du net, et puis c'est la 1er fois que je planche sur un projet perso dans lequel je veux integrer des cartes ^^ encore une fois, merci et on sent le monsieur qui maitrise...contrairement à d'autres qui sont des developpeurs du marketing, ici, c'est du bon, ca se sent dans votre maniere de faire. super

[@codeconcept]

Merci pour ce commentaire et le (gros) pouce bleu :) J'aimerais dire que le développement web c'est comme le vélo, ça ne s'oublie pas. Mais le Front évolue très vite (plus vite que le back). Ceci dit, Leaflet propose des APIs bien stables depuis longtemps. Donc là, avec de la chance, ce sera l'exception qui confirme la règle : ça ne devrait pas avoir trop changé depuis que cette vidéo a été tournée ;) Je vais me remettre à Leaflet en janvier 2023 car j'aime les cartes en général et Leaflet en particulier. Donc toute suggestion de ce que je pourrais développer comme prochaine fonctionnalité pour une vidéo Leaflet 2023 est la bienvenue :)

[@arnaques-tuto-informatique]

@@codeconcept bonsoir, merci pour la réponse ^^ ah, les regles generales ne s'oublient pas, ou pas trop, c'est surtout la syntaxe, je sais plus trop mais ca revient vite ^^ en meme temps, c'est pas comme ci, j'avais codé des dizaines de sites. je fais aussi du dev de jeux vidéo alors, je reste dans le code malgré tout mais pas seulement ça... petite idée : carte interactive personnalisée (style une carte imaginaire par exemple) avec possibilité de faire apparaitre / disparaitre les markeurs, voire en ajouter. j'ai quasiment reussi à faire ce que je voulais, juste ca zoom sur 3 niveau et quand je veux zoomer plus, la carte disparait....j'ai pas eu le temps de m'y remettre, je vais voir si finalement juste 3 niveaux ça suffit ou pas. merci, bonne soirée.

[@codeconcept]

C'est bizarre ce zoom limité. Normalement on peut zoomer sur une vingtaine de niveaux. Parfois, c'est avec les tiles qu'il y a des soucis. . Je suis en train de rejouer avec Leaflet. Je ferai une vidéo dessus ;)

[@arnaques-tuto-informatique]

@@codeconcept salut, merci pour la réponse. dans mon cas, ça va, j'ai pu m'en sortir ^^ @+

[@liamlegaillard9840]

Bonjour, c'est possible de faire en sorte de filtrer ? la map avec des input fields ? (J'utilise Webflow pour la partie design de mon site). Je vous remercie d'avance de votre retour ! !

[@codeconcept]

Bonjour Liam, oui c'est possible de mettre des filtres, avec la propriété filter: L.geoJSON(someFeatures, { filter: function(feature, layer) { return feature.properties.show_on_map; } }).addTo(map); Concrètement, pour afficher ce qui n'est pas en construction : const freeBusLayer = L.geoJSON(freeBus, { filter(feature, layer) { if (feature.properties) { // If the property "underConstruction" exists and is true, return false (don't render features under construction) return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true; } return false; }, onEachFeature }).addTo(map); C'est un exemple de la doc officielle, fin de page (pragraphe 'filter') leafletjs.com/examples/geojson/ ;)

[@souleymanecisse803]

Merci pour la vidéo, je voulais connaitre le nom de l'éditeur que vous avez utilisé

[@codeconcept]

Merci Souleyman, l'éditeur que j'utilise est VS Code ainsi que VS Codium

[@vetflow3504]

Super tuto comme d'habitude. :-) Leafset est compatible avec OSM : const mainLayer = L.tileLayer( '{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap', subdomains: ['a','b','c'] });

[@codeconcept]

Merci pour les liens :) KZbin les avait trouvés suspect d'où le blocage du commentaire jusqu'à ce que réalise qu'il était en attente. Désolé ;)