jmacura
/
p4a-website


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>P4A web - HS Layers</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

</head>
<body>
    <div style="height:30em; width: 100%">
        <div id="hs-app" hs ng-app="hs" ng-controller="Main" style="position: relative; width: 100%; height: 100%; padding: 0; border: 0; margin: 0;"> </div>
    </div>

<script>
    function styleFunction(feature, number) {
      console.log(feature.get('Name'));
      if(feature.get('Name')) {
        return new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 128, 123, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: '#e49905',
          width: 2
        }),
        image: new ol.style.Circle({
          fill: new ol.style.Fill({
            color: 'rgba(255, 128, 123, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#e49905',
            width: 2
          }),
          radius: 5
        }),
      });
      } else {
        return new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 0, 0, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: '#e41905',
          width: 2
        }),
        image: new ol.style.Circle({
          fill: new ol.style.Fill({
            color: 'rgba(255, 0, 0, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#e41905',
            width: 2
          }),
          radius: 5
        }),
      });
      }
    }
    function getLRUser() {
      return (0);
    }
    function hslayersNgConfig(ol) {
      return {
        sizeMode: "container",
        sidebarClosed: true,
        useIsolatedBootstrap: true,
        useProxy: true,
        //proxyPrefix: "/proxy/",
        panelsEnabled: {
            composition_browser: false,
            toolbar: false,
            mobile_settings: true,
            draw: false,
            datasource_selector: false,
            layermanager: false,
            print: true,
            saveMap: false,
            language: false,
            permalink: false,
            feature_crossfilter: false,
            compositionLoadingProgress: false
        },
        default_layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM({
              url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
            }),
            title: "Wikimedia Map",
            base: true,
            visible: true,
            removable: false
          }),
          new ol.layer.Vector({
            title: "Partners",
            style: styleFunction,
            hoveredKeys: ['Name', 'description'],
            hoveredKeysTranslations: {'Name': 'Name', 'description': 'Description'},
            source: new ol.source.Vector({
              format: new ol.format.GeoJSON(),
              url: "./data/Plan4All_Members.geojson" //"https://raw.githubusercontent.com/jmacura/testing/master/partners-dummy.geojson"
            }),
            cluster: true
          })
        ],
        default_view: new ol.View({
          center: ol.proj.transform([17.474129, 52.574000], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          units: "m"
        }),
        locationButtonVisible: false
      }
    }
</script>
<script src="./lib/hslayers-ng.js"></script> <!-- https://publish.lesprojekt.cz/vhs/dist/hslayers-ng.js -->

</body>
</html>