ThomasG77/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>Simple Map</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.4.1/build/ol.js" type="text/javascript"></script>
    <script src="//cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
    <script src="https://unpkg.com/ol-popup@2.0.0"></script>
    <script src="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"></script>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css">
    <link rel="stylesheet" href="https://unpkg.com/ol-popup@2.0.0/src/ol-popup.css" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css">
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css">
    <style type="text/css">
      html, body {
        margin: 0;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      .ol-zoom {
        top: .5em;
        right: .5em;
        left: initial;
      }

      .ol-control button{
        background-color: rgba(40, 40, 40, 0.8) !important;
      }

      .ol-geocoder .ol-control, .ol-geocoder .ol-control button:hover {
        background-color: rgba(40, 40, 40, 0) !important;
      }

      .layer-switcher {
          top: 4.5em;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

      // default zoom, center and rotation
      var zoom = 6;
      var center = [-2.3, 48.1];

      if (window.location.hash !== '') {
        // try to restore center, zoom-level and rotation from the URL
        var hash = window.location.hash.replace('#map=', '');
        var parts = hash.split('/');
        if (parts.length === 3) {
          zoom = parseInt(parts[0], 10);
          center = [
            parseFloat(parts[1]),
            parseFloat(parts[2])
          ];
        }
      }

      var osm_source = new ol.source.XYZ({
        url: 'http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png'
      });

      var layerOsm = new ol.layer.Tile({
        title: 'OpenStreetMap BZH',
        type: 'base',
        visible: true,
        source: osm_source
      });

      var vectorLayer = new ol.layer.Vector({
        title: 'Kenteliou',
        visible: true,
        source: new ol.source.Vector({
          url: 'kenteliou_sizhuniek.json',
          format: new ol.format.GeoJSON()
        }),
        style: new ol.style.Style({
          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 40],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/images/marker-icon.png'
          }))
        })
      });

      var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Group({
                'title': 'Base maps',
                layers: [layerOsm]
            }),
            new ol.layer.Group({
                title: 'Overlays',
                layers: [vectorLayer]
            })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat(center),
          zoom: zoom
        }),
        controls: ol.control.defaults({
          // Set to display OSM attributions on the bottom right control
          attributionOptions:  {
            collapsed: false
          }
        }).extend([
          new ol.control.ScaleLine() // Add scale line to the defaults controls
        ])
      });

      var popup = new ol.Overlay.Popup({
        panMapIfOutOfView: false
      });
      map.addOverlay(popup);

      // Popup for onclick event on GeoJSON source
      var popup1 = new ol.Overlay.Popup({
        panMapIfOutOfView: false
      });
      map.addOverlay(popup1);

      // Overlay to manage popup on the top of the map
      // var popup = document.getElementById('popup');
      // var overLay = new ol.Overlay({
      //   element: popup,
      //   position: ol.proj.fromLonLat([0, 0])
      // });

      // map.addOverlay(overLay);

      // Manage click on the map to display/hide popup
      map.on('click', function(e) {
        var info = [];
        map.forEachFeatureAtPixel(e.pixel, function (feature) {
          info.push(/*feature.get('title') + '<br>' + */feature.get('text'));
        });
        if (info.length > 0) {
          // debugger;
          popup.show(e.coordinate, info.join(','));
        } else {
          popup.hide();
        }
      });

      //Instantiate with some options and add the Control
      var geocoder = new Geocoder('nominatim', {
        provider: 'photon',
        targetType: 'text-input',
        lang: 'fr',
        placeholder: 'Klaskañ...',
        limit: 10,
        keepOpen: false,
        preventDefault: true
      });
      map.addControl(geocoder);

      var layerSwitcher = new ol.control.LayerSwitcher({
          tipLabel: 'Légende' // Optional label for button
      });
      map.addControl(layerSwitcher);

      //Listen when an address is chosen
      geocoder.on('addresschosen', function (evt) {
        window.setTimeout(function () {
          popup.show(evt.coordinate, evt.address.formatted);
        }, 1000);
      });

      var shouldUpdate = true;
      var view = map.getView();
      var updatePermalink = function() {
        if (!shouldUpdate) {
          // do not update the URL when the view was changed in the 'popstate' handler
          shouldUpdate = true;
          return;
        }

        var center = ol.proj.toLonLat(view.getCenter());
        var hash = '#map=' +
            view.getZoom() + '/' +
            Math.round(center[0] * 100) / 100 + '/' +
            Math.round(center[1] * 100) / 100;
        var state = {
          zoom: view.getZoom(),
          center: view.getCenter()
        };
        window.history.pushState(state, 'map', hash);
      };

      map.on('moveend', updatePermalink);

      // restore the view state when navigating through the history, see
      // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
      window.addEventListener('popstate', function(event) {
        if (event.state === null) {
          return;
        }
        map.getView().setCenter(event.state.center);
        map.getView().setZoom(event.state.zoom);
        shouldUpdate = false;
      });
    </script>
  </body>
</html>

## kenteliou_sizhuniek.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              kenteliou_sizhuniek.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<title>Simple Map</title>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
	<script src="https://openlayers.org/en/v4.4.1/build/ol.js" type="text/javascript"></script>
	<script src="//cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
	<script src="https://unpkg.com/ol-popup@2.0.0"></script>
	<script src="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"></script>
	<link rel="stylesheet" href="https://openlayers.org/en/v4.4.1/css/ol.css">
	<link rel="stylesheet" href="https://unpkg.com/ol-popup@2.0.0/src/ol-popup.css" />
	<link rel="stylesheet" href="//cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css">
	<link rel="stylesheet" type="text/css" href="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css">
	<style type="text/css">
	html, body {
	margin: 0;
	height: 100%;
	}
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}

	.ol-zoom {
	top: .5em;
	right: .5em;
	left: initial;
	}

	.ol-control button{
	background-color: rgba(40, 40, 40, 0.8) !important;
	}

	.ol-geocoder .ol-control, .ol-geocoder .ol-control button:hover {
	background-color: rgba(40, 40, 40, 0) !important;
	}

	.layer-switcher {
	top: 4.5em;
	}
	</style>
	</head>
	<body>
	<div id="map" class="map"></div>
	<script>

	// default zoom, center and rotation
	var zoom = 6;
	var center = [-2.3, 48.1];

	if (window.location.hash !== '') {
	// try to restore center, zoom-level and rotation from the URL
	var hash = window.location.hash.replace('#map=', '');
	var parts = hash.split('/');
	if (parts.length === 3) {
	zoom = parseInt(parts[0], 10);
	center = [
	parseFloat(parts[1]),
	parseFloat(parts[2])
	];
	}
	}

	var osm_source = new ol.source.XYZ({
	url: 'http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png'
	});

	var layerOsm = new ol.layer.Tile({
	title: 'OpenStreetMap BZH',
	type: 'base',
	visible: true,
	source: osm_source
	});

	var vectorLayer = new ol.layer.Vector({
	title: 'Kenteliou',
	visible: true,
	source: new ol.source.Vector({
	url: 'kenteliou_sizhuniek.json',
	format: new ol.format.GeoJSON()
	}),
	style: new ol.style.Style({
	image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
	anchor: [0.5, 40],
	anchorXUnits: 'fraction',
	anchorYUnits: 'pixels',
	src: 'http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/images/marker-icon.png'
	}))
	})
	});

	var map = new ol.Map({
	target: 'map',
	layers: [
	new ol.layer.Group({
	'title': 'Base maps',
	layers: [layerOsm]
	}),
	new ol.layer.Group({
	title: 'Overlays',
	layers: [vectorLayer]
	})
	],
	view: new ol.View({
	center: ol.proj.fromLonLat(center),
	zoom: zoom
	}),
	controls: ol.control.defaults({
	// Set to display OSM attributions on the bottom right control
	attributionOptions: {
	collapsed: false
	}
	}).extend([
	new ol.control.ScaleLine() // Add scale line to the defaults controls
	])
	});

	var popup = new ol.Overlay.Popup({
	panMapIfOutOfView: false
	});
	map.addOverlay(popup);

	// Popup for onclick event on GeoJSON source
	var popup1 = new ol.Overlay.Popup({
	panMapIfOutOfView: false
	});
	map.addOverlay(popup1);

	// Overlay to manage popup on the top of the map
	// var popup = document.getElementById('popup');
	// var overLay = new ol.Overlay({
	// element: popup,
	// position: ol.proj.fromLonLat([0, 0])
	// });

	// map.addOverlay(overLay);

	// Manage click on the map to display/hide popup
	map.on('click', function(e) {
	var info = [];
	map.forEachFeatureAtPixel(e.pixel, function (feature) {
	info.push(/feature.get('title') + '<br>' + /feature.get('text'));
	});
	if (info.length > 0) {
	// debugger;
	popup.show(e.coordinate, info.join(','));
	} else {
	popup.hide();
	}
	});

	//Instantiate with some options and add the Control
	var geocoder = new Geocoder('nominatim', {
	provider: 'photon',
	targetType: 'text-input',
	lang: 'fr',
	placeholder: 'Klaskañ...',
	limit: 10,
	keepOpen: false,
	preventDefault: true
	});
	map.addControl(geocoder);

	var layerSwitcher = new ol.control.LayerSwitcher({
	tipLabel: 'Légende' // Optional label for button
	});
	map.addControl(layerSwitcher);

	//Listen when an address is chosen
	geocoder.on('addresschosen', function (evt) {
	window.setTimeout(function () {
	popup.show(evt.coordinate, evt.address.formatted);
	}, 1000);
	});

	var shouldUpdate = true;
	var view = map.getView();
	var updatePermalink = function() {
	if (!shouldUpdate) {
	// do not update the URL when the view was changed in the 'popstate' handler
	shouldUpdate = true;
	return;
	}

	var center = ol.proj.toLonLat(view.getCenter());
	var hash = '#map=' +
	view.getZoom() + '/' +
	Math.round(center[0] * 100) / 100 + '/' +
	Math.round(center[1] * 100) / 100;
	var state = {
	zoom: view.getZoom(),
	center: view.getCenter()
	};
	window.history.pushState(state, 'map', hash);
	};

	map.on('moveend', updatePermalink);

	// restore the view state when navigating through the history, see
	// https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
	window.addEventListener('popstate', function(event) {
	if (event.state === null) {
	return;
	}
	map.getView().setCenter(event.state.center);
	map.getView().setZoom(event.state.zoom);
	shouldUpdate = false;
	});
	</script>
	</body>
	</html>