Markers Color about leaflet.polylinedecorator HOT 9 OPEN

  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);

from leaflet.polylinedecorator.

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

from leaflet.polylinedecorator.

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.

from leaflet.polylinedecorator.

@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.

from leaflet.polylinedecorator.

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

from leaflet.polylinedecorator.

Without your code, I cannot help you.

from leaflet.polylinedecorator.

@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: <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <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);

`

from leaflet.polylinedecorator.

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.

from leaflet.polylinedecorator.