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">
<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%;




  <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
        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) {
        } 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 () {
        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 () {
            var pos = geolocation.getPosition();
            positionFeature.setGeometry(pos ?
                new ol.geom.Point(pos) : null);

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

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


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).
    – user1462
    Jul 11, 2018 at 14:48

1 Answer 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 and acknowledge you have read our privacy policy.

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