0

I am loading a number of geojson data (all polygons) and using 3 sliders, the user should be able to get a polygon displayed based on the slide value. Here is an online example of what I intend to achieve. In the online example, as I move the slider, each risk layer displayed changes in coverage (one increases and the other decreases). I have created an example here with two geojson data (small and agriculture). How do I get to target each of the small.geojson polygon to show or hide based on the slider values.

I can't seem to figure out how to go about this as each small polygons (as in the example link I created shows that the data is now a canvas.

PS: This is more of a guide need.

  • Could you explain more in depth what you want to archive? Do I understand you right that you want to change the opacity of each of this three little shapes individually using three sliders? – geraldo Jan 16 '19 at 16:56
  • I think you just need to change the style of your features based on property values of your feature and the value of the slider. In this demo the feature property is the first letter of its name mikenunn.16mb.com/demo/slider-az.html – Mike Jan 16 '19 at 17:50
  • No, I want to change their visibility using the sliders. @geraldo For instance, if slider 1 and slider 2 have a slide value of 2 while slider 3 has the the value of 0, show one of the little shapes. If slider 2 and slider 3 have a slide value of 1 while slider 1 has the the value of 2, show two of the little shapes. Just about this! – b_jugger Jan 17 '19 at 7:34
  • @Mike, yes, this looks like what I have in mind. Unfortunately I can't view source code to understand the logic. I see same issue I am confronted with which is seeing the vector layer as SVG upon inspection of DOM elements – b_jugger Jan 17 '19 at 7:39
1

Here's the source of the A-Z name styling example (based on https://openlayers.org/en/v4.6.5/examples/vector-layer.html but replacing the mouse interaction with a slider)

<!DOCTYPE html>
<html>
  <head>
    <title>Vector Layer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
input[type=range] {
    display: block;
    width: 100%;
}
</style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <form>
      <label>A-Z Slider</label>
      <input id="range" type="range" min="0" max="27" step="1" value="0"/>
    </form>
    <script>

      var range = document.getElementById('range');

      var style = new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new ol.style.Stroke({
          color: '#319FD3',
          width: 1
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: '#000'
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
          })
        })
      });

      var highlightStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#f00',
          width: 1
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255,0,0,0.1)'
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: '#000'
          }),
          stroke: new ol.style.Stroke({
            color: '#f00',
            width: 3
          })
        })
      });

      var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson',
          format: new ol.format.GeoJSON()
        }),
        style: function(feature) {
          if (feature.get('name').charCodeAt(0) == 64 + parseInt(range.value, 10)) {
            highlightStyle.getText().setText(feature.get('name'));
            return highlightStyle;
          } else {
            style.getText().setText(feature.get('name'));
            return style;
          }
        }
      });

      var map = new ol.Map({
        layers: [vectorLayer],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 1
        })
      });

      range.addEventListener('input', function() {

        vectorLayer.getSource().refresh();
      });


    </script>
  </body>
</html>
| improve this answer | |
  • Thank you, @Mike. Will work with this and scale it up to my intended goal. – b_jugger Jan 17 '19 at 9:55

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.