ThomasG77/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Buffer example</title>
  <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="https://rawcdn.githack.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css" type="text/css">
  <style>
    html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      font-family: sans-serif;
      font-size: small;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <script src="https://rawcdn.githack.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"></script>
  <script src="https://unpkg.com/jsts@2.0.2/dist/jsts.min.js"></script>
  <script type="text/javascript">
    var linestring = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "name": "Line for buffer"
          },
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [
                -6.723632812499999,
                40.84706035607122
              ],
              [
                -3.7353515625,
                40.84706035607122
              ],
              [
                -2.900390625,
                41.44272637767212
              ],
              [
                -0.8349609375,
                42.16340342422401
              ],
              [
                0.5712890625,
                42.16340342422401
              ],
              [
                1.8017578124999998,
                43.16512263158296
              ],
              [
                2.109375,
                44.809121700077355
              ],
              [
                2.197265625,
                45.920587344733654
              ],
              [
                4.04296875,
                46.195042108660154
              ],
              [
                4.2626953125,
                47.30903424774781
              ]
            ]
          }
        }
      ]
    }

    vectorSource = new ol.source.Vector({
      projection: 'EPSG:3857'
    });
    vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(linestring, {
      featureProjection: 'EPSG:3857'
    }));

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      title: 'LineString',
      visible: true
    });

    var buffer_types = [
      'CAP_FLAT',
      'CAP_ROUND',
      'CAP_SQUARE'
    ];

    // We create an array of layers using the differnt buffer options
    var buffered_layers = buffer_types.map(function(buffer_type) {
      var visible = false;
      if (buffer_type == 'CAP_ROUND') {
        visible = true
      }
      return createLayerBuffer(linestring, buffer_type, {
        title: 'Layer ' + buffer_type,
        visible: visible
      });
    })

    // We add the original line layer to the array of layers
    buffered_layers.push(vectorLayer);

    var map = new ol.Map({
      layers: [
        new ol.layer.Group({
          title: 'Base maps',
          layers: [
            new ol.layer.Tile({
              title: 'OpenStreetMap',
              type: 'base',
              visible: true,
              source: new ol.source.OSM()
            }),
          ]
        }),
        new ol.layer.Group({
          'title': 'Overlays',
          layers: buffered_layers
        })
      ],
      target: 'map',
      controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
          collapsible: false
        })
      }),
      view: new ol.View({
        center: ol.proj.transform([0.46224, 42.26713],
          'EPSG:4326', 'EPSG:3857'),
        zoom: 5
      })
    });

    var layerSwitcher = new ol.control.LayerSwitcher();
    map.addControl(layerSwitcher);

    function createBuffer(geojsonCollection, distance, options) {
      var ns_buffer = jsts.operation.buffer.BufferParameters;
      var options = options || {};
      var quadrantSegments = options.quadrantSegments || ns_buffer.DEFAULT_QUADRANT_SEGMENTS;
      var endCapStyle = options.endCapStyle || ns_buffer.CAP_ROUND;
      if (['CAP_FLAT','CAP_ROUND','CAP_SQUARE'].indexOf(endCapStyle) != -1) {
        endCapStyle = ns_buffer[endCapStyle];
      }

      var reader = new jsts.io.GeoJSONReader();
      var features_buffered = geojsonCollection.features.map(function(el) {
        var inputGeometry = reader.read(el.geometry);
            inputGeometry = inputGeometry.buffer(distance, quadrantSegments, endCapStyle);
        var geometrybufferGeoJSON = new jsts.io.GeoJSONWriter().write(inputGeometry);
        return {
            "type": "Feature",
            "properties": el.properties,
            "geometry": geometrybufferGeoJSON
        };
      })
      return {
        "type": "FeatureCollection",
        "features": features_buffered
      }
    }

    function createLayerBuffer(geojson, style, options) {
      var options = options || {};
      var title = options.title;
      var visible = options.visible;
      var type = options.type;

      var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          projection: 'EPSG:3857'
        })
      });

      if (title !== undefined) {
        vectorLayer.set('title', title)
      }
      if (visible !== undefined) {
        vectorLayer.set('visible', visible)
      }
      if (type !== undefined) {
        vectorLayer.set('type', type)
      }

      var geojsonBufferObject = createBuffer(geojson, 1, {
        endCapStyle: style
      });

      var formatter = new ol.format.GeoJSON();

      var bufferGeoJSON = formatter.readFeatures(geojsonBufferObject, {
        featureProjection: 'EPSG:3857'
      });

      vectorLayer.getSource().addFeatures(bufferGeoJSON);
      return vectorLayer;
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Buffer example</title>
	<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="https://rawcdn.githack.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css" type="text/css">
	<style>
	html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: sans-serif;
	font-size: small;
	}

	#map {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
	<script src="https://rawcdn.githack.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"></script>
	<script src="https://unpkg.com/jsts@2.0.2/dist/jsts.min.js"></script>
	<script type="text/javascript">
	var linestring = {
	"type": "FeatureCollection",
	"features": [
	{
	"type": "Feature",
	"properties": {
	"name": "Line for buffer"
	},
	"geometry": {
	"type": "LineString",
	"coordinates": [
	[
	-6.723632812499999,
	40.84706035607122
	],
	[
	-3.7353515625,
	40.84706035607122
	],
	[
	-2.900390625,
	41.44272637767212
	],
	[
	-0.8349609375,
	42.16340342422401
	],
	[
	0.5712890625,
	42.16340342422401
	],
	[
	1.8017578124999998,
	43.16512263158296
	],
	[
	2.109375,
	44.809121700077355
	],
	[
	2.197265625,
	45.920587344733654
	],
	[
	4.04296875,
	46.195042108660154
	],
	[
	4.2626953125,
	47.30903424774781
	]
	]
	}
	}
	]
	}

	vectorSource = new ol.source.Vector({
	projection: 'EPSG:3857'
	});
	vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(linestring, {
	featureProjection: 'EPSG:3857'
	}));

	var vectorLayer = new ol.layer.Vector({
	source: vectorSource,
	title: 'LineString',
	visible: true
	});

	var buffer_types = [
	'CAP_FLAT',
	'CAP_ROUND',
	'CAP_SQUARE'
	];

	// We create an array of layers using the differnt buffer options
	var buffered_layers = buffer_types.map(function(buffer_type) {
	var visible = false;
	if (buffer_type == 'CAP_ROUND') {
	visible = true
	}
	return createLayerBuffer(linestring, buffer_type, {
	title: 'Layer ' + buffer_type,
	visible: visible
	});
	})

	// We add the original line layer to the array of layers
	buffered_layers.push(vectorLayer);

	var map = new ol.Map({
	layers: [
	new ol.layer.Group({
	title: 'Base maps',
	layers: [
	new ol.layer.Tile({
	title: 'OpenStreetMap',
	type: 'base',
	visible: true,
	source: new ol.source.OSM()
	}),
	]
	}),
	new ol.layer.Group({
	'title': 'Overlays',
	layers: buffered_layers
	})
	],
	target: 'map',
	controls: ol.control.defaults({
	attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
	collapsible: false
	})
	}),
	view: new ol.View({
	center: ol.proj.transform([0.46224, 42.26713],
	'EPSG:4326', 'EPSG:3857'),
	zoom: 5
	})
	});

	var layerSwitcher = new ol.control.LayerSwitcher();
	map.addControl(layerSwitcher);

	function createBuffer(geojsonCollection, distance, options) {
	var ns_buffer = jsts.operation.buffer.BufferParameters;
	var options = options \|\| {};
	var quadrantSegments = options.quadrantSegments \|\| ns_buffer.DEFAULT_QUADRANT_SEGMENTS;
	var endCapStyle = options.endCapStyle \|\| ns_buffer.CAP_ROUND;
	if (['CAP_FLAT','CAP_ROUND','CAP_SQUARE'].indexOf(endCapStyle) != -1) {
	endCapStyle = ns_buffer[endCapStyle];
	}

	var reader = new jsts.io.GeoJSONReader();
	var features_buffered = geojsonCollection.features.map(function(el) {
	var inputGeometry = reader.read(el.geometry);
	inputGeometry = inputGeometry.buffer(distance, quadrantSegments, endCapStyle);
	var geometrybufferGeoJSON = new jsts.io.GeoJSONWriter().write(inputGeometry);
	return {
	"type": "Feature",
	"properties": el.properties,
	"geometry": geometrybufferGeoJSON
	};
	})
	return {
	"type": "FeatureCollection",
	"features": features_buffered
	}
	}

	function createLayerBuffer(geojson, style, options) {
	var options = options \|\| {};
	var title = options.title;
	var visible = options.visible;
	var type = options.type;

	var vectorLayer = new ol.layer.Vector({
	source: new ol.source.Vector({
	projection: 'EPSG:3857'
	})
	});

	if (title !== undefined) {
	vectorLayer.set('title', title)
	}
	if (visible !== undefined) {
	vectorLayer.set('visible', visible)
	}
	if (type !== undefined) {
	vectorLayer.set('type', type)
	}

	var geojsonBufferObject = createBuffer(geojson, 1, {
	endCapStyle: style
	});

	var formatter = new ol.format.GeoJSON();

	var bufferGeoJSON = formatter.readFeatures(geojsonBufferObject, {
	featureProjection: 'EPSG:3857'
	});

	vectorLayer.getSource().addFeatures(bufferGeoJSON);
	return vectorLayer;
	}
	</script>
	</body>
	</html>