web-dev-qa-db-fra.com

Dépliant changeant la couleur du marqueur

Existe-t-il un moyen de changer les couleurs de marqueur de manière aléatoire dans Leaflet? J'utilise des éléments svg qui pourraient être stylés. Je sais que c'est possible avec mapbox.js

EDIT: Pour clarifier ce que je compte faire: Si vous ajoutez des marqueurs à la carte via un double clic ou quelque chose comme ça, il devrait avoir des couleurs aléatoires. Pour ce faire, je voulais utiliser des icônes svg pour les marqueurs afin de les styler.

Ceci est mon code:

myIcon = L.icon({
  iconUrl: "icon_33997.svg",
  iconAnchor: pinAnchor
});

newMarker = L.marker(lat, long], {
  icon: myIcon
});
leaflet
46
Chromos

Il s’agit donc d’un des principaux succès de Google en ce qui concerne le style de Leaflet Icon, mais sa solution ne fonctionnait pas sans tiers et j’avais ce problème dans React, car nous avions besoin de dynamique. couleurs pour nos itinéraires et icônes.

La solution que j'ai proposée consistait à utiliser l'attribut Leaflet.DivIconhtml , il vous permet de transmettre une chaîne évaluée dans un élément DOM.

Ainsi, par exemple, j'ai créé un style de marqueur:

const myCustomColour = '#583470'

const markerHtmlStyles = `
  background-color: ${myCustomColour};
  width: 3rem;
  height: 3rem;
  display: block;
  left: -1.5rem;
  top: -1.5rem;
  position: relative;
  border-radius: 3rem 3rem 0;
  transform: rotate(45deg);
  border: 1px solid #FFFFFF`

const icon = Leaflet.divIcon({
  className: "my-custom-pin",
  iconAnchor: [0, 24],
  labelAnchor: [-6, 0],
  popupAnchor: [0, -36],
  html: `<span style="${markerHtmlStyles}" />`
})

Changement background-color dans markerHtmlStyles à votre couleur personnalisée et vous êtes prêt à partir.

Map with multiple coloured Markers

47
tutts

Lier dans les icônes de ce site!

https://github.com/pointhi/leaflet-color-markers

Informations détaillées sur les procédures incluses sur le site.

27
K. Rohde

Les marqueurs de feuillets sont stockés sous forme de fichiers contrairement à d'autres objets (comme des polylignes, etc.)

Si vous voulez vos propres marqueurs, vous pouvez trouver Le tutoriel officiel sur les tracts qui explique comment le faire.

MODIFIER :

Après avoir lu cette conversation avec le développeur principal, j'ai recherché le marqueur SVG et le voici .

Avec cela, vous devriez pouvoir colorer le marqueur comme vous le souhaitez et définir sa couleur de manière aléatoire.

MODIFIER ENCORE:

Vous pouvez utiliser MakiMarkers pour définir la couleur d'un marqueur et utiliser cette extension pour créer des options aléatoires. (C'est simple et bien expliqué)

21
vdolez

Puisque vous travaillez avec des éléments svg, vous pouvez alimenter l’icône de votre marqueur avec la propriété L.divIcon de html au lieu d’utiliser iconUrl de L.icon à lier votre image.

L.marker(latlng, {
    icon: L.divIcon({
        className: 'ship-div-icon',
        html: '<svg>...</svg>'
    })
}).addTo(map);

Ensuite, utilisez CSS remplissage propriété pour colorer votre forme svg. Il pourrait être utile d’ajouter une classe au chemin de svg pour avoir un contrôle précis

<svg ... >
    <g>
        <path class="ship-icon" ... />
    </g>
    ...
</svg>

À la fin, comme j'avais également besoin de changer la couleur du marqueur de manière aléatoire, j'ai directement changé la propriété de remplissage du chemin au moment de la création du marqueur.

var pathFillColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

L.marker(latlng, {
    icon: L.divIcon({
        className: 'ship-div-icon',
        html: '<svg ... ><g><path fill="'+pathFillColor+'" ... /> </g></svg>'
    })
}).addTo(map);
13
guillermogfer

Essayez le Leaflet.awesome-markers lib - il vous permet de définir des couleurs et d’autres styles.

9
Matt

Ah un écouteur d'événement et changez l'icône via la méthode setIcon ():

createdMarker.on("dblclick", function(evt) {

        var myIcon = L.icon({
            iconUrl: 'res/marker-icon-red.png',
            shadowUrl: 'res/marker-shadow.png'
        });
        this.setIcon(myIcon);
});
7
gal007

Voici le SVG de l'icône.

<svg width="28" height="41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="b">
   <stop stop-color="#2e6c97" offset="0"/>
   <stop stop-color="#3883b7" offset="1"/>
  </linearGradient>
  <linearGradient id="a">
   <stop stop-color="#126fc6" offset="0"/>
   <stop stop-color="#4c9cd1" offset="1"/>
  </linearGradient>
  <linearGradient y2="-0.004651" x2="0.498125" y1="0.971494" x1="0.498125" id="c" xlink:href="#a"/>
  <linearGradient y2="-0.004651" x2="0.415917" y1="0.490437" x1="0.415917" id="d" xlink:href="#b"/>
 </defs>
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" fill="#fff" width="12.625" height="14.5" x="411.279" y="508.575"/>
  <path stroke="url(#d)" id="svg_2" stroke-linecap="round" stroke-width="1.1" fill="url(#c)" d="m14.095833,1.55c-6.846875,0 -12.545833,5.691 -12.545833,11.866c0,2.778 1.629167,6.308 2.80625,8.746l9.69375,17.872l9.647916,-17.872c1.177083,-2.438 2.852083,-5.791 2.852083,-8.746c0,-6.175 -5.607291,-11.866 -12.454166,-11.866zm0,7.155c2.691667,0.017 4.873958,2.122 4.873958,4.71s-2.182292,4.663 -4.873958,4.679c-2.691667,-0.017 -4.873958,-2.09 -4.873958,-4.679c0,-2.588 2.182292,-4.693 4.873958,-4.71z"/>
  <path id="svg_3" fill="none" stroke-opacity="0.122" stroke-linecap="round" stroke-width="1.1" stroke="#fff" d="m347.488007,453.719c-5.944,0 -10.938,5.219 -10.938,10.75c0,2.359 1.443,5.832 2.563,8.25l0.031,0.031l8.313,15.969l8.25,-15.969l0.031,-0.031c1.135,-2.448 2.625,-5.706 2.625,-8.25c0,-5.538 -4.931,-10.75 -10.875,-10.75zm0,4.969c3.168,0.021 5.781,2.601 5.781,5.781c0,3.18 -2.613,5.761 -5.781,5.781c-3.168,-0.02 -5.75,-2.61 -5.75,-5.781c0,-3.172 2.582,-5.761 5.75,-5.781z"/>
 </g>
</svg>
4
Daniel Rasmuson

Vous pouvez également utiliser l'API Google Charts pour obtenir des icônes (il suffit de changer "abcdef" avec la couleur hexadécimale souhaitée:

Exemples:

4
Giovanni Benussi

J'ai trouvé le marqueur/icône SVG le meilleur pour le moment. Il est très flexible et permet n'importe quelle couleur que vous aimez. Vous pouvez personnaliser l’ensemble de l’icône sans trop de tracas:

function createIcon(markerColor) {
  /* ...Code ommitted ... */

  return new L.DivIcon.SVGIcon({
            color: markerColor,
            iconSize: [15,30],
            circleRatio: 0.35
  });
}
2
hbulens

Dans [~ # ~] r [~ # ~] , utilisez la fonction addAwesomeMarkers (). Exemple de code produisant un marqueur rouge:

leaflet() %>%
addTiles() %>%
addAwesomeMarkers(lng = -77.03654, lat = 38.8973, icon = awesomeIcons(icon = 'ion-ionic', library = 'ion', markerColor = 'red'))

Lien pour les icônes d'ions: http://ionicons.com/

1
Nick Keramaris

Ecrivez une fonction qui, à partir d'une couleur (ou de toute autre caractéristique), renvoie une représentation SVG de l'icône souhaitée. Ensuite, lors de la création du marqueur, référencez cette fonction avec le ou les paramètres appropriés.

0
webacad

ajoutant à @tutts une excellente réponse, je l’ai modifiée comme suit:

... inclut un légende - où vous pouvez utiliser les icônes FontAwesome ou similaires ...

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: '+ (size * 3) +'px; \
    text-align: center; \
    line-height: '+ (size * 3) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),

    // on another project this is needed: [0, size*2 + border/2]
    iconAnchor: [border, size*2 + border*2], 

    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

et la version ES6 (comme @tutts) .. Je l'utilise avec vue-leaflet

// caption could be: '<i class="fa fa-eye" />',
function makeMarkerIcon(color, caption) {
        let myCustomColour = color + 'd0';

        let size = 10,    // size of the marker
                border = 2;   // border thickness

        let markerHtmlStyles = `
                background-color: ${myCustomColour};
                width: ${size * 3}px;
                height: ${size * 3}px;
                display: block;
                left: ${size * -1.5}px;
                top: ${size * -1.5}px;
                position: relative;
                border-radius: ${size * 3}px ${size * 3}px 0;
                transform: rotate(45deg);
                border: ${border}px solid #FFFFFF;
                `;

        let captionStyles = `
                transform: rotate(-45deg);
                display:block;
                width: ${size * 3}px;
                text-align: center;
                line-height: ${size * 3}px;
                `;

        let icon = L.divIcon({
                className: 'color-pin-' + myCustomColour.replace('#', ''),
                iconAnchor: [border, size*2 + border*2],
                labelAnchor: [-(size/2), 0],
                popupAnchor: [0, -(size*3 + border)],

                html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`
        });

        return icon;
}

var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})
.addTo(mymap);
0
BananaAcid