Proto OpenStreetMap BZH - v0 - Peillac - Opération Libre - Demo at http://bl.ocks.org/ThomasG77/910965e896320945d2aa1d313bcb43c9 by ThomasG77

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="//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="//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: '//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: '//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>