farmOS Map Style Function Demo

demo.geojson

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -110.8946184878929,
                            44.925434666720605
                        ],
                        [
                            -111.02534631825797,
                            41.005382089607394
                        ],
                        [
                            -104.03140739372749,
                            40.98071410222309
                        ],
                        [
                            -104.03140739372749,
                            45.08718412761215
                        ],
                        [
                            -110.8946184878929,
                            44.925434666720605
                        ]
                    ]
                ]
            },
            "properties": {
                "id": 1
            },
            "id": "measureFeature0"
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -101.87439819270406,
                            39.96139382574361
                        ],
                        [
                            -102.03780798066039,
                            37.072549106202146
                        ],
                        [
                            -94.35754794671338,
                            37.072549106202146
                        ],
                        [
                            -94.61900360744349,
                            40.086528987487895
                        ],
                        [
                            -101.87439819270406,
                            39.96139382574361
                        ]
                    ]
                ]
            },
            "properties": {
                "id": 2
            },
            "id": "measureFeature1"
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -113.999404459063,
                            36.94205684298544
                        ],
                        [
                            -113.999404459063,
                            41.89230760426915
                        ],
                        [
                            -120.01288465585553,
                            41.91663145949738
                        ],
                        [
                            -120.07824857103807,
                            38.804679299036565
                        ],
                        [
                            -114.13013228942805,
                            34.45306466683866
                        ],
                        [
                            -113.999404459063,
                            36.94205684298544
                        ]
                    ]
                ]
            },
            "properties": {
                "id": 3
            },
            "id": "measureFeature2"
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -108.96638299000834,
                            36.790585877471756
                        ],
                        [
                            -108.93370103241706,
                            31.49254456483503
                        ],
                        [
                            -108.08397013504421,
                            31.49254456483503
                        ],
                        [
                            -108.11665209263549,
                            31.937369610643756
                        ],
                        [
                            -103.2143584539459,
                            32.0205362934593
                        ],
                        [
                            -103.08363062358083,
                            37.182168963062125
                        ],
                        [
                            -108.96638299000834,
                            36.790585877471756
                        ]
                    ]
                ]
            },
            "properties": {
                "id": 4
            },
            "id": "measureFeature3"
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -103.96604347854496,
                            49.019327668226566
                        ],
                        [
                            -103.96604347854496,
                            45.9051593894562
                        ],
                        [
                            -96.44919323255426,
                            45.99605157705645
                        ],
                        [
                            -96.80869476605817,
                            46.740226877966336
                        ],
                        [
                            -97.00478651160576,
                            47.78262709049122
                        ],
                        [
                            -97.26624217233588,
                            48.372181044972166
                        ],
                        [
                            -97.29892412992714,
                            48.91204742146655
                        ],
                        [
                            -103.96604347854496,
                            49.019327668226566
                        ]
                    ]
                ]
            },
            "properties": {
                "id": 5
            },
            "id": "measureFeature5"
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -123.9347195668072,
                            45.700106938701225
                        ],
                        [
                            -122.43134951760906,
                            45.56298599370186
                        ],
                        [
                            -121.12407121395852,
                            45.63158840058398
                        ],
                        [
                            -119.16315375848268,
                            46.018751334860525
                        ],
                        [
                            -116.8754167270942,
                            45.97334250386504
                        ],
                        [
                            -117.00614455745925,
                            48.95498721621095
                        ],
                        [
                            -122.82353300870425,
                            49.019327668226566
                        ],
                        [
                            -122.92157888147803,
                            48.48061671557659
                        ],
                        [
                            -122.30062168724399,
                            48.1982025908878
                        ],
                        [
                            -122.33330364483527,
                            47.54050035321265
                        ],
                        [
                            -122.82353300870425,
                            47.69471093081887
                        ],
                        [
                            -122.72548713593045,
                            48.13280785320782
                        ],
                        [
                            -124.62104067622374,
                            48.372181044972166
                        ],
                        [
                            -124.68640459140629,
                            47.95801415506409
                        ],
                        [
                            -124.32690305790237,
                            47.40795777574641
                        ],
                        [
                            -123.9347195668072,
                            46.53827538686815
                        ],
                        [
                            -123.9347195668072,
                            45.700106938701225
                        ]
                    ]
                ]
            },
            "properties": {
                "id": 6
            },
            "id": "measureFeature6"
        }
    ]
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>farmOS Map</title>
    <style>
      html, body {
        margin: 0;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyBEB1xUvz8LG_XexTVKv5ghXEPaCzF9eng"></script>
    <script src="./farmOS-map.js"></script>
    <script src="./mapbox.js"></script>
    <script>
      var options = {
        units: 'metric',
      }
      var myMap = farmOS.map.create("map", options);
      myMap.addBehavior("google");
      myMap.addBehavior("edit");
      myMap.addBehavior("measure", { layer: myMap.edit.layer });
      myMap.edit.wktOn("featurechange", console.log);
      myMap.edit.geoJSONOn("featurechange", console.log);

      function myStyleFunction(feature, resolution, style) {
        var areaId = +feature.get('id');
        console.log(resolution);

        const alpha = (resolution - 10000) / (100-10000);

        var defaultColor = `rgba(0, 0, 0, ${alpha})`;
        var color1 = `rgba(100, 100, 100, ${alpha})`;
        var color2 = `rgba(200, 200, 200, ${alpha})`;

        let color = defaultColor;
        if (areaId % 2 == 0) {
          color = color1
        }
        if (areaId % 2 == 1) {
          color = color2
        }

        return new style.Style({
          fill: new style.Fill({
            color
          }),
          stroke: new style.Stroke({
            color: [220,220,220,1],
            width: 1
          })
        });
      }

      var geojsonOpts = {
        title: 'demolayer',
        url: 'demo.geojson',
        styleFunction: myStyleFunction,
      }

      const geojsonLayer = myMap.addLayer('geojson', geojsonOpts);

      myMap.zoomToLayer(geojsonLayer);
    </script>
  </body>
</html>