2

Please see my example OL3 map here of threatened ecosystems in South Africa: https://storage.googleapis.com/expanded-line-7365/DM%20selector%20%20with%20layer%20(demo)/index.html

Please use the search box to search for a District such as Eden, Ugu, West Coast, Sedibeng etc.

It is perfect how the search result highlights and zooms to the feature, but what I want to do is change the styling of this. For example I do not want the fill of the selected feature to become blurry, or possibly change the blue border to another colour? I have been searching through all the JS and CSS files but I have not been able to find where this information is set.

edit

The closest info I have found is this https://github.com/webgeodatavore/ol3-search-layer/blob/master/examples/control-ol3-search-layer.js

But when changing the stroke or fill values, nothing changes on my map.

2

I solve it the following way. In the qgis2web I activate option “Use debug libraries”. Of course, option “Mapping library location” is set to “Local”. As a result, file “ol-debug.js” created in folder “\resources”. In “ol-debug.js”, the code-text has a part in which you can easily customize everything you need. Find and edit this block:

 * Default styles for editing features.
 * @return {Object.>} Styles
 */
ol.style.Style.createDefaultEditing = function() {
  /** @type {Object.>} */
  var styles = {};
  var white = [255, 255, 255, 1];
  var blue = [0, 153, 255, 1];
  var width = 3;
  styles[ol.geom.GeometryType.POLYGON] = [
    new ol.style.Style({
      fill: new ol.style.Fill({
        color: [255, 255, 255, 0.5]
      })
    })
  ];
  styles[ol.geom.GeometryType.MULTI_POLYGON] =
      styles[ol.geom.GeometryType.POLYGON];

  styles[ol.geom.GeometryType.LINE_STRING] = [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: white,
        width: width + 2
      })
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: blue,
        width: width
      })
    })
  ];
  styles[ol.geom.GeometryType.MULTI_LINE_STRING] =
      styles[ol.geom.GeometryType.LINE_STRING];

  styles[ol.geom.GeometryType.CIRCLE] =
      styles[ol.geom.GeometryType.POLYGON].concat(
          styles[ol.geom.GeometryType.LINE_STRING]
      );


  styles[ol.geom.GeometryType.POINT] = [
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: width * 2,
        fill: new ol.style.Fill({
          color: blue
        }),
        stroke: new ol.style.Stroke({
          color: white,
          width: width / 2
        })
      }),
      zIndex: Infinity
    })
  ];
  styles[ol.geom.GeometryType.MULTI_POINT] =
      styles[ol.geom.GeometryType.POINT];

  styles[ol.geom.GeometryType.GEOMETRY_COLLECTION] =
      styles[ol.geom.GeometryType.POLYGON].concat(
          styles[ol.geom.GeometryType.LINE_STRING],
          styles[ol.geom.GeometryType.POINT]
      );

  return styles;
};

You can do something similar by editing the text in the “ol.js”. But the code there does not look too obvious.

  • Nice. The OP might therefore have some joy searching for "override OpenLayers default feature editing style" to try to find a method which doesn't involve altering ol.js. – Tom Chadwin May 12 '18 at 7:41

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.