Map projets

Présentation

Le sujet de mon stage consiste à élaborer une carte de l’ensoleillement dans le Sud-Est de la France, en utilisant des technologies de cartographie et de visualisation de données. Pour ce faire, j’ai choisi d’utiliser la bibliothèque Leaflet, un outil open-source de cartographie interactive en JavaScript, largement reconnu pour sa flexibilité et sa facilité d’utilisation.

Le but principal de ce projet est de fournir une représentation des projets solaire réalisée dans cette région, ce qui peut être extrêmement utile pour diverses applications telles que la planification urbaine, l’optimisation de l’implantation de panneaux solaires, ou encore l’évaluation du potentiel énergétique solaire.

La carte que je développe comprend des données précises sur l’ensoleillement, basées sur des mesures réelles ou des données modélisées, permettant aux utilisateurs d’explorer et d’analyser les différents projets réalisées par Sun R Solutions.

map of france, france, country-3141895.jpg

Map

Elle utilise Leaflet, une bibliothèque JavaScript interactive pour les cartes, avec une superposition d'image de la France au lieu de la carte OpenStreetMap habituelle.

Infos projets

Chaque projet solaire répertorié comprend des informations détaillées telles que la puissance installée, la production attendue, le potentiel d'économie et les équipements utilisés.

Localisation

Les coordonnées géographiques de chaque projet et agence sont fournies pour une localisation précise sur la carte.

Besoin à l'origine du projet

Visibilité et Transparence

L’idée de créer une carte interactive des projets solaires pour le site web est née d’un besoin fondamental de transparence et de communication avec les clients et les parties prenantes de l’entreprise. En tant qu’entreprise engagée dans le développement durable et les énergies renouvelables, l’organisation a réalisé qu’il était essentiel de fournir à son public une vue d’ensemble claire de ses initiatives dans le domaine de l’énergie solaire.

Accessibilité des Informations

L’un des principaux défis auxquels l’entreprise était confrontée était la dispersion des informations sur les projets solaires. Les clients et les partenaires potentiels étaient souvent confrontés à des difficultés pour obtenir des informations précises sur les réalisations dans ce domaine. Cette situation entravait non seulement leur capacité à évaluer l’expertise et l’engagement de l’entreprise, mais limitait également sa capacité à susciter un intérêt et une confiance durables.

Prise de Décision Informée

De plus, l’équipe interne chargée du suivi et de la gestion des projets solaires a exprimé le besoin d’avoir un outil centralisé pour visualiser et mettre à jour les informations sur chaque projet. Actuellement, ces données sont dispersées dans divers fichiers et systèmes internes, ce qui rend la gestion et l’analyse des projets inefficaces et chronophages.

Etapes du projet

Ce schéma illustre, sous la forme d’une ligne du temps, l’avancée du projet et la fréquence des réunions avec le maitre de
stage.

Lundi 18 mars - Vendredi 22 mars 2024

Oganisation et découverte de l'environnement

Au début de mon stage chez Sun R Solution en développement web, j'ai consacré du temps à comprendre l'environnement de travail et les outils utilisés. Cela comprenait une exploration approfondie des technologies web telles que HTML, CSS et JavaScript, ainsi que des frameworks et bibliothèques associés tels que Leaflet.js pour la cartographie interactive. J'ai également étudié le site web existante et examiné les normes de l'entreprise.

Lundi 25 mars - Vendredi 29 mars 2024

Phase de développement

Pendant la phase de développement, j'ai travaillé sur la mise en œuvre des fonctionnalités spécifiques du projet. J'ai écrit du code HTML, CSS et JavaScript pour créer une carte interactive affichant les projets solaires de Sun R Solution. J'ai utilisé Leaflet.js pour intégrer la carte et j'ai personnalisé les marqueurs pour afficher des informations détaillées sur chaque projet lorsqu'ils sont cliqués.

Mardi 2 avril 2024

Réunion

Pendant la réunions, j'ai collaboré avec ma tutrice de stage pour discuter des progrès du projet, partager des idées et résoudre les problèmes éventuels. J'ai présenté mes réalisations et j'ai recueilli les retours d'expérience pour m'assurer que le développement était aligné sur les objectifs et les attentes de l'équipe et des parties prenantes. J'ai également participé à des séances de brainstorming pour explorer de nouvelles fonctionnalités et des améliorations potentielles à apporter au site.

Mardi 2 avril

Validation et publication

Tests finaux : Exécution de tests exhaustifs pour vérifier le bon fonctionnement de la carte sur différents navigateurs et appareils. Correction des éventuels bugs identifiés.
Déploiement : Mise en ligne de la carte sur un serveur web accessible au public. Configuration des paramètres de sécurité si nécessaire.
Suivi et maintenance : Surveillance de la performance de la carte après son déploiement. Correction des problèmes éventuels et ajout de nouvelles fonctionnalités selon les retours des utilisateurs.

Planification Prévisionnelle

La réalisation de ce projet a été précédée d’une planification minutieuse, visant à définir les différentes étapes et à allouer les ressources de manière efficace. Le diagramme de Gantt ci-dessous présente de manière synthétique les différentes tâches et leur répartition dans le temps, offrant ainsi une vue d’ensemble de la planification prévisionnelle de ce travail. Pour cela, nous avons utiliser Gantt Project qui est un outil de planification de projet basé sur le diagramme de Gantt, qui permet de visualiser les tâches du projet, leur chronologie, et les dépendances entre elles.

Veille thechnologique menée

Les technologies géospatiales jouent un rôle crucial dans de nombreux domaines. Ces technologies ont évolué pour offrir des outils interactifs et accessibles à tous. Dans ce contexte, le projet présenté repose sur un ensemble de technologies clés, notamment Leaflet.js, HTML, CSS et SVG (Scalable Vector Graphics), qui permettent de créer une carte interactive des projets photovoltaïques dans le Sud-Est de la France.

Sources

Technologies	Etapes	Liens	Recommandations
Leaflet.js	Initialisation de la carte	click ici	Leaflet.js est une excellente bibliothèque JavaScript pour créer des cartes interactives. Il offre une documentation complète et de nombreux exemples pour faciliter le développement.
OpenStreetMap	Ajout de fonds de carte	click ici	OpenStreetMap fournit des données cartographiques gratuites et open-source pour alimenter le fond de carte.
Leaflet.js	Création de marqueurs	click ici	La création de marqueurs avec Leaflet est simple et efficace, permettant une représentation visuelle précise des points d'intérêt sur une carte interactive.
Leaflet.js	Utilisation de groupes de clusters	click ici	L'utilisation de regroupement de marqueurs améliore la lisibilité de la carte en regroupant les marqueurs proches les uns des autres.
JavaScript	Manipulation de la carte Leaflet	click ici	JavaScript est essentiel pour rendre la carte interactive et ajouter des fonctionnalités avancées.
SVG (Scalable Vector Graphics)	Création d'icônes personnalisées	click ici	Il offre une qualité d'image élevée et une flexibilité pour ajuster la taille et les couleurs des icônes.
Font Awesome	Utilisation d'icônes pour les marqueurs	click ici	Font Awesome offre une vaste collection d'icônes personnalisables pour améliorer l'expérience utilisateur sur la carte.

Outils de développement

WAMPSERVER

WampServer est un logiciel libre et gratuit permettant de créer un environnement de développement web local sur des systèmes Windows. Il regroupe Apache, MySQL et PHP, formant ainsi l’acronyme WAMP. Il nous a permis d’héberger localement la carte afin de visualiser les modifications en temps réel.

Intégration dans le projet de cartographie :

Compatibilité avec les Technologies Front-End :
- Compatibilité de WampServer avec les technologies front-end utilisées dans le projet, notamment HTML, CSS, et JavaScript.

Avantages et Limitations :

Avantages de WampServer :
- Facilité d’installation et de configuration, offrant un environnement de développement local prêt à l’emploi en quelques étapes simples.
- Prise en charge de diverses versions de PHP, MySQL, Apache, ainsi que des modules supplémentaires pour répondre aux besoins spécifiques du projet.
- Intégration transparente avec des outils de développement web courants tels que des éditeurs de code, des gestionnaires de bases de données, et des systèmes de contrôle de version.
Limitations et Défis :
- Nécessité de surveiller les conflits potentiels entre les versions de logiciels et les dépendances pour éviter les problèmes de compatibilité.
- Limitations en termes de performances par rapport à un serveur de production, ce qui peut entraîner des différences de comportement entre l’environnement de développement local et le déploiement en production.

Visual Studio Code

Visual Studio Code est un éditeur de code source développé par Microsoft. Il offre un large éventail de fonctionnalités pour faciliter le développement d’applications web, y compris celles impliquant la création de cartes interactives.

Intégration avec Leaflet.js :

Une des forces de Visual Studio Code est son écosystème d’extensions, qui permet d’ajouter des fonctionnalités supplémentaires à l’éditeur. Une extension populaire pour les développeurs travaillant sur des projets de cartographie est l’extension Leaflet Snippets, qui fournit des raccourcis de code pratiques pour la création rapide de cartes Leaflet.js.

Débogage et validation du code :

VS Code offre des fonctionnalités avancées de débogage et de validation du code, ce qui est particulièrement utile lors du développement d’applications web avec des bibliothèques comme Leaflet.js. Les outils de débogage intégrés permettent de détecter et de corriger rapidement les erreurs de code, tandis que les fonctionnalités de validation automatique aident à maintenir un code propre et bien structuré.

Extensions pour la productivité des développeurs :

En plus des outils spécifiques à Leaflet.js, Visual Studio Code propose une multitude d’extensions pour améliorer la productivité des développeurs. Par exemple, des extensions pour la coloration syntaxique améliorée, la gestion de version avec Git, la prise en charge des langages de balisage comme HTML et CSS, et bien plus encore, peuvent être extrêmement utiles dans le contexte du développement de projets de cartographie.

Communauté et support :

Visual Studio Code bénéficie d’une vaste communauté d’utilisateurs et de développeurs, ce qui se traduit par une documentation étendue, des forums de discussion actifs et un support régulier. Cela signifie que les développeurs travaillant sur des projets de cartographie peuvent trouver facilement des ressources et des réponses à leurs questions, ce qui facilite le processus de développement.

Langages de développement

HTML

HTML (HyperText Markup Language) est le langage standard utilisé pour créer et structurer le contenu des pages web. Dans le contexte de cette carte interactive, HTML est utilisé pour définir la structure de la page et intégrer les éléments nécessaires à l’affichage de la carte.

JavaScript

JavaScript (JS) est un langage de programmation utilisé pour rendre les pages web interactives et dynamiques. Dans le contexte du projet de cartographie, le JavaScript est utilisé pour gérer la logique de la carte, y compris l’initialisation de la carte, l’ajout de marqueurs, la gestion des popups et d’autres fonctionnalités

Interactivité : JavaScript permet d’ajouter des fonctionnalités interactives à la carte, telles que des marqueurs personnalisés, des popups informatifs et des événements utilisateur, ce qui améliore l’expérience globale de l’utilisateur.
Flexibilité : JavaScript offre une grande flexibilité en termes de personnalisation de la carte, permettant aux développeurs de répondre aux besoins spécifiques du projet et d’ajouter des fonctionnalités sur mesure en fonction des exigences.
Performance : L’utilisation de bibliothèques JavaScript optimisées telles que Leaflet.js et Leaflet.markercluster contribue à améliorer les performances de la carte, en particulier lors du traitement de grands ensembles de données géographiques.
Évolutivité : JavaScript permet une évolutivité efficace du projet, car il facilite l’ajout de nouvelles fonctionnalités et l’intégration avec d’autres technologies et services tiers, ce qui garantit que la carte peut évoluer avec les besoins changeants de l’utilisateur.

CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir l’apparence visuelle et la mise en page des éléments HTML sur une page web. Dans le contexte du projet de cartographie, le CSS est utilisé pour styliser la carte, les marqueurs, les popups et d’autres éléments associés.

Style pour Centrer la Carte : Les règles CSS définissent la taille et le positionnement du conteneur de la carte
Style pour les Icônes Personnalisées : Des styles sont définis pour les icônes personnalisées utilisées pour les marqueurs sur la carte, notamment la couleur et la taille.
Style pour les Popups : Le style des popups utilisées pour afficher les informations sur les établissements est défini, notamment la police, la couleur de fond et la disposition.

CSS

Ressources

Leaflet

Leaflet.js est une bibliothèque JavaScript open-source utilisée pour créer des cartes interactives dans les applications web. Simple, léger et flexible, Leaflet.js offre une solution efficace pour intégrer des fonctionnalités cartographiques dans un site web ou une application. Voici une description détaillée de ses caractéristiques et avantages :

Légèreté

Leaflet.js est célèbre pour sa légèreté, ce qui signifie qu'il charge rapidement et fonctionne efficacement même sur des appareils avec une puissance de traitement limitée.

Responsive

Leaflet.js est entièrement responsive, ce qui signifie que les cartes créées avec cette bibliothèque s'adaptent automatiquement à différents appareils et résolutions d'écran.

Personnalisation

Les développeurs peuvent facilement créer des cartes interactives sur mesure en utilisant une variété de couches de carte, de marqueurs, de polylignes, de polygones et d'autres éléments graphiques.

Comparaison

Alors que Google Maps offre une solution complète avec une multitude de fonctionnalités, et que Mapbox se distingue par ses capacités avancées de personnalisation et ses outils d’analyse de données, notre choix s’est porté sur Leaflet pour sa simplicité d’utilisation, sa légèreté et sa grande flexibilité, offrant ainsi une solution optimale pour notre projet de cartographie en ligne.

PAYANT

Flexibilité
Styles de carte
Recherche d'adresses
Convivialité
Popularité

FREE

Flexibilité
Styles de carte
Recherche d'adresses
Convivialité
Popularité

PAYANT

Flexibilité
Styles de carte
Recherche d'adresses
Convivialité
Popularité

OpenStreetMap

OpenStreetMap (OSM) est une plateforme de cartographie collaborative en ligne qui offre des données cartographiques gratuites et ouvertes à tous. Voici une analyse de son utilité et de ses fonctionnalités en rapport avec les besoins du projet de cartographie.

1. Données cartographiques ouvertes :

OSM offre un accès gratuit et ouvert à des données cartographiques détaillées, ce qui permet de créer des cartes personnalisées sans restrictions d’utilisation.

2. Intégration facile :

OSM fournit des API et des bibliothèques qui facilitent l’intégration de ses données dans des applications web, comme cela a été fait dans le projet avec Leaflet.js. Cette intégration permet d’afficher les données cartographiques d’OSM sur la carte interactive.

3. Personnalisation des cartes :

Avec OSM, il est possible de personnaliser les cartes en modifiant les styles, en ajoutant des marqueurs, des polygones et d’autres éléments, ce qui correspond aux besoins du projet pour afficher des informations spécifiques sur les sites de projets solaires.

4. Mises à jour régulières :

La communauté OSM effectue régulièrement des mises à jour des données cartographiques, ce qui garantit la disponibilité d’informations précises et à jour pour les utilisateurs de la carte.

5. Collaboratif :

OSM est une plateforme collaborative où les utilisateurs peuvent contribuer en ajoutant, modifiant ou mettant à jour des données cartographiques. Cela permet d’améliorer constamment la qualité des données et de refléter avec précision les changements sur le terrain.

6. Flexibilité et extensibilité :

OSM offre une grande flexibilité et extensibilité grâce à son format de données ouvert (XML, JSON) et à sa structure modulaire. Cela permet d’adapter les fonctionnalités de la carte en fonction des besoins spécifiques du projet.

7. Communauté active :

OSM bénéficie d’une communauté active composée de contributeurs, de développeurs et d’utilisateurs, ce qui offrent un support, des conseils et des ressources précieuses pour les projets basés sur OSM.

SVG - icônes personnalisées

Les Scalable Vector Graphics (SVG) sont un format d’image vectorielle basé sur XML utilisé pour dessiner des graphiques et des icônes. Contrairement aux images matricielles telles que les PNG, les SVG sont constitués de formes géométriques et de chemins, ce qui signifie qu’ils peuvent être redimensionnés à n’importe quelle taille sans perte de qualité. Pour ce projet, nous avons décidé de remplacer les marqueurs proposés par défaut par des icônes de panneaux solaires afin de différencier les projets photovoltaïques des agences de SUN R SOLUTIONS.

Avantages

Les images telles que les PNG ou les JPEG, ont tendance à perdre en qualité lorsqu’elles sont agrandies, ce qui peut entraîner une pixellisation et une baisse de la netteté. En revanche, les SVG sont basés sur des formules mathématiques, ce qui leur permet de s’adapter à n’importe quelle taille d’écran sans perte de qualité.

Légèreté du fichier

Les fichiers SVG sont généralement plus légers que les images raster, ce qui contribue à améliorer les performances de chargement de la page web.

Personnalisation

Les icônes SVG offrent une grande souplesse en termes de personnalisation. Ils peuvent être facilement modifiés en ajustant les propriétés CSS ou en modifiant directement le code SVG.

Clusters

La technologie des groupes de clusters est une approche efficace pour gérer et afficher un grand nombre de marqueurs sur une carte interactive.

Performance : Les groupes de clusters améliorent les performances en réduisant la charge de travail du navigateur en regroupant les marqueurs lorsqu’ils sont trop proches les uns des autres. Cela permet de réduire le nombre de calculs nécessaires pour afficher la carte, ce qui entraîne une expérience utilisateur plus fluide.
Lisibilité de la carte : En regroupant les marqueurs similaires, les groupes de clusters évitent la surcharge visuelle sur la carte, ce qui rend la carte plus lisible, surtout lorsque le nombre de marqueurs est élevé.
Expérience utilisateur : Les groupes de clusters offrent une expérience utilisateur améliorée en permettant aux utilisateurs d’explorer facilement des ensembles de données denses sans être submergés par un grand nombre de marqueurs.

Recommandations & Conseils

Au cours de mon expérience de stage, j’ai identifié plusieurs recommandations et conseils pour optimiser l’utilisation des technologies associées à la réalisation de la carte intégrée dans WordPress Divi, en mettant particulièrement l’accent sur l’intégration d’OpenStreetMap (OSM) et de Leaflet.js.

Intégration fluide dans Divi :
- Assurez-vous que l’intégration de la carte interactive dans Divi se fait de manière fluide et harmonieuse. Divi offre une grande flexibilité en matière de conception, mais il est essentiel de tester régulièrement la compatibilité avec les différents modules et fonctionnalités de Divi pour garantir une expérience utilisateur optimale.
Optimisation des performances :
- Optimiser les performances de la carte pour garantir un chargement rapide de la page. Cela peut inclure la réduction de la taille des fichiers JavaScript, le mise en cache des ressources et l’utilisation de techniques d’optimisation des images.
Personnalisation avancée :
- Visitez en détail les fonctionnalités de personnalisation avancée offertes par Leaflet.js pour créer une carte personaliser qui correspond parfaitement aux besoins et à l’esthétique du site web. Cela peut inclure la personnalisation des marqueurs, des popups et des contrôles de la carte.
Sécurité et mises à jour :
- Assurez-vous que toutes les bibliothèques et plugins utilisés, y compris Leaflet.js, sont régulièrement mis à jour pour garantir la sécurité et la stabilité du site web.

Map projets

Présentation

Map

Infos projets

Localisation

Besoin à l'origine du projet

Etapes du projet

Oganisation et découverte de l'environnement

Phase de développement

Réunion

Validation et publication

Planification Prévisionnelle

Veille thechnologique menée

Sources

Outils de développement

WAMPSERVER

Visual Studio Code

Langages de développement

HTML

JavaScript

CSS

Ressources

Leaflet

Légèreté

Responsive

Personnalisation

Comparaison

Google Maps

Leaflet

MapBox

OpenStreetMap

SVG - icônes personnalisées

Avantages

Légèreté du fichier

Personnalisation

Clusters

Recommandations & Conseils