Skip to content

Instantly share code, notes, and snippets.

@paul121
Created June 4, 2020 20:27
Show Gist options
  • Save paul121/d8a7e7441df39b15a02042175c9805fe to your computer and use it in GitHub Desktop.
Save paul121/d8a7e7441df39b15a02042175c9805fe to your computer and use it in GitHub Desktop.
farmOS Map Style Function Demo
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment