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.


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.

  • 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 '12 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 '12 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 '12 at 20:15

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:


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"});

And you get this:

enter image description here

  • excellent work! This is going to come in handy for one of my projects. – CHenderson Aug 13 '12 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 '12 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 '12 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 '12 at 23:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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