[SPIP Zone] GIS : personnaliser les markers dans la boucle

Archives Zone
1

Bonjour,

Dans le fichier json d'un type d'objet, quel paramètre doit-on ajouter afin de personnaliser le marker (ou sa couleur) de chaque instance d'objet selon un paramètre de sa table (une date, ...) ?

Merci

--
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

2

Bonjour,

Si tu as des mots clef sur tes points, tu peux géré avec l’icone du mots par exemple.

3

Salut,

la méthode de Pierre par mot clefs :

Sinon, pour personnaliser le marker d’un point via le json, il suffit de changer [(#LOGO_GIS|gis_icon_properties)] en [(#CHEMIN{images/marker_perso.png}|balise_img|gis_icon_properties)].
Cf Donc, dans ton json, tu fais ton test et en fonction du résultat, tu changes le chemin du marker.

jean marie

4

A propos, est-ce qu'on peut utiliser un SVG en marker GIS ?
JLuc

Le 09/10/2018 à 08:49, Jean Marie Grall a écrit :

Salut,

la méthode de Pierre par mot clefs : https://contrib.spip.net/GIS-legende-par-mots-cles

Sinon, pour personnaliser le marker d'un point via le json, il suffit de changer [(#LOGO_GIS|gis_icon_properties)] en [(#CHEMIN{images/marker_perso.png}|balise_img|gis_icon_properties)].
Cf https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/gis/trunk/json/gis.html

Donc, dans ton json, tu fais ton test et en fonction du résultat, tu changes le chemin du marker.

             jean marie

Le 09/10/2018 à 08:05, Pierre KUHN a écrit :

Bonjour,

Si tu as des mots clef sur tes points, tu peux géré avec l'icone du mots par exemple.

Le mar. 9 oct. 2018 à 00:17, Stephane Santon <m.spiprezo@santonum.eu <mailto:m.spiprezo@santonum.eu>> a écrit :

    Bonjour,

    Dans le fichier json d'un type d'objet, quel paramètre doit-on ajouter
    afin de personnaliser le marker (ou sa couleur) de chaque instance
    d'objet selon un paramètre de sa table (une date, ...) ?

    Merci

    -- Stéphane

    Les Voisins Spipeurs : http://www.voisins-spipeurs.net
    ----
    spip-zone@rezo.net <mailto:spip-zone@rezo.net> - https://listes.rezo.net/mailman/listinfo/spip-zone

--

Pierre KUHN
http://www.voisins-spipeurs.net

----
spip-zone@rezo.net -https://listes.rezo.net/mailman/listinfo/spip-zone

----
spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

5

Le 09/10/2018 à 10:55, JLuc a écrit :

A propos, est-ce qu'on peut utiliser un SVG en marker GIS ?
JLuc

A priori ça marche pour leaflet, donc ça devrait passer avec gis

--
Bonne journée
Arnaud B. (Mist. GraphX)

6

Le 09/10/2018 à 11:26, Mist. GraphX a écrit :

Le 09/10/2018 à 10:55, JLuc a écrit :

A propos, est-ce qu'on peut utiliser un SVG en marker GIS ?
JLuc

A priori ça marche pour leaflet, donc ça devrait passer avec gis
https://codepen.io/mistergraphx/pen/aaVyvG

super,
ça permet probablement d'obtenir des markers de couleurs différentes dans une carte gis
avec un seul svg stylé différemment pour chaque usage.
JL

7

Salut
Il y à la fonction qui va bien ici
https://zone.spip.net/trac/spip-zone/browser/spip-zone/plugins/gis/trunk/gis_fonctions.php?rev=80096#L388
dans le json généré il est possible de mettre ce qu’on veut comme image (par contre pas de svg je pense)


"properties": {
	"title":"yoyo",
        "description":"[(#VAL{<span class="huhu">#DESCRIPTIF</span>}json_encode)]",
	[(#CHEMIN{des/icones/icon.png}|gis_icon_properties)]
}

Le mar. 9 oct. 2018 à 00:17, Stephane Santon <m.spiprezo@santonum.eu> a écrit :

Bonjour,

Dans le fichier json d’un type d’objet, quel paramètre doit-on ajouter
afin de personnaliser le marker (ou sa couleur) de chaque instance
d’objet selon un paramètre de sa table (une date, …) ?

Merci

–
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

8

Le 09/10/2018 à 14:16, JLuc a écrit :

Le 09/10/2018 à 11:26, Mist. GraphX a écrit :

Le 09/10/2018 à 10:55, JLuc a écrit :

A propos, est-ce qu'on peut utiliser un SVG en marker GIS ?
JLuc

A priori ça marche pour leaflet, donc ça devrait passer avec gis
https://codepen.io/mistergraphx/pen/aaVyvG

super,
ça permet probablement d'obtenir des markers de couleurs différentes dans une carte gis
avec un seul svg stylé différemment pour chaque usage.
JL

----
spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

Hello,

Donc en fait oui mais un peut bêtement, c'est a dire on ne peut utiliser dans leaflet que le svg comme une image, donc sans pouvoir styler autant vu que c'est une ressource externe et pas inclue dans le dom.

cela dit j'ai donc fait quelques recherche et y'a un plugin extension pour leaflet vectorMarkers, et une demo

la c'est déjà beaucoup plus facile d'utiliser même un sprite de symbols si besoins, vu que l'on peut modifier pour passer un svg:use si on veut.

--
Bonne journée
Arnaud B. (Mist. GraphX)

9

A propos, est-ce qu'on peut utiliser un SVG en marker GIS ?

A priori ça marche pour leaflet, donc ça devrait passer avec gis
https://codepen.io/mistergraphx/pen/aaVyvG

super, ça permet probablement d'obtenir des markers de couleurs différentes dans une carte gis
avec un seul svg stylé différemment pour chaque usage.

Donc en fait oui mais un peut bêtement, c'est a dire on ne peut utiliser dans leaflet que le svg comme une image, donc sans pouvoir styler autant vu que c'est une ressource externe et pas inclue dans le dom.

Effectivement, mais (aprés qq recherche aussi) on peut encoder inline le source du svg

avec base64
      iconUrl: 'data:image/svg+xml;base64,' + btoa('<svg>ici source du svg</svg>');

ou urlencodée :
cf : Data URI SVG icons with Leaflet · GitHub

cela dit j'ai donc fait quelques recherche et y'a un plugin extension pour leaflet vectorMarkers, et une demo

https://codepen.io/anon/pen/Jdayb
la c'est déjà beaucoup plus facile d'utiliser même un sprite de symbols si besoins, vu que l'on peut modifier pour passer un svg:use si on veut.

À explorer.
JL

10

ou utiliser les filtres images de spip.

https://framapic.org/gallery#SgpDmZ5gvFuV/774QB2xxgqcy.png,BaaWkyVTFrU8/zGRUFv66L458.png

[(#CHEMIN{css/masque.png}|image_aplatir{png,#COULEUR}|image_masque{css/defaut.png}|gis_icon_properties)]

Le mer. 10 oct. 2018 à 10:13, JLuc <jluc@no-log.org> a écrit :

A propos, est-ce qu’on peut utiliser un SVG en marker GIS ?
A priori ça marche pour leaflet, donc ça devrait passer avec gis
https://codepen.io/mistergraphx/pen/aaVyvG
super, ça permet probablement d’obtenir des markers de couleurs différentes dans une carte gis
avec un seul svg stylé différemment pour chaque usage.

Donc en fait oui mais un peut bêtement, c’est a dire on ne peut utiliser dans leaflet que le svg comme une image, donc
sans pouvoir styler autant vu que c’est une ressource externe et pas inclue dans le dom.

Effectivement, mais (aprés qq recherche aussi) on peut encoder inline le source du svg

avec base64
iconUrl: ‹ data:image/svg+xml;base64, › + btoa(‹ ici source du svg ›);

ou urlencodée :
cf : https://gist.github.com/clhenrick/6791bb9040a174cd93573f85028e97af

cela dit j’ai donc fait quelques recherche et y’a un plugin extension pour leaflet vectorMarkers, et une demo

https://codepen.io/anon/pen/Jdayb
la c’est déjà beaucoup plus facile d’utiliser même un sprite de symbols si besoins, vu que l’on peut modifier pour
passer un svg:use si on veut.

À explorer.
JL

spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

11

Le 10/10/2018 à 11:05, pierre laszczak a écrit :

ou utiliser les filtres images de spip.
Alternatives to
[(#CHEMIN{css/masque.png}|image_aplatir{png,#COULEUR}|image_masque{css/defaut.png}|gis_icon_properties)]

Oui mais utiliser des marqueurs svg éviterait de générer tous ces png

Le svg qui donne le même marqueur fait 500 à 800 octets au lieu de 5 à 8ko pour le png.
La plupart des cartes n'ont pas énormément de marqueurs,
mais le svg a aussi des intérêts en lui-même : vectoriel et potentiellement dynamique.

Je disais on peut changer la couleur du svg dans les différents contextes par css extérieure :
.la_classe_contexte svg {fill: #COULEUR}
mais dans la mesure où on inline le svg ce serait plus simple d'ajouter le "fill: #COULEUR"
inline dans son source à chaque usage (et il n'y aurait plus besoin de styler par css).

JLuc

12

Entièrement d’accord. en 2018 c’est certainnement la meilleur solution

Pour ma part j’avais créer une autre fonction inspiré de gis_icon_properties pour générer des marker.png de 64x64 à afficher en 32x32

ça prend de la charge serveur à la première génération d’images mais le temps de dev était réduit pour un résultat honorable est quasi identique.

Avec smushit sur le serveur (qpng et optipng), les markers font moins de 1000 octets

Le mer. 10 oct. 2018 à 12:03, JLuc <jluc@no-log.org> a écrit :

Le 10/10/2018 à 11:05, pierre laszczak a écrit :

ou utiliser les filtres images de spip.
https://framapic.org/gallery#SgpDmZ5gvFuV/774QB2xxgqcy.png,BaaWkyVTFrU8/zGRUFv66L458.png
[(#CHEMIN{css/masque.png}|image_aplatir{png,#COULEUR}|image_masque{css/defaut.png}|gis_icon_properties)]

Oui mais utiliser des marqueurs svg éviterait de générer tous ces png

Le svg qui donne le même marqueur fait 500 à 800 octets au lieu de 5 à 8ko pour le png.
La plupart des cartes n’ont pas énormément de marqueurs,
mais le svg a aussi des intérêts en lui-même : vectoriel et potentiellement dynamique.

Je disais on peut changer la couleur du svg dans les différents contextes par css extérieure :
.la_classe_contexte svg {fill: #COULEUR}
mais dans la mesure où on inline le svg ce serait plus simple d’ajouter le « fill: #COULEUR »
inline dans son source à chaque usage (et il n’y aurait plus besoin de styler par css).

JLuc

spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone

defaut.png

13

Hop,

Le 10/10/2018 à 12:55, pierre laszczak a écrit :

Entièrement d'accord. en 2018 c'est certainnement la meilleur solution

Pour info, au moins deux plugins sont référencé sur le site de leaflet à ce sujet :

&

Ça pourrait être l'objet d'un plugin extension pour GIS (?).

++
b_b

14

Bonsoir,

Nickel, merci de l'info.

A préciser dans https://contrib.spip.net/GIS-4 , non ?

Le 09/10/2018 à 14:48, pierre laszczak a écrit :

Il y à la fonction qui va bien ici
https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/gis/trunk/gis_fonctions.php?rev=80096#L388
dans le json généré il est possible de mettre ce qu'on veut comme image (par contre pas de svg je pense)

"properties": {
  "title":"yoyo",
         "description":"[(#VAL{<span class="huhu">#DESCRIPTIF</span>}json_encode)]",
  [(#CHEMIN{des/icones/icon.png}|gis_icon_properties)]
}

Le mar. 9 oct. 2018 à 00:17, Stephane Santon <m.spiprezo@santonum.eu Dans le fichier json d'un type d'objet, quel paramètre doit-on ajouter
    afin de personnaliser le marker (ou sa couleur) de chaque instance
    d'objet selon un paramètre de sa table (une date, ...) ?

--
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

15

Le 10/10/2018 à 12:01, JLuc a écrit :

Je disais on peut changer la couleur du svg dans les différents contextes par css extérieure :
.la_classe_contexte svg {fill: #COULEUR}
mais dans la mesure où on inline le svg ce serait plus simple d'ajouter le "fill: #COULEUR"
inline dans son source à chaque usage (et il n'y aurait plus besoin de styler par css).

Avec GIS, gis_icon_properties n'accepte pas les SVG.
Ce serait possible de lui faire accepter... avec peut être des contraintes sur les tailles,
ou d'en écrire un autre dédié SVG.
En attendant, ça marche en remplaçant [(#LOGO_GIS|gis_icon_properties)]
par l'insertion directe des propriétés pour le svg :

"properties": {
  #SET{64marker,
     #VAL{<svg xmlns='SVG namespace’ viewBox='0 0 32 32'><path fill='#}
     |concat{#GET{couleur}}
     |concat{"' d='M16 0C9.8 0 5 4.7 5 10.6c0 2.4 1.6 6.1 4.8 11.7 1.9 3.3 4 6.5 6.1 9.7 2.4-3.4 4.6-6.9 6.3-9.7C25.4 16.7 27 13 27 10.6 27 4.7 22 0 16 0z'/></svg>"}
     |base64_encode}
  #SET{64marker,#VAL{"data:image/svg+xml;base64,"}|concat{#GET{64marker}}}

  "icon": "#GET{64marker}",
  "icon_size": [32,32],
  "icon_anchor": [16,16],
  "popup_anchor": [0,0]
}

Là c'est un marqueur svg uni, dont la couleur dépend d'un #GET{couleur} précalculé,
et j'ai enlevé l'ombre (on pourrait la mettre dans le marqueur plutôt ?)
J'ai aussi essayé avec urlencode mais faudrait insister plus.

JL