ajout du pacquet npm geoman

[joelclems]

No description provided.

[camillemonchicourt]

GeoMan n'est actuellement pas utilisé dans GeoNature (même si ce serait certainement un bon remplaçant de Leaflet-Draw - #1802). Du coup si il n'est utilisé qu'au niveau d'un module, c'est au niveau du module qu'il faut l'ajouter, et pas de tout GeoNature de ce que j'ai compris.

[codecov]

Codecov Report

Base: 64.13% // Head: 64.13% // No change to project coverage 👍

Coverage data is based on head (3ff0460) compared to base (8ebe38e).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #2099   +/-   ##
========================================
  Coverage    64.13%   64.13%           
========================================
  Files           73       73           
  Lines         6365     6365           
========================================
  Hits          4082     4082           
  Misses        2283     2283           

Flag	Coverage Δ
pytest	64.13% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[joelclems]

J'avais essayé de l'installer au niveau du module mais ce n'était pas aussi simple que d'autres pacquets

Il faut aussi corriger l'image des markers (marker-icon.png et marker-schadow.png), mais on n'a pas la main comme sur leaflet.

GeoNature/frontend/angular.json

Lines 20 to 26 in 3ff0460

	"assets": [
	"src/assets", "src/custom", "src/favicon.ico", "src/external_assets",
	{
	"glob": "**/*",
	"input": "node_modules/leaflet/dist/images/",
	"output": "."
	}

GeoNature/frontend/src/app/GN2CommonModule/map/map.service.ts

Lines 143 to 144 in 3ff0460

	iconUrl: 'marker-icon.png',
	shadowUrl: 'marker-shadow.png',

Avec ces lignes on apporte une solution qui fonctionne à la fois pour les marker de leaflet et ceux de geoman

[bouttier]

C’est quoi le problème avec les markers ? Est-ce que tu peux mettre cette correction à minima dans un commit séparé ?

C’est quoi ton soucis avec l’installation de geoman dans ton module ? Normalement les dépendances du modules sont installé lors du processus d’install lors de l’appelle à cette fonction : https://github.com/PnX-SI/GeoNature/blob/develop/backend/geonature/utils/gn_module_import.py#L282

[joelclems]

Pour les markers:

Par défaut

(sans les modification de angular.json et map.service.ts)

le problème est que l'image de l'ombre du marker (http://localhost:4200/marker-shadow.png) n'est pas trouvé quand on saisi un marker sur la carte (par exemple sous occtax)

Actuellement dans GeoNature

Ces changement permettent de corriger ce problème

GeoNature/frontend/angular.json

Lines 20 to 27 in 8ebe38e

	"assets": [
	"src/assets", "src/custom", "src/favicon.ico", "src/external_assets",
	{
	"glob": "**/*",
	"input": "node_modules/leaflet/dist/images/",
	"output": "./assets/"
	}
	],

GeoNature/frontend/src/app/GN2CommonModule/map/map.service.ts

Lines 140 to 150 in 8ebe38e

	createMarker(x, y, isDraggable) {
	return L.marker([y, x], {
	icon: L.icon({
	iconUrl: 'assets/marker-icon.png',
	shadowUrl: 'assets/marker-shadow.png',
	iconSize: [24, 36],
	iconAnchor: [12, 36],
	}),
	draggable: isDraggable,
	});
	}

les adresse des icônes sont désormais http://localhost:4200/assets/marker-shadow.png et http://localhost:4200/assets/marker.png

ça marche bien mais pas avec les marker de geoman

Proposition

GeoNature/frontend/angular.json

Lines 20 to 26 in 3ff0460

	"assets": [
	"src/assets", "src/custom", "src/favicon.ico", "src/external_assets",
	{
	"glob": "**/*",
	"input": "node_modules/leaflet/dist/images/",
	"output": "."
	}

GeoNature/frontend/src/app/GN2CommonModule/map/map.service.ts

Lines 140 to 150 in 3ff0460

	createMarker(x, y, isDraggable) {
	return L.marker([y, x], {
	icon: L.icon({
	iconUrl: 'marker-icon.png',
	shadowUrl: 'marker-shadow.png',
	iconSize: [24, 36],
	iconAnchor: [12, 36],
	}),
	draggable: isDraggable,
	});
	}

(on peut meme prendre tout simplement)

 createMarker(x, y, isDraggable) {
    return L.marker([y, x], {
      draggable: isDraggable,
    });
  }

les icones sont chargées depuis les adresses http://localhost:4200/marker-shadow.png et http://localhost:4200/marker.png et ça marche pour leaflet-draw et geoman

Remarque

GeoNature/frontend/src/app/GN2CommonModule/map/leaflet-draw/leaflet-draw.component.ts

Lines 14 to 16 in 3ff0460

	delete L.Icon.Default.prototype['_getIconUrl'];
	L.Icon.Default.mergeOptions(CustomIcon);

GeoNature/frontend/src/app/utils/leaflet-icon.js

Lines 6 to 17 in 3ff0460

	export const CustomIcon = Icon.extend({
	options: {
	iconUrl,
	shadowUrl,
	iconRetinaUrl,
	iconSize: [25, 41],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	tooltipAnchor: [16, -28],
	shadowSize: [41, 41],
	},
	});

Il y a aussi ces ligne qui semble traiter ce pb mais si on les commente cela ne change pas (du moins pour la saisie sous occtax)

[joelclems]

Quand je cherche à installer geoman dans le frontend du module,

• je me place dans le dossier frontend du module
• je lance npm i @geoman-io/leaflet-geoman-free
• je lance l'installation du module
  • qui lance un npm install /frontend depsui /frontend

quand je lance npm run start, je tombe sur l'erreur suivante

Error: ../external_modules/modules/frontend/node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.d.ts:4:16 - error TS2665: Invalid module name in augmentation. Module 'leaflet' resolves to an untyped module at '/home/..../GeoNature/frontend/node_modules/leaflet/dist/leaflet-src.js', which cannot be augmented.

declare module 'leaflet' {

je pense que cela viendrait de la ligne
https://github.com/geoman-io/leaflet-geoman/blob/adda4899bf7f4364cf720136faee2645f4e40385/leaflet-geoman.d.ts#L1

comme le paquet geoman n'est pas dans le même répertoire que leaflet, cette ligne ne charge rien et conduit à l'erreur ci dessus

Quand on installe le paquet geoman depuis le repertoire frontrend de goenature et donc que leaflet et geoman sont dans le même dossier <geonature>/frontend/node_modules/ il n'y a plus ce de problème

[joelclems]

PR redirigée vers

• partie marker leaflet marker basedir #2114
• partie geoman ajout de geoman dans les dépendances npm #2115