banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Printemps des cartes 2024

Pages: 1

 

#1 Tue 29 March 2016 18:54

Sylvain M.
Participant assidu
Lieu: Saint-Pierre-des-Nids (53)
Date d'inscription: 8 Sep 2005
Messages: 983

[LeafLet] Combiner markercluster et Custom Marker

Bonsoir à tous (bis),

Dernière question de la journée (promis !)

J'ai réussi à adapter à mes besoin le plugin Leaflet.markercluster (https://github.com/Leaflet/Leaflet.markercluster).
C'est vraiment top !!!
Je souhaiterais juste adapter le marker par défaut une fois que ceux-ci ne sont plus "clusterisés" (par défaut, c'est le marker bleu de Leaflet).
J'ai bien vu les fichiers CSS qui permettent de modifier l'apparence de la "Clusterisation", mais je ne vois pas où et comment modifier le Marker par défaut... (par exemple avec cette méthode)

Comme mon GeoJson contient des polygones et des points, j'ai réussi à changer l'apparence des polygones en précisant un style [voir code ci-dessous].
Ne reste plus qu'à le faire pour les points...
Une idée ?

Code:

var monStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
    };


var markers = L.markerClusterGroup();
        var geoJsonLayer = L.geoJson(geoJsonData, {
      style: monStyle,
            onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name);        
            }
        });
Sylvain M.

Hors ligne

 

#2 Wed 30 March 2016 09:28

Francois Gueydon
Participant actif
Lieu: Castelnaud la Chapelle
Date d'inscription: 17 Jun 2015
Messages: 68

Re: [LeafLet] Combiner markercluster et Custom Marker

Si tu veux customiser de façon simple les pictos d'un geojson, tu peux rajouter a ton geojson une colonne indiquant le picto a afficher et ensuite dire à leaflet que l'url de l’icône est celui précisé dans la colonne que tu as crée. L'avantage est de pouvoir afficher plusieurs pictos différents pour une même couche.
Mettons que je crée une colonne appelée icone, je la renseigne avec différents pictos selon mes besoins, parking.png, arretbus.png ect..
Pour dire à leaflet d'afficher le picto indiquée dans la colonne ca donne:

var tacouche = new L.geoJson(tacouche,{
                return L.marker(latlng, {
                    icon: L.icon({
                        iconUrl: feature.properties.icone,

le bout de code utile est: iconUrl: feature.properties.icone,  ça précise à leaflet que l'url du picto est situé dans ton geojson, que tu as crée préalablement en renseignant ce que tu veux.
Si tu veux un exemple mélangeant marker cluster et icones customisés tu peux prendre des bouts de code sur ce petit projet:
http://37.59.20.51/eglises/

Dernière modification par Francois Gueydon (Wed 30 March 2016 09:32)

La cartographie sans SIG existe encore: http://www.cartographersguild.com/content.php
Site perso: http://francoisgueydon.jimdo.com/

Hors ligne

 

#3 Wed 30 March 2016 11:24

Sylvain M.
Participant assidu
Lieu: Saint-Pierre-des-Nids (53)
Date d'inscription: 8 Sep 2005
Messages: 983

Re: [LeafLet] Combiner markercluster et Custom Marker

Si tu veux un exemple mélangeant marker cluster et icones customisés tu peux prendre des bouts de code sur ce petit projet:
http://37.59.20.51/eglises/


Super ! Il y a plein de bonnes pistes là dedans : merci du partage.

Pour ce qui est d'ajouter une colonne icone dans le GeoJson, c'est effectivement plus simple derrière, mais là ce n'est pas moi qui créé le GeoJson (il est créé via l'API Overpass Turbo). Du coup, je souhaite que ce soit Leaflet qui détermine l'icône personnalisée (et en plus, je n'ai qu'un type d'icône sur ma couche).

Avec la fonction L.icon / iconUrl, je devrais y parvenir : merci pour tes bons conseils !

A+

Sylvain M.

Sylvain M.

Hors ligne

 

#4 Wed 30 March 2016 14:55

Sylvain M.
Participant assidu
Lieu: Saint-Pierre-des-Nids (53)
Date d'inscription: 8 Sep 2005
Messages: 983

Re: [LeafLet] Combiner markercluster et Custom Marker

Bon, je ne suis vraiment pas doué en JS (mais je m'améliore grâce à vous, croyez moi !).

J'ai tenté d'adapter mon code, mais mes markers restent définitivement bleus...

Voici ce que j'ai écris :

Code:

        var MonIcon = L.icon({
          iconUrl: 'img/monicon.png',
          shadowUrl: 'img/monicon_shadow.png',
          iconSize:     [38, 95],
          shadowSize:   [50, 64],
          iconAnchor:   [22, 94],
          shadowAnchor: [4, 62],
          popupAnchor:  [-3, -76]
      });

        var map = L.map('map')
                .addLayer(layer1, layer2, layer3);
        var markers = L.markerClusterGroup();
        var geoJsonLayer = L.geoJson(geoJsonData, {
      icon: MonIcon,
            onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name);        
            }
        });
        markers.addLayer(geoJsonLayer);
        map.addLayer(markers);

Suis-je loin du but ?

Merci pour votre aide !

Sylvain M.

Sylvain M.

Hors ligne

 

#5 Wed 30 March 2016 16:16

Francois Gueydon
Participant actif
Lieu: Castelnaud la Chapelle
Date d'inscription: 17 Jun 2015
Messages: 68

Re: [LeafLet] Combiner markercluster et Custom Marker

Tu peux essayer de définir ton icône directement dans la fonction qui appelle ta couche de point

Code:

 var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name)        
            },
              pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: L.icon({
                        iconUrl: 'img/monicon.png',
                        iconSize:     [38, 48], 
                        iconAnchor:   [12, 12], 
                        popupAnchor:  [0, -14]
                })
            }}

       };

Je sais pas trop si ca marchera mais ca t'aideras peut être. Perso je pars souvent du code généré par qgis2web que je modifie ensuite pour arriver à ce que je veux, ça aide pour les novices en js:)

Dernière modification par Francois Gueydon (Wed 30 March 2016 16:18)

La cartographie sans SIG existe encore: http://www.cartographersguild.com/content.php
Site perso: http://francoisgueydon.jimdo.com/

Hors ligne

 

#6 Wed 30 March 2016 16:40

Sylvain M.
Participant assidu
Lieu: Saint-Pierre-des-Nids (53)
Date d'inscription: 8 Sep 2005
Messages: 983

Re: [LeafLet] Combiner markercluster et Custom Marker

Merci François,
J'ai essayé d'adapter, mais dans le code que tu me proposes, il y a une parenthèse non fermée, et je ne sais pas vraiment où la fermer.
Il s'agit en principe de celle de L.marker(
(avec notepad2, elle apparait en bleu au lieu d'être en rouge comme les autres parenthèse et accolades fermées)
Désolé pour une question aussi basique... :-$

Sylvain M.

Hors ligne

 

#7 Wed 30 March 2016 16:55

Sylvain M.
Participant assidu
Lieu: Saint-Pierre-des-Nids (53)
Date d'inscription: 8 Sep 2005
Messages: 983

Re: [LeafLet] Combiner markercluster et Custom Marker

C'est bon, j'ai trouvé !!

Code:

var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name)        
            },
              pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: L.icon({
                        iconUrl: 'img/monicon.png',
                        iconSize:     [38, 48], 
                        iconAnchor:   [12, 12], 
                        popupAnchor:  [0, -14]
                })
            })}

       });

Ça marche !!! MERCI !!

Sylvain M.

Hors ligne

 

#8 Wed 30 March 2016 17:02

Francois Gueydon
Participant actif
Lieu: Castelnaud la Chapelle
Date d'inscription: 17 Jun 2015
Messages: 68

Re: [LeafLet] Combiner markercluster et Custom Marker

hehe félicitation, les joies du js ou une simple parenthèse peut transformer une page blanche en carte fonctionnelle ^^

La cartographie sans SIG existe encore: http://www.cartographersguild.com/content.php
Site perso: http://francoisgueydon.jimdo.com/

Hors ligne

 

 

Pages: 1

Pied de page des forums

Powered by FluxBB