georgehrke/geobaeume.html

## geobaeume.html
<!DOCTYPE html>
<html>
  <head>
    <title>GeoJSON</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>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var image = new ol.style.Circle({
        radius: 2,
        fill: new ol.style.Fill({
          color: 'green'
        }),
        stroke: new ol.style.Stroke({color: 'green', width: 1})
      });

      var styles = {
        'Point': new ol.style.Style({
          image: image
        }),
        'LineString': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'green',
            width: 1
          })
        }),
        'MultiLineString': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'green',
            width: 1
          })
        }),
        'MultiPoint': new ol.style.Style({
          image: image
        }),
        'MultiPolygon': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'yellow',
            width: 1
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 0, 0.1)'
          })
        }),
        'Polygon': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'blue',
            lineDash: [4],
            width: 3
          }),
          fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          })
        }),
        'GeometryCollection': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'magenta',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'magenta'
          }),
          image: new ol.style.Circle({
            radius: 10,
            fill: null,
            stroke: new ol.style.Stroke({
              color: 'magenta'
            })
          })
        }),
        'Circle': new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'green',
            width: 1
          }),
          fill: new ol.style.Fill({
            color: 'green'
          })
        })
      };

      var styleFunction = function(feature) {
        return styles[feature.getGeometry().getType()];
      };

      fetch('https://geo.sv.rostock.de/download/opendata/baeume/baeume.json').then((response) => {
        return response.json();
      }).then((trees) => {
        trees.features = trees.features.map((feature) => {
          console.log(feature.geometry.coordinates);
          feature.geometry.coordinates = ol.proj.fromLonLat(feature.geometry.coordinates);
          return feature;
        });

        console.log(trees);

        var vectorSource = new ol.source.Vector({
          features: (new ol.format.GeoJSON()).readFeatures(trees)
        });

        // vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));

        var vectorLayer = new ol.layer.Vector({
          source: vectorSource,
          style: styleFunction
        });

        var map = new ol.Map({
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            }),
            vectorLayer
          ],
          target: 'map',
          controls: ol.control.defaults({
            attributionOptions: {
              collapsible: false
            }
          }),
          view: new ol.View({
            center: ol.proj.fromLonLat([12.108811, 54.083336]),
            maxZoom: 19,
            zoom: 11
          })
        });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>GeoJSON</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>
	</head>
	<body>
	<div id="map" class="map"></div>
	<script>
	var image = new ol.style.Circle({
	radius: 2,
	fill: new ol.style.Fill({
	color: 'green'
	}),
	stroke: new ol.style.Stroke({color: 'green', width: 1})
	});

	var styles = {
	'Point': new ol.style.Style({
	image: image
	}),
	'LineString': new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: 'green',
	width: 1
	})
	}),
	'MultiLineString': new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: 'green',
	width: 1
	})
	}),
	'MultiPoint': new ol.style.Style({
	image: image
	}),
	'MultiPolygon': new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: 'yellow',
	width: 1
	}),
	fill: new ol.style.Fill({
	color: 'rgba(255, 255, 0, 0.1)'
	})
	}),
	'Polygon': new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: 'blue',
	lineDash: [4],
	width: 3
	}),
	fill: new ol.style.Fill({
	color: 'rgba(0, 0, 255, 0.1)'
	})
	}),
	'GeometryCollection': new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: 'magenta',
	width: 2
	}),
	fill: new ol.style.Fill({
	color: 'magenta'
	}),
	image: new ol.style.Circle({
	radius: 10,
	fill: null,
	stroke: new ol.style.Stroke({
	color: 'magenta'
	})
	})
	}),
	'Circle': new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: 'green',
	width: 1
	}),
	fill: new ol.style.Fill({
	color: 'green'
	})
	})
	};

	var styleFunction = function(feature) {
	return styles[feature.getGeometry().getType()];
	};

	fetch('https://geo.sv.rostock.de/download/opendata/baeume/baeume.json').then((response) => {
	return response.json();
	}).then((trees) => {
	trees.features = trees.features.map((feature) => {
	console.log(feature.geometry.coordinates);
	feature.geometry.coordinates = ol.proj.fromLonLat(feature.geometry.coordinates);
	return feature;
	});

	console.log(trees);

	var vectorSource = new ol.source.Vector({
	features: (new ol.format.GeoJSON()).readFeatures(trees)
	});

	// vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));

	var vectorLayer = new ol.layer.Vector({
	source: vectorSource,
	style: styleFunction
	});

	var map = new ol.Map({
	layers: [
	new ol.layer.Tile({
	source: new ol.source.OSM()
	}),
	vectorLayer
	],
	target: 'map',
	controls: ol.control.defaults({
	attributionOptions: {
	collapsible: false
	}
	}),
	view: new ol.View({
	center: ol.proj.fromLonLat([12.108811, 54.083336]),
	maxZoom: 19,
	zoom: 11
	})
	});
	});
	</script>
	</body>
	</html>