turf-tag

Performs a spatial join on a set of points from a set of polygons.
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <link rel="stylesheet" href="assets/css/styles.css" type="text/css">
    <script src="//cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
    <script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="assets/js/helpers.js"></script>
    <script src="assets/js/es6-promise.min.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,fetch"></script>
    <script src="assets/js/helpers.js"></script>
    <title>Turf and OpenLayers 3 - Tag</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      // Declare a source for points and drawing
      var vectorSourcePolygons = new ol.source.Vector();
      var vectorSourcePoints = new ol.source.Vector();

      var pointsStyle = [
        new ol.style.Style({
          image: new ol.style.Circle({
            stroke: new ol.style.Stroke({
              color: 'white'
            }),
            fill: new ol.style.Fill({
              color: '#1f6b75'
            }),
            radius: 4
          })
        })
      ];

      var vectorLayerPolygons = new ol.layer.Vector({
        source: vectorSourcePolygons,
        style: [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'black',
              width: 1
            })
          })
        ]
      });

      var vectorLayerPoints = new ol.layer.Vector({
        source: vectorSourcePoints,
        style: pointsStyle
      });

      // Instanciate a map and add layers
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLayerPolygons,
          vectorLayerPoints
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-1.5603, 47.2383]),
          zoom: 11
        })
      });

      Promise.all([
        fetch('assets/data/quartiers_nantes.geojson').then(function(response) {
          return response.json().then(function(json) {
            return json;
          });
        }),
        fetch('assets/data/key_shop_with_name_nantes_area.geojson').then(function(response) {
          return response.json().then(function(json) {
            return json;
          });
        })
      ]).then(function(returned) {
        var polys_fc = returned[0];
        var points_fc = returned[1];
        console.log(polys_fc, points_fc);
        var tagged = turf.tag(points_fc, polys_fc, 'nom', 'quartier');

        // Set random colors. See Paul Irish post at
        // http://www.paulirish.com/2009/random-hex-color-code-snippets/
        var quartiers = {};
        polys_fc.features.forEach(function(el) {
          quartiers[el.properties.nom] = '#' + Math.floor(
            Math.random() * 16777215
          ).toString(16);
        });
        console.log(quartiers);
        vectorLayerPoints.setStyle(function(feature, resolution) {
          if (feature.get('quartier')) {
            if (Object.keys(quartiers).indexOf(feature.get('quartier')) != -1) {
              var randomColor = quartiers[feature.get('quartier')];
              return [new ol.style.Style({
                image: new ol.style.Circle({
                  stroke: new ol.style.Stroke({
                    color: 'white'
                  }),
                  fill: new ol.style.Fill({
                    color: randomColor
                  }),
                  radius: 4
                })
              })];
            }
          } else {
            return pointsStyle;
          }
        });

        vectorSourcePolygons.addFeatures(geojsonToFeatures(polys_fc, {
          featureProjection: 'EPSG:3857'
        }));

        console.log(points_fc, JSON.stringify(tagged));
        vectorSourcePoints.addFeatures(geojsonToFeatures(tagged, {
          featureProjection: 'EPSG:3857'
        }));
      });
    </script>
  </body>
</html>
tag

turf-tag

results matching ""

No results matching ""
