JSFiddle - React, Tailwind, and code Playground

by Amir Danish

HTML

<iframe width="100%" height="462" overflow="hidden" scrolling="no" frameborder="0" src="" ; id="showMap" />

JavaScript

function getPosition() {
  // Simple wrapper
  return new Promise((res, rej) => {
    navigator.geolocation.getCurrentPosition(res, rej);
  });
}
console.log(navigator.geolovation);
if (navigator.geolocation) {
  //Initial a request for the location
  navigator.geolocation.getCurrentPosition(function(pos, error) {
    //here i will get my latitude and longitude dynamically based on the user location
    var geoLat = pos.coords.latitude.toFixed(5);
    var geoLng = pos.coords.longitude.toFixed(5);
    console.log(geoLat, geoLng);
    var newSrc = `https://realtime-attack-map.herokuapp.com/?nofx=1&drill_mode=1&lat=${geoLat}&lon=${geoLng}`;
    document.getElementById("showMap").src = newSrc;
  }, function(error) {

    var newSrc3 = `https://realtime-attack-map.herokuapp.com/?nofx=1&drill_mode=1&lat=5.97888&lon=116.0753`;
    document.getElementById("showMap").src = newSrc3;
  });
} else {
  console.log('its not coming here');
  var newSrc2 = `https://realtime-attack-map.herokuapp.com/?nofx=1&drill_mode=1&lat=3.16498&lon=101.61273`;
  document.getElementById("showMap").src = newSrc2;
}