I'm trying to create a dot-density map with OpenLayers (OL) and GeoServer. I've a counties shapefile and I'm creating a vector layer in OL with county shapefile set as source for the vector layer. I need to show dots (based on data in our API) inside the county feature. According to this example, a coordinate is required to draw a point. I need to make sure that any coordinate I give is inside the county feature.

How can I get all the coordinates inside a feature from GeoServer?

  • Hi Ian, I copied the sld in the example and getting the following error: line 27: cvc-complex-type.2.4.a: Invalid content was found starting with element 'sld:VendorOption'. One of '{"opengis.net/sld":Stroke}' is expected. According to documentation, fills are allowed starting 2.4.2, not sure if that's referring to actual geoserver version. My version is: GeoServer Version 2.13.0 Build Date 19-Mar-2018 14:22 Is this not supported on my version of GeoServer? Thanks for your time. – jacob May 26 '18 at 22:25
  • Seems it is done in server side. docs.geoserver.org/latest/en/user/services/wfs/… – neogeomat May 27 '18 at 2:19
  • ignore the validator, does it actually work? – Ian Turton May 27 '18 at 10:30
  • Its not. I tried the state density as is from the example on the topp:State layer. I get a empty map. I also tried a variation of it for my purpose which is pulling the data from sql server, but not showing up. Here is my style: pastebin.com/3gHGKpsP – jacob May 27 '18 at 15:22

Here is how ended up doing it:

    var features = vectorLayer.getSource().getFeatures();

            var dotDensityFeature = [];

            for (var i = 0; i < features.length; i++) {
                var bounds = features[i].getGeometry().getExtent();
                // Get the Center of the feature
                var x0 = bounds[0] + (bounds[2] - bounds[0]) / 2; 
                var y0 = bounds[1] + (bounds[3] - bounds[1]) / 2;
                var w = bounds[2] - bounds[0];
                var h = bounds[3] - bounds[1];

                for (var j = 0; j < features[i].getProperties()["NumOfDots"]; j ++) {
                    // Plot the dots around the center that way they'll be contained inside the feature
                    var x = parseInt(x0 + Math.random() * (w/8));
                    var y = parseInt(y0 + Math.random() * (h/8));

                    var newFeature = features[i].clone();
                    newFeature.setGeometry(new ol.geom.Point([x, y]));
                    newFeature.setStyle(new ol.style.Style({
                        image: new ol.style.Circle({
                            fill: new ol.style.Fill({ color: 'red' }),
                            stroke: new ol.style.Stroke({ color: 'black', width: '0.5' }),
                            radius: 2,


            var dotDensityLayer = new ol.layer.Vector({
                source: new ol.source.Vector({ features: dotDensityFeature }),


For me it needs to be triggered off a button click but should work otherwise also. @Ian Turton solution also work if you don't have the restriction of the number of dots you want to show in each feature.

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.