search

bbecquet / Leaflet.PolylineDecorator

A plug-in for the JS map library Leaflet, allowing to define patterns (like dashes, arrows, icons, etc.) on Polylines.
MIT License
492 stars 114 forks source link

Assign "pixelSize" in CSS #31

Open emrahkutlu opened 9 years ago

emrahkutlu commented 9 years ago

Could you make it possible to change the pixelSize value in CSS? It´s possible to change the pathOptions in CSS by assigning a className, but this won´t works for the "options" with pixelSize. var arrowHead = L.polylineDecorator(arrow, { patterns: [ {offset: '10%', repeat: '25%', symbol: L.Symbol.arrowHead({headAngle: 45, polygon: true, pixelSize: 7, pathOptions: {className: 'pfeil'}})}, ...

bbecquet commented 9 years ago

I fear it's not possible with the current implementation. Symbol shapes are drawn by the plugin as Leaflet Path objects, which can be SVG but also Canvas, upon which CSS has no effect. Moreover, pixelSize is a custom property which can't be mapped to any valid SVG CSS property...

As I wrote in your other issue (#32), SVG symbols are not properly supported now. Maybe something could be achieved with a dedicaded SVG symbol class, which would allow to use CSS width / height as a scaling system in place of pixelSize. But I have yet to work on it.