Dbflex Geolocator.js

geolocator.js

if ('undefined' == typeof window.jQuery) {
  alert('jQuery is required!');
}

// GENERAL
var scriptHelper = {
  dbID: 123123,
  protocol: window.location.protocol
}


// Map 
var GEOMap = {
  setMapData: function () {
    var location_parser = scriptHelper.protocol + '//freegeoip.net/json/?callback=?';
    jQuery.ajax({
      type: 'GET',
      url: location_parser,
      dataType: 'jsonp',
      success: function(data) {
        GEOMap.parseJSON( data );
      },
      error: function() {
        console.log('Ajax request error!');
      }
    });
  },
  parseJSON: function( data ) {
    if ( data ) {
      if ( jQuery('input[name="f_3478754"]').val() == '' && jQuery('input[name="f_3478755"]').val() == '' && jQuery('input[name="f_3478756"]').val() == '' ) {
        jQuery('input[name="f_34781754"]').val(data.ip);
        jQuery('input[name="f_34781755"]').val(data.longitude);
        jQuery('input[name="f_34781756"]').val(data.latitude);
        jQuery('input[name="f_34781757"]').val(data.country_name);
        jQuery('input[name="f_34781758"]').val(data.country_code);
        jQuery('input[name="f_34781759"]').val(data.city);
        jQuery('input[name="f_34781760"]').val(data.region_name);
        jQuery('input[name="f_34781761"]').val(data.areacode);
        jQuery('input[name="f_34781762"]').val(data.zipcode);
        jQuery('input[name="f_34781763"]').val(data.metrocode);
      }

      if(jQuery('input[name="f_34781755"]').val() && jQuery('input[name="f_3478756"]').val()){
        mylat = jQuery('input[name="f_34781756"]').val();
        mylong = jQuery('input[name="f_34781755"]').val();
      }
      else {
        mylat = data.latitude;
        mylong = data.longitude;
      }

      var myLatlng = new google.maps.LatLng(mylat,mylong);
      var mapOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title:"Hello World!"
      });
    }
    else
      console.log('Empty Response!');
  },
  init: function () { 
    jQuery(document).ready(function(){
      GEOMap.setMapData();
    });
  }
}

// GEO Locator 
var GEOLocator = {
  // Fields
  fldIP: 'f_34841357',
  fldLatitude: 'f_34841356',
  fldLongitude: 'f_34841355',
  fldLocation: 'f_34843158',
  // Functions
  clientAPIURL: 'https://pro.dbflex.net/secure/api/v2/' + scriptHelper.dbID + '/-/Client/List%20All%20Active%20Clients/select.json',
  clients: [],
  geoMap: [],
  geoMarkers: [],
  geoInfos: [],
  geoClientMarker: 'https://pro.dbflex.net/secure/db/123123/res.aspx/office.png',
  geoUserMarker: 'https://pro.dbflex.net/secure/db/123123/res.aspx/customer.png',
  geoElemMap: document.getElementById("map"),
  getUserLocation: function () {
    var location_parser = scriptHelper.protocol + '//freegeoip.net/json/?callback=?';
    jQuery.ajax({
      type: 'GET',
      url: location_parser,
      dataType: 'jsonp',
      success: function(data) {
        GEOLocator.parseLocationJSON( data );
      },
      error: function() {
        console.log('Ajax request error!');
      }
    });
  },
  parseLocationJSON: function( data ) {
    if ( data ) {
      var elIP = jQuery('input[name="' + GEOLocator.fldIP + '"]');
      var elLatitude = jQuery('input[name="' + GEOLocator.fldLatitude + '"]');
      var elLongitude = jQuery('input[name="' + GEOLocator.fldLongitude + '"]');
      var elLocation = jQuery('input[name="' + GEOLocator.fldLocation + '"]');
      geocoder = new google.maps.Geocoder();

      GEOLocator.geoMap = new google.maps.Map(GEOLocator.geoElemMap, {
        zoom: 12,
        mapTypeControl: false,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var latlng = new google.maps.LatLng(data.latitude, data.longitude);
      
      if(elLatitude && elLongitude) {
        elIP.val( data.ip );
        elLatitude.val( data.latitude );
        elLongitude.val( data.longitude );
      } 
      geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            GEOLocator.geoMap.setCenter(latlng);
            new google.maps.Marker({
              position: latlng,
              map: GEOLocator.geoMap,
              icon: GEOLocator.geoUserMarker
            });

            if (elLocation) {
              elLocation.val( results[1].formatted_address ); 
            }
          } else {
            alert('No results found');
          }
        } else {
        alert('Geocoder failed due to: ' + status);
        }
      });

      GEOLocator.getClients();
    }
    else
      console.log('Empty Response!');
  },
  setUserLocation: function () {
    var elIP = jQuery('input[name="' + GEOLocator.fldIP + '"]');
    var elLatitude = jQuery('input[name="' + GEOLocator.fldLatitude + '"]');
    var elLongitude = jQuery('input[name="' + GEOLocator.fldLongitude + '"]');
    var elLocation = jQuery('input[name="' + GEOLocator.fldLocation + '"]');
    geocoder = new google.maps.Geocoder();

    GEOLocator.geoMap = new google.maps.Map(GEOLocator.geoElemMap, {
      zoom: 12,
      mapTypeControl: false,
      navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var latlng = new google.maps.LatLng(elLatitude.val(), elLongitude.val());
  
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          GEOLocator.geoMap.setCenter(latlng);
          new google.maps.Marker({
            position: latlng,
            map: GEOLocator.geoMap,
            icon: GEOLocator.geoUserMarker
          });
        } else {
          alert('No results found');
        }
      } else {
      alert('Geocoder failed due to: ' + status);
      }
    });

    GEOLocator.getClients();
  },
  getClients: function() {
    jQuery.ajax({
      type: 'GET',
      url: GEOLocator.clientAPIURL,
      dataType: 'json',
      success: function(data) {
        GEOLocator.listClients( data );
      },
      error: function() {
        console.log('Ajax request error!');
      }
    });
  },
  listClients: function( data ) {
    var elLatitude = jQuery('input[name="' + GEOLocator.fldLatitude + '"]');
    var elLongitude = jQuery('input[name="' + GEOLocator.fldLongitude + '"]');

    var  shtml = '<table cellpadding="5px" id="dtbl">';
    shtml += '<tr><td class="cname"><strong>Clients</strong></td><td class="cdistance"><strong>Distance</strong></td></tr>';

    var userLocation = {
      latitude: elLatitude.val(),
      longitude: elLongitude.val()
    };

    jQuery.each(data, function(index, value) {
      var customerLocation = value.Location;

      if ( customerLocation ) {
        var arrClientLocation = customerLocation.split(',');
        var clientLocation = {
          latitude: arrClientLocation[0],
          longitude: arrClientLocation[1]
        };

        addlatlng = new google.maps.LatLng(clientLocation.latitude, clientLocation.longitude);
        GEOLocator.geoMarkers[value["@row.id"]] = new google.maps.Marker({
          position: addlatlng,
          map: GEOLocator.geoMap,
          icon: GEOLocator.geoClientMarker
        });

        infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(GEOLocator.geoMarkers[value["@row.id"]], 'click', function () {
            infoWindow.setContent(value["Client Name EN"]);
            infoWindow.open(GEOLocator.geoMap, this);
        });

        var dist = GEOLocator.calcDistance(userLocation, clientLocation);
        GEOLocator.geoInfos.push({'client': value["Client Name EN"], 'distance': dist});
      }
    });

    GEOLocator.geoInfos.sort(function(a,b){return a.distance - b.distance});
    jQuery.each(GEOLocator.geoInfos, function(index, info) {
      shtml += '<tr><td class="cname">' + info.client + '</td><td class="cdistance">' + info.distance + ' Km </td></tr>';
    });
    shtml += '</table>';
    jQuery('#clients').append(shtml);
  },
  calcDistance: function (loc1, loc2){
    var rad = function(x) {return x*Math.PI/180;}
    var R = 6371; // earth's mean radius in km
    var dLat  = rad(loc2.latitude - loc1.latitude);
    var dLong = rad(loc2.longitude - loc1.longitude);

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(rad(loc1.latitude)) * Math.cos(rad(loc2.latitude)) * Math.sin(dLong/2) * Math.sin(dLong/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;

    return d.toFixed(3);
  },
  init: function() {
    var elIP = jQuery('input[name="' + GEOLocator.fldIP + '"]');
    var elLatitude = jQuery('input[name="' + GEOLocator.fldLatitude + '"]');
    var elLongitude = jQuery('input[name="' + GEOLocator.fldLongitude + '"]');
    var elLocation = jQuery('input[name="' + GEOLocator.fldLocation + '"]');

    if(elIP.val() && elLatitude.val() && elLongitude.val()) {
      GEOLocator.setUserLocation();
    }
    else {
      GEOLocator.getUserLocation();
    }
  }
}

jQuery(function() { 
  // GEOMap
  if( jQuery('input[name="f_3478754"]').length ) {
    GEOMap.init();
  }

  // GEOMap
  if( jQuery('.client-mapper-wrapper').length ) {
    GEOLocator.init();
  }
});