Réalisations / Site d'un constructeur, avec carte des chantiers
Site vitrineSite d'un constructeur, avec carte des chantiers
Vingt réalisations à filtrer, une vraie carte des chantiers et un espace privé pour ajouter ses références.
Le besoin
Une entreprise de construction veut un site haut de gamme pour montrer ses réalisations aux promoteurs, aux bailleurs et aux maîtres d'œuvre, avec une carte des chantiers et un espace pour gérer seule ses contenus.
Ce que j'ai construit
Vingt réalisations, à filtrer par type d'ouvrage, par avancement et par année, en grille ou sur une carte. Chacune a sa page, avec ses chiffres et une petite carte centrée sur le chantier.
Une carte des chantiers sur le fond Plan IGN, qui zoome jusqu'à la rue : un point par chantier, une bulle avec le lien vers sa page.
Un espace privé : on y ajoute une réalisation, avec sa photo et son adresse cherchée sur la carte. Elle apparaît aussitôt dans le catalogue, sur la carte et sur sa propre page.
Démonstration réalisée pour une annonce : l'entreprise, les chiffres et les chantiers sont inventés, même si les points tombent près de vraies villes.
- Leaflet
- Plan IGN
À essayer dans la démo
- Filtrez les réalisations par type, puis passez en vue carte : les mêmes ouvrages deviennent des points.
- Sur la carte des chantiers, zoomez jusqu'à la rue et cliquez un point : sa bulle mène à la page du chantier.
- Ouvrez l'espace privé (mot de passe : chantier) et ajoutez une réalisation en cherchant une adresse : elle apparaît aussitôt sur la carte et dans le catalogue.
Ce que j'ai vérifié
- La carte charge le vrai fond Plan IGN et zoome jusqu'à la rue.
- La recherche d'adresse interroge le service de géocodage de l'IGN.
- La photo ajoutée est réduite dans le navigateur avant d'être enregistrée.
Simulé dans la démo
- Ce que vous ajoutez dans l'espace privé reste dans votre navigateur : ni base de données, ni compte. Le formulaire de contact n'envoie rien.
Lighthouse : accessibilité et référencement à 100, performance entre 90 et 94 avec la carte. Le parcours complet, ajout d'une réalisation compris, a été joué dans Chrome et dans WebKit, le moteur de Safari.
La démonstration en captures
