0

I am creating an application where user can locate himself on map. the code is working fine in local development environment, but when i deploy it over server(IIS) the code won't work. here is code :

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<script src="/scripts/jquery-1.10.2.min.js"></script>
<script src="/scripts/ol.js"></script>

<style type="text/css">
  #map {
        width: 100%;
        height: 100%;
  }
</style>

<title>location</title>

</head>

  <body>

  <div id="map" class="map"></div>

  <div id="location"></div>

  <button id='buttonx' text='click'>Locate</button>    

  <script type="text/javascript">

   var mousePositionControl = new ol.control.MousePosition({
        className: 'custom-mouse-position',
        target: document.getElementById('location'),
        coordinateFormat: ol.coordinate.createStringXY(5),
        undefinedHTML: '&nbsp;'
    });


   view = new ol.View({
      projection: 'EPSG:3857',
      center: [3800510.28980, 1160303.68138],
      zoom: 14
    });

    var layertileformap = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([mousePositionControl]),
        target: document.getElementById('map'),
        projection: 'EPSG:3857',
        view: view,
        layers: [layertileformap]
    });
    var geolocation = new ol.Geolocation({
        projection: map.getView().getProjection(),
        tracking: false,
        trackingOptions: {
            enableHighAccuracy: true,
            maximumAge: 5000
        }
    });
    var button = document.getElementById('buttonx');
    var handleGetPosition = function (e) {
        var trackingwasalreadyon = geolocation.getTracking();
        alert('Track : ' + trackingwasalreadyon);
        console.log('Track : ' + trackingwasalreadyon);
        if (trackingwasalreadyon) {
            geolocation.setTracking(false);
        } else {
            geolocation.setTracking(true); getPosition();
        }
    };
    button.addEventListener('click', handleGetPosition, false);
    button.addEventListener('touchstart', handleGetPosition, false);
    function getPosition() {
        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.Icon({
                anchor: [0.5, 100],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 1.0,
                src: "/Content/geolocate.png",
            })
        }));
        geolocation.on('change', function () {
            alert('locaCalling');
            var pos = geolocation.getPosition();
            positionFeature.setGeometry(pos ?
                new ol.geom.Point(pos) : null);
            view.setCenter(pos);
            view.setZoom(19);
        });

        new ol.layer.Vector({
            map: map,
            source: new ol.source.Vector({
                features: [accuracyFeature, positionFeature]
            })
        });
    };
</script>
</body>
</html>

After a lot of research i found this link which summarize that the location feature will work over HTTPS only.

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

I just want to ask do we have any process to bypass the feature.

  • "Proxy server" is 3 letters too short to be a comment by itself, but that's what you need. You can either run one locally or see if you can get one online (using a VPN will do the trick, but there are other ways). Important: make sure you trust whoever gives you an https proxy, since they can read your encrypted info (they decrypt it and then re-encrypt it). – barrycarter Jul 11 '18 at 14:48
1

You simply can't bypass https.

It's a mandatory requirement (with exception of localhost usage) as stated by the Geolocation API documentation (an HTML5 API implemented in all browsers), at least for Firefox and Chrome (see browsers compatibility table from MDN).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.