how to buffer inside a polygon in Javascript

Question

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:

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.

Answer 1

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.

Answer 2

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: