Leaflet / Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
591 stars 192 forks source link

Is there a way to rotate an icon in vectorgrid #245

Closed 2803media closed 3 years ago

2803media commented 3 years ago

I have a geojson with points and want to style them with icon with orientation and can't find a way to do that with vectogrid. Is anybody can make it works like in this pluging https://github.com/bbecquet/Leaflet.RotatedMarker which only work with marker...

IvanSanchez commented 3 years ago

The answer is "no". There is currently no support for such a feature.

2803media commented 3 years ago

Thanks for this answer!

For those you try to find a solution here is a workaround which is working:

The trick is to use SVG image and generate the rotation on the fly like that:

icon: new LeafIcon({iconUrl: '/images/symblim/generate.php?id=46&rotation=' + properties.ORI}),

here is the generate.php code:

<?php
header('content-type:image/svg+xml');
$rotation = $_GET['rotation'];
$id = $_GET['id'];
?>
<?php if($id == '39'){ ?>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="15" height="15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1.41421;">
    <g transform="rotate(-<?php echo $rotation; ?>,8,8)">
      <g id="path3799" transform="matrix(0.999998,0.00197453,-0.00197453,0.999998,0.0158118,-0.0157807)">
          <path d="M0,4L16,4" style="fill:none;stroke-width:1px;stroke:black;"/>
      </g>
      <g id="path3801" transform="matrix(0.999998,0.00197453,-0.00197453,0.999998,0.0158118,-0.0157807)">
          <path d="M0,12L16,12" style="fill:none;stroke-width:1px;stroke:black;"/>
      </g>
    </g>
</svg>
<?php } ?>