eyllanesc/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/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.2.0/build/ol-debug.js"></script>
    <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
    <style>
        a.skiplink {
            position: absolute;
            clip: rect(1px, 1px, 1px, 1px);
            padding: 0;
            border: 0;
            height: 1px;
            width: 1px;
            overflow: hidden;
        }

        a.skiplink:focus {
            clip: auto;
            height: auto;
            width: auto;
            background-color: #fff;
            padding: 0.3em;
        }

        #map:focus {
            outline: #4A74A8 solid 0.15em;
        }

        map {
            max-width: 760px;
            max-height: 50px;
        }

        .geoButton {
            top: 80px;
            left: .5em;
        }
    </style>
</head>
<body>
<div id="map" class="map" tabindex="0"></div>
<div id="info">Test</div>
<script>
    window.app = {};
    var app = window.app;


    view = new ol.View({
        center: [0, 0],
        zoom: 2
    });

    app.getLocation = function (opt_options) {
        var options = opt_options || {};

        var geoButton = document.createElement('button');
        geoButton.innerHTML = 'L';

        var handleGeolocation = function () {
            /*    var isMobile =  {
                Android: function () {
                  return navigator.userAgent.match(/Android/i);
                },
                BlackBerry: function () {
                  return navigator.userAgent.match(/BlackBerry/i);
                },
                iOS: function () {
                  return navigator.userAgent.match(/iPhone|iPod|iPad/i);
                },
                Opera: function () {
                  return navigator.userAgent.match(/Opera Mini/i);
                },
                Windows: function () {
                  return navigator.userAgent.match(/IEMobile/i);
                },
                any: function () {
                  return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
                }
              };

              if (isMobile.any()){
                geolocation.setTrackingOptions(enableHighAccuracy );
              } */

            var coordinates;
            var geolocation = new ol.Geolocation({
                projection: view.getProjection(),
                tracking: true
            });
            // handle geolocation error.
            geolocation.on('error', function (error) {
                var info = document.getElementById('info');
                info.innerHTML= error.message;
                info.style.display = '';
            });

            var accuracyFeature = new ol.Feature();
            geolocation.on('change:accuracyGeometry', function () {
                accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
            });

            var positionFeature = new ol.Feature();
            positionFeature.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 6,
                    fill: new ol.style.Fill({
                        color: '#3399CC'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#fff',
                        width: 2
                    })
                })
            }));

            geolocation.once('change:position', function () {
                coordinates = geolocation.getPosition();
                positionFeature.setGeometry(coordinates ?
                    new ol.geom.Point(coordinates) : null);
                map.getView().setCenter(coordinates);
                map.getView().setZoom(17);
            });

            new ol.layer.Vector({
                map: map,
                source: new ol.source.Vector({
                    features: [accuracyFeature, positionFeature]
                })
            });
        }

        geoButton.addEventListener('click', handleGeolocation, false);
        geoButton.addEventListener('touchstart', handleGeolocation, false);

        var element = document.createElement('div');
        element.className = 'ol-unselectable ol-control geoButton';
        element.appendChild(geoButton);

        ol.control.Control.call(this, {
            element: element,
            target: options.target
        });

    };

    ol.inherits(app.getLocation, ol.control.Control);
    //Standard Initialisierung


    // Geolocation function


    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }).extend([new app.getLocation()]),
        view: view
    });

    //Display Input Datastream
</script>
</body>
</html>

## main.py
from PyQt5.QtCore import QUrl, QDir
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage
from PyQt5.QtWidgets import QApplication


class OpenLayersView(QWebEngineView):
    def __init__(self, parent=None):
        QWebEngineView.__init__(self, parent)
        self.page().setUrl(QUrl.fromLocalFile(QDir.current().filePath("index.html")))
        self.page().featurePermissionRequested.connect(self.onFeaturePermissionRequested)

    def onFeaturePermissionRequested(self, securityOrigin, feature):
        print(securityOrigin, feature)

        self.page().setFeaturePermission(securityOrigin,
                                         QWebEnginePage.Geolocation,
                                         QWebEnginePage.PermissionGrantedByUser)

if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)
    w = OpenLayersView()
    w.show()
    sys.exit(app.exec_())
	<!DOCTYPE html>
	<html>
	<head>
	<title>Accessible Map</title>
	<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/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.2.0/build/ol-debug.js"></script>
	<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
	<style>
	a.skiplink {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
	}

	a.skiplink:focus {
	clip: auto;
	height: auto;
	width: auto;
	background-color: #fff;
	padding: 0.3em;
	}

	#map:focus {
	outline: #4A74A8 solid 0.15em;
	}

	map {
	max-width: 760px;
	max-height: 50px;
	}

	.geoButton {
	top: 80px;
	left: .5em;
	}
	</style>
	</head>
	<body>
	<div id="map" class="map" tabindex="0"></div>
	<div id="info">Test</div>
	<script>
	window.app = {};
	var app = window.app;


	view = new ol.View({
	center: [0, 0],
	zoom: 2
	});

	app.getLocation = function (opt_options) {
	var options = opt_options \|\| {};

	var geoButton = document.createElement('button');
	geoButton.innerHTML = 'L';

	var handleGeolocation = function () {
	/* var isMobile = {
	Android: function () {
	return navigator.userAgent.match(/Android/i);
	},
	BlackBerry: function () {
	return navigator.userAgent.match(/BlackBerry/i);
	},
	iOS: function () {
	return navigator.userAgent.match(/iPhone\|iPod\|iPad/i);
	},
	Opera: function () {
	return navigator.userAgent.match(/Opera Mini/i);
	},
	Windows: function () {
	return navigator.userAgent.match(/IEMobile/i);
	},
	any: function () {
	return ((isMobile.Android() \|\| isMobile.BlackBerry() \|\| isMobile.iOS() \|\| isMobile.Opera() \|\| isMobile.Windows()));
	}
	};

	if (isMobile.any()){
	geolocation.setTrackingOptions(enableHighAccuracy );
	} */

	var coordinates;
	var geolocation = new ol.Geolocation({
	projection: view.getProjection(),
	tracking: true
	});
	// handle geolocation error.
	geolocation.on('error', function (error) {
	var info = document.getElementById('info');
	info.innerHTML= error.message;
	info.style.display = '';
	});

	var accuracyFeature = new ol.Feature();
	geolocation.on('change:accuracyGeometry', function () {
	accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
	});

	var positionFeature = new ol.Feature();
	positionFeature.setStyle(new ol.style.Style({
	image: new ol.style.Circle({
	radius: 6,
	fill: new ol.style.Fill({
	color: '#3399CC'
	}),
	stroke: new ol.style.Stroke({
	color: '#fff',
	width: 2
	})
	})
	}));

	geolocation.once('change:position', function () {
	coordinates = geolocation.getPosition();
	positionFeature.setGeometry(coordinates ?
	new ol.geom.Point(coordinates) : null);
	map.getView().setCenter(coordinates);
	map.getView().setZoom(17);
	});

	new ol.layer.Vector({
	map: map,
	source: new ol.source.Vector({
	features: [accuracyFeature, positionFeature]
	})
	});
	}

	geoButton.addEventListener('click', handleGeolocation, false);
	geoButton.addEventListener('touchstart', handleGeolocation, false);

	var element = document.createElement('div');
	element.className = 'ol-unselectable ol-control geoButton';
	element.appendChild(geoButton);

	ol.control.Control.call(this, {
	element: element,
	target: options.target
	});

	};

	ol.inherits(app.getLocation, ol.control.Control);
	//Standard Initialisierung


	// Geolocation function


	var map = new ol.Map({
	layers: [
	new ol.layer.Tile({
	source: new ol.source.OSM()
	})
	],
	target: 'map',
	controls: ol.control.defaults({
	attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
	collapsible: false
	})
	}).extend([new app.getLocation()]),
	view: view
	});

	//Display Input Datastream
	</script>
	</body>
	</html>
	from PyQt5.QtCore import QUrl, QDir
	from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage
	from PyQt5.QtWidgets import QApplication


	class OpenLayersView(QWebEngineView):
	def __init__(self, parent=None):
	QWebEngineView.__init__(self, parent)
	self.page().setUrl(QUrl.fromLocalFile(QDir.current().filePath("index.html")))
	self.page().featurePermissionRequested.connect(self.onFeaturePermissionRequested)

	def onFeaturePermissionRequested(self, securityOrigin, feature):
	print(securityOrigin, feature)

	self.page().setFeaturePermission(securityOrigin,
	QWebEnginePage.Geolocation,
	QWebEnginePage.PermissionGrantedByUser)

	if __name__ == '__main__':
	import sys

	app = QApplication(sys.argv)
	w = OpenLayersView()
	w.show()
	sys.exit(app.exec_())