lowzonenose commented 2 months ago

Partager une carte

Ticket de suivi principal : #63

[x] Créer la route /embed
[ ] Mettre en forme la page /embed avec les informations autour / sur la carte : prévisualisation ex. commentaire, titre, icone de localisation, contrôles ...
[x] Lire le permalien de partage
[x] Créer le permalien de partage : publication
[x] Ajouter interface ex. bouton ou menu Partager, bouton Imprimer, partage sur les réseaux sociaux / mails
[x] Créer une iframe de partage : intégration dans une carte

Le permalien de partage

La route /embed lit les paramètres KVP dans l'URL, si ils sont présents. Sinon, on les récupère dans le localStorage. Ex http://localhost:5173/cartes.gouv.fr-entree-carto/embed?c=417070.66959457495,5975301.705064449&z=10&l=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2$GEOPORTAIL:OGC:WMTS(1;1;0),ACCES.BIOMETHANE$GEOPORTAIL:OGC:WMTS(0.47;1;0)&permalink=yes

Ça construction est identique au permalien de la carte. Quelques paramètres sont ajoutés :

commentaire : m string avec contenu encodé
titre : t string avec contenu encodé
localisation : "g" boolean, ajout d'un icone
informations : i boolean, ajout d'informations prédéfinies

iframe

https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

Ex.

<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" 
width="600" 
height="450" 
frameborder="0" 
style="border:0" allowfullscreen>
</iframe>

ou

<iframe 
width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
sandbox="allow-forms allow-scripts allow-same-origin" 
src="https://www.geoportail.gouv.fr/embed/visu.html?
c=2.629940106502114,48.759932488530666&z=17&l0=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2::GEOPORTAIL:OGC:WMTS(1)&permalink=yes" 
allowfullscreen>
</iframe>

Interface

Prévoir une interface sous forme d'un bouton qui ouvre un formulaire (modal). Ce formulaire propose :

partager une iframe
prévisualiser le partage
envoi partage par email
envoi du partage sur les réseaux sociaux

IGNFhc commented 2 months ago

Si je change l'ordre des couches avant de partager le permalien le dernier changement n'est pas prise en compte dans le permalien. Les autres interactions : suppression/ajout de couche et modification de la visibilité fonctionnent correctement.

IGNFhc commented 2 months ago

Petite remarque : un petit icone pour copier le texte au clic serait vraiment pratique !

lowzonenose commented 1 month ago

Si je change l'ordre des couches avant de partager le permalien le dernier changement n'est pas prise en compte dans le permalien. Les autres interactions : suppression/ajout de couche et modification de la visibilité fonctionnent correctement.

On traitera l'ordre des couches dans le permalien quand on prendra en compte toutes les couches (croquis, couche de calculs, import, ...), car ceci facilitera l'algo de changement de position d'une couche. L’événement du gestionnaire de couche layerswitcher:change:position est maintenant disponible.

IGNF / cartes.gouv.fr-entree-carto