CODEWITHSUNDEEP
svgleafletsvg-filters
mike16889
mike16889

Reputation: 352

svg filter changes on leaflet 'zoom'

I am trying to add some filters to some svg path's in Leaflet, in order to show different "states" of an object, to alert the end user that something is wrong with that specific object.

The issue I am having is the filter changes on zoom, when zoomed out (path gets smaller) the "glow" stays the same size (gets bigger relative to the path), I need it to stay the same relative to the path and not the display. see below images for example.

zoomed out

zoomed in

This is my filter:

    <filter id='polygonStatus-endOfLife' filterRes="10 10" x="-20%" y="-20%" width="140%" height="140%"
            filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
        <feComposite in="SourceAlpha" in2="SourceAlpha" operator="arithmetic" k1="0" k2="8" k3="-0.5" k4="-0.5" x="0%" y="0%" width="100%" height="100%" result="composite"/>
        <feColorMatrix type="matrix" values="1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="composite" result="colormatrix1"/>
        <feMorphology operator="dilate" radius="10 10" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" result="morphology1"/>
        <feGaussianBlur stdDeviation="10 10" x="0%" y="0%" width="100%" height="100%" in="morphology1" edgeMode="none" result="blur2"/>
        <feComposite in="blur2" in2="composite" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite2"/>
        <feMerge x="0%" y="0%" width="100%" height="100%" result="merge">
            <feMergeNode in="composite2"/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>

I would like it closer to how it looks on the "zoomed in" image, more subtle. i basicly need it to act as if your resizing a bitmap image (resize the second screenshot to smaller to see what I mean)

Upvotes: 0

Views: 461

Answers (2)

mike16889
mike16889

Reputation: 352

I have come up with a solution that works. Its probably not the best solution but until i find a better one it will have to do.

I am using jQuery to change the stdDeviation and radius on zoom level change as follows:

map.on('zoomend', function(){
    var size = (Math.pow(map.getZoom(),2) / 50);
    $('#svgFilters feMorphology').attr('radius', size);
    $('#svgFilters feGaussianBlur').attr('stdDeviation', size);
});

I am using the zoom level squared then divided by 50 to get a good looking glow that gets smaller when zooming out, it gets smaller faster than the path itself which for my applications looks better.

Upvotes: 0

Michael Mullany
Michael Mullany

Reputation: 31750

This is an unusual way to add a glow - since it looks like you're drawing the glow separately and then drawing the shape on top? Normally you add a glow directly to a shape via a filter.

If you want a glow that scales with the shape and is applied directly to the shape, then you should try something a bit different using feGaussianBlur and primitiveUnits="objectBoundingBox". Something like:

<filter id="dropshadow" primitiveUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.05"/>
<feComposite operator="over" in="SourceGraphic"/>
</filter>

Upvotes: 1

Related Questions