Markers Color

[LawrenceWlt]

How do I add different status colors to the markers? Like, I have icons with different status which should be displayed with different colors.

[miko866]

  let arrow = L.polylineDecorator(layer, {
                id: layer._leaflet_id,
                patterns: [
                  {
                    offset: '100%',
                    endOffset: '100%',
                    repeat: 0,
                    symbol: L.Symbol.arrowHead({
                      pixelSize: 15,
                      polygon: false,
                      pathOptions: {
                        fill: false,
                        fillColor: '',
                        fillOpacity: 1,
                        stroke: true,
                        color: feature.properties.color,
                        opacity: 1,
                        weight: 5,
                        lineCap: 'square',
                        lineJoin: 'miter',
                      },
                    }),
                  },
                ],
              }).addTo(vm.map);

[mugambi40]

Thanks for this. Where do you get feature.properties.color from? Also is ti possible to have a custom marker (perhaps svg) instead of arrow head? Thanks

[mugambi40]

The idea is to have each marker to have a color based on some variable. Say, red for high, green for normal, yellow for low and so on.

[miko866]

@mugambi40 you don't need SVG. You have the props color und there you can change your current color. And feature.properties.color is only my way to take the right data for the current arrow marker from DB.

[mugambi40]

See the image attached. I simply want to load different icon color based on some variables

[miko866]

Without your code, I cannot help you.

[mugambi40]

@miko866 below is my code

`var multiCoords1 = [ [51.4266, 2.8564], [51.7542, 2.1093]], [[48.0193, -2.8125], [46.3165, -2.8564], [44.9336, -1.0107], [44.5278, 1.5820], [44.8714, 3.7353], [45.8287, 5.1855], [48.1953, 5.1416]]
]; var plArray = []; for(var i=0; i<multiCoords1.length; i++) { plArray.push(L.polyline(multiCoords1[i]).addTo(map)); }

var icon = L.divIcon({ className: "svg-marker",
html: `

        <path d="m23.582 9.161c1.07 1.274 2.134 2.553 3.051 3.944 1.567 2.366 2.928 4.82 3.438 7.667 0.434 2.488-0.012 4.804-1.284 6.967-0.672 1.145-1.504 2.158-2.564 2.97-2.293 1.768-4.869 2.502-7.752 2.162-1.963-0.236-3.732-0.917-5.241-2.22-1.501-1.303-2.503-2.913-3.034-4.821-0.751-2.7-0.467-5.332 0.547-7.909 0.953-2.424 2.316-4.612 3.841-6.708 1.27-1.754 2.655-3.419 4.119-5.012 0.736-0.799 1.793-0.736 2.563 0.122 0.812 0.91 1.547 1.89 2.316 2.838z" 
        filter="url(#f1)"
      clip-rule="evenodd" fill="#8BA845" fill-rule="evenodd"/>
    <path d="m16.823 18.64c-2.434 1.975-2.483 5.133-0.869 7.213 1.729 2.232 5 2.599 7.19 0.852 2.228-1.769 2.607-4.983 0.857-7.189-1.741-2.188-5.05-2.6-7.178-0.876z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/>
    </svg>`,
    // iconSize: null,
    iconAnchor: [18, 18],

});

L.polylineDecorator(multiCoords1, {            
    patterns: [
        { 
            offset: '5%', 
            repeat: 50, 
            symbol: L.Symbol.marker({
                rotate: true,
                markerOptions: {
                    clickable: true,
                    interactive: true,
                    icon: icon
                },
                listeners: {
                    click: this.onTrackLineClick,
                    scope: this
                }
            })
        }
    ]

}).addTo(map);

`

[miko866]

I use Vue.js but the logic is the same you muss only the code little change.

Marker Icon: const icon = L.icon({ iconUrl: require('@/assets/img/FireStation.svg'), iconSize: [30, 30], iconAnchor: [13, 30], popupAnchor: [0, -18], });

Then you can dynamically load your new iconUrl depends on the data and simply show it.

[benderlidze]

Hey @miko866 But how do you make different colors for each marker? For example, I need 10 markers on the same line but different colors? Thanks