[OpenLayers-Users] Towards an eraser tool in OpenLayers

Dan Garland dan at dangarland.co.uk
Tue Jan 26 04:46:51 EST 2010


Apologies if this was received twice- I didn't see it show up on the 
archive page and didn't get a bounceback...

Hi all,

I'm a Ruby on Rails developer working on my first project with 
OpenLayers. I'm tasked with developing an free-hand eraser tool that can 
erase features created by the drawFeatures tool. Amongst other things 
we've tried, my thinking is moving towards creating a SVG mask, based on 
the existing drawing tool, in which the 'erased' line is actually a 
black line within a white, rectangular SVG mask, which when applied over 
the top of the tile layer would mask any drawn features from underneath. 
I anticipate something like this:

<svg width="8cm" height="8cm" viewBox="0 0 800 800" version="1.1"
      xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="3968" 
height="2964">
       <rect x="0" y="0" width="3968" height="2964" fill="white" />
       <!-- The 'eraser' line -->
       <polyline fill="none" stroke="black" stroke-width="25" 
points="400,0 400,800" />
     </mask>
   </defs>

<!-- Example drawn features -->

   <polyline id="myline" points="0,0 800,800" fill="none" 
stroke-opacity="1" stroke-width="25" stroke-linecap="round" 
stroke-linejoin="round" stroke-dasharray="none"/>
   <polyline id="myline2" points="0,100 800,100" fill="none" 
stroke-opacity="1" stroke-width="25" stroke-linecap="round" 
stroke-linejoin="round" stroke-dasharray="none"/>
   <polyline id="myline3" points="0,400 800,400" fill="none" 
stroke-opacity="1" stroke-width="25" stroke-linecap="round" 
stroke-linejoin="round" stroke-dasharray="none"/>

    <use xlink:href="#myline" stroke="red" mask="url(#Mask)" />
    <use xlink:href="#myline2" stroke="red" mask="url(#Mask)" />
    <use xlink:href="#myline3" stroke="red" mask="url(#Mask)" />

</svg>

The problems I face with this approach is knowing how best to manipulate 
the existing SVG object being referenced by OpenLayers. I wonder whether 
it is feasible in OpenLayers to develop a control based on the 
drawFeature tool that

1) Adds the mask <defs> section to the SVG Root at startup
2) Creates polyline elements with the mask
3) Adds <use> elements for each element in the tile layer to connect the 
id and the mask

Before I dive in and spent hours in an unfamiliar area I wonder if any 
OpenLayers developers have encountered this use case and have a better 
solution, or can shed any light on this proposed approach.

Best Regards,
Dan Garland




More information about the Users mailing list