Woosmap Geolocation API

Sample Get Position from Woosmap Geolocation API

by woosmap

HTML

<div class="container">
  <div class="flex staticmap">
  <div style="margin-right: 5px;"><pre id='metadata' ></pre></div>
  <div>
  
  
    <img id='loader-position-map' src="https://developers.woosmap.com/assets/images/loader.svg" alt='loading' />
    <img id='position-map' alt='store map' />
  </div>
  </div>
</div>

CSS

body {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: #FBFBFB;
  margin: 0;
  color: rgba(0, 0, 0, 0.847);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
}

.container {
  margin: 5px;
}

p {
  margin: 0.3em 0;
}

#position-map {
  display: none;
}



#metadata{
width: 40%;
}
.flex {
  display: flex;
}



.geolocsuccess {
  text-decoration: underline;
  color: green
}

.geolocapproximate {
  text-decoration: underline;
}

pre {
   margin: 0;
   margin-top: 0.5em;
   padding-left: 5px;
   font-size:14px;
   line-height: 1.3em; }
 
 .string {
   color: green;
 }
 
 .number {
   color: magenta;
 }
 
 .boolean {
   color: blue;
 }
 
 .null {
   color: magenta;
 }
 
 .key {
   color: #1D1D1D;
 }

JavaScript

const woosmapKey = "foodmarkets-woos";
 const googlemapsKey = "AIzaSyCOtRab6Lh2pNn7gYxvAqN5leETC24OXYQ"

 function showMap() {
   document.getElementById('loader-position-map').style.display = "none";
   document.getElementById('position-map').style.display = "block";
 }

/*---- for pretty print json Search Parameters -----*/
function syntaxHighlight(json) {
  if (typeof json != 'string') {
    json = JSON.stringify(json, undefined, 2);
  }
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
    var cls = 'number';
    if (/^"/.test(match)) {
      if (/:$/.test(match)) {
        cls = 'key';
      } else {
        cls = 'string';
      }
    } else if (/true|false/.test(match)) {
      cls = 'boolean';
    } else if (/null/.test(match)) {
      cls = 'null';
    }
    return '<span class="' + cls + '">' + match + '</span>';
  });
}


 function displayMetadata(position) {   
   document.getElementById('metadata').innerHTML =  syntaxHighlight(position);
 }

 function displayMap(mapSrc) {
   const positionMap = document.getElementById('position-map');
   positionMap.src = mapSrc;
   positionMap.style.maxWidth = "500px";
   positionMap.style.width = "100%";
   if (positionMap.complete) {
     showMap();
   } else {
     positionMap.addEventListener('load', showMap());
     positionMap.addEventListener('error', () => {
       positionMap.src = "//developers.woosmap.com/assets/images/no_map.png";
     })
   }
 }

 function buildMap(position) {
   let mapSrc = "//developers.woosmap.com/assets/images/no_map.png";
   if (position.latitude) {
   	 var zoom = 12;
     if(position.accuracy > 200) {
     		zoom = 4;
     } else if(position.accuracy > 50) {
     		zoom = 5;
     } else if( position.accuracy > 25) {
     		zoom = 8;
     } else  if(position.accuracy > 10) {
     		zoom = 9;
     } else ...