paul121/demo.geojson

## demo.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              demo.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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>
	<!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>