Get data attribute in javascript like jQuery and split it into two values?

Question

I found this nice script from here to calculate the distance between me and other locations.

Script:

function distance(lat1, lon1, lat2, lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
  var dLon = (lon2-lon1).toRad(); 
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
          Math.sin(dLon/2) * Math.sin(dLon/2); 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  return d;
}

/** Converts numeric degrees to radians */
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}

window.navigator.geolocation.getCurrentPosition(function(pos) {
    console.log(pos); 
    console.log(
        distance(pos.coords.latitude, pos.coords.longitude, lat2, lon2)
  ); 
});

My HTML looks like this:

<div class="map" data-latLng="86.55,79.66">Distance:<i></i></div>
<div class="map" data-latLng="96.55,89.66">Distance:<i></i></div>
<div class="map" data-latLng="116.55,179.66">Distance:<i></i></div>

At "[i]" I want to show the distance. So, my problems are:

so far I only work with jQuery, how can I get the [data-latLng] by "var", something like "var lat2 = $("div").attr("data-latLng");" seemes not to work in javascript?
how can I split the "data-latLng" into "lat2" and "lon2" for the function?
is there any ".each" function for javascript to do this for all my loactions?

score 1 · Accepted Answer · answered Nov 17 '17 at 15:58

Please find working solution below. Enjoy :)

function distance(lat1, lon1, lat2, lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2 - lat1).toRad(); // Javascript functions in radians
  var dLon = (lon2 - lon1).toRad();
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c; // Distance in km
  return d;
}
/** Converts numeric degrees to radians */
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}
window.navigator.geolocation.getCurrentPosition(function(pos) {
  $('.map').each(function() {
    var latLng = $(this).attr('data-latLng').split(',');
    var dist = distance(pos.coords.latitude, pos.coords.longitude, Number(latLng[0]), Number(latLng[1]));
    $(this).find('i').html(dist);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map" data-latLng="86.55,79.66">Distance:<i></i></div>
<div class="map" data-latLng="96.55,89.66">Distance:<i></i></div>
<div class="map" data-latLng="116.55,179.66">Distance:<i></i></div>

Hi, thank you for support! Hmm, at me (Firefox) I dont see the distance count ;( ... — Pepe, Nov 17 '17 at 16:01
My fail, Firefox was blocking my coordinations - works fine, big thanks!! — Pepe, Nov 17 '17 at 16:04
yes, also geolocation doesn't work well with iframe, as it's case of stackoverflow — Vipin Kumar, Nov 17 '17 at 16:05
Good to know! I accept it now and vote it up, you save my day! ;) — Pepe, Nov 17 '17 at 16:07

score -1 · Answer 2 · answered Nov 17 '17 at 15:56

This will get you the locations from the elements, split them, put them into an object and then push them to an array for you to use.

var locations = []

$(".map").each(function(index, map) {
  var latLngArray = $(map).data("latlng").split(",")
  var latLng = {
    lat: Number(latLngArray[0]),
    lng: Number(latLngArray[1])
  }
  locations.push(latLng)

})

console.log(locations)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map" data-latLng="86.55,79.66">Distance:<i></i></div>
<div class="map" data-latLng="96.55,89.66">Distance:<i></i></div>
<div class="map" data-latLng="116.55,179.66">Distance:<i></i></div>

Hi, also thx for support! Good to know how to get and split the coordinations! — Pepe, Nov 17 '17 at 16:03

Get data attribute in javascript like jQuery and split it into two values?

2 Answers2