2

I'd like to know if it's possible to buffer a polygon on the INSIDE only using OpenLayers and other Javascript tools (e.g. jsts).

Here's what I found about the topic in general:

Buffering INSIDE a polygon with ArcGIS (possible): Inside buffer with attributes in ArcGIS?

Buffering a polygon on BOTH sides with JSTS (possible): Creating Polyline Buffer in OpenLayers 2?

But I need to buffer a polygon on just the inside. Either a "real" buffer with the output geometry, or a "fake" buffer with just a line thickness and style. However line thickness in OL goes on both sides of the line.

End goal is to get something like this:

enter image description here

Side-question - Does any know if it's possible to do the country outline (like above) via Google Maps API?! Have not been able to find any reference. So I'm trying to duplicate with OpenLayers and a geojson outline of the world.

2 Answers 2

4

JSTS is a port of the Java Topology Suite, if it is a faithful port then it should support providing a negative value for the buffer distance. Providing a negative value for the buffer distance will create an inner buffer of the polygon, providing a negative value for a Point or Polyline will create a an empty geometry object.

The challenge is going to be working out the negative value to provide for the distance so when you style the output buffer geometry it gives you the effect you desire. But you should be able to calculate that based on scale and screen resolution.

3
  • I tried by modifying their sample bjornharrtell.github.com/jsts/examples/buffer.html and nothing comes of passing in a neg value.
    – Vadim
    Aug 13, 2012 at 20:03
  • duhhh. @chenderson you're right and thanks for making me nitpick the code. The order of the polygons matters (of course). So the negative value worked for the example after re-ordering how they are added to the map.
    – Vadim
    Aug 13, 2012 at 20:11
  • I'll post the solution as a separate answers for reference. you get the points for making me revisit the jsts buffer example. Thanks.
    – Vadim
    Aug 13, 2012 at 20:15
3

This is possible. Here's how:

Assuming you need an INNER BUFFER of N points for a given polygon P. N has to be even for this to work. Then all you have to do, using JSTS call the buffer() function with -N/2 (negative N over 2). This creates a new polygon. Let's call it "BufferPoly". Then, all you have to do is set the Style of BufferPoly to have strokeWidth: of original value N.

So from the JSTS example, here are the changes:

http://bjornharrtell.github.com/jsts/examples/buffer.html

input.buffer(-3); // we want an inner buffer of 6px

// Update the Style and Change the order you add the features

var feature1 = new OpenLayers.Feature.Vector(buffer, null, { fillColor: 'blue', fillOpacity: 0, strokeWidth: 6, strokeColor: "pink"});
    var feature2 = new OpenLayers.Feature.Vector(input, null, { fillColor: 'red', fillOpacity: 0, strokeWidth: 1, strokeColor: "black"});
layer.addFeatures([feature2]);
layer.addFeatures([feature1]);

And you get this:

enter image description here

4
  • excellent work! This is going to come in handy for one of my projects.
    – CHenderson
    Aug 13, 2012 at 21:34
  • @colin there's still a "gotcha" in that it only works on that 1 zoom level. Like you said in your post, I have to figure out on the fly how to change the buffer based on zoom level. If you have that figured out, please add here or send me a note. Thanks.
    – Vadim
    Aug 13, 2012 at 21:40
  • 1
    not sure if you cracked this one or not. The buffer works on ground units so you need to use the current resolution of the map to determine how many ground units is covered by N pixels. So a formula along the lines of bufferVal = map.getResolution() * (N / 2) should work - you may need to tweak it a little bit. Create a function and then call it on the zoomend event.
    – CHenderson
    Aug 29, 2012 at 22:01
  • Appreciate you getting back to me on this. We put this on hold but will probably pick up again in October. I'll come back and comment if we find anything different.
    – Vadim
    Aug 29, 2012 at 23:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.