- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 9689
I was using this JS library, and google maps.
Exif library will extract GPS location as a Degree-Minute-Second, while Google uses Decimal degrees, that is why we need first converter:
function ConvertDMSToDD(degrees, minutes, seconds, direction) {
var dd = degrees + minutes/60 + seconds/(60*60);
if (direction == "S" || direction == "W") {
dd = dd * -1;
} // Don't do anything for N or E
return dd;
}
Next thing we need to load the image, in my case I did it with simple Ajax request (no jQuery):
var http = new XMLHttpRequest();
http.open("GET", "IMG_20150103_154405.jpg", true);
http.responseType = "blob";
http.onload = function(e) {
if (this.status === 200) {
var image = new Image();
image.onload = function() {
Then reading EXIF data is simple:
EXIF.getData(image, function() {
myData = this;
var mapCanvas = document.getElementById('map-canvas');
var latDegree = myData.exifdata.GPSLatitude[0].numerator;
var latMinute = myData.exifdata.GPSLatitude[1].numerator;
var latSecond = myData.exifdata.GPSLatitude[2].numerator / 1000;
var latDirection = myData.exifdata.GPSLatitudeRef;
var gLat = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
var lonSecond = myData.exifdata.GPSLongitude[2].numerator / 1000;
var lonDirection = myData.exifdata.GPSLongitudeRef;
var gLon = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
Notice that latSeconds I had to divide with 100, mapCanvas I need for google maps, an code for google maps looks like this:
var myLatlng = new google.maps.LatLng(gLat, gLon);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
google.maps.event.addListener(marker, 'click', function() {
alert("Hello world")
});
To center google maps I needed myLatlng which I also used to place a marker, and here you can notice example how to add event to marker:
google.maps.event.addListener(
marker, 'click', function() {
alert("Hello world")
});
Example download from here. Also, don't forget this example requires IIS, or some other web server.
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 4241
Check this code:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery-2.1.3.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body> Here my web site will be loaded: <div id="myWebSite"></div> </body> </html>
JS:
window.onload=function () {
var contentURI = 'http://localhost/jasmineClock/file.html',
isLoadingStarted,
loadingTimeOutHandle;
isLoadingStarted = true;
setTimeout(function () {
$( "#myWebSite" ).html( $( "#myWebSite" ).html() + "<p>setTimeout</p>" );
isLoadingStarted = false;
}, 100);
$.get(contentURI, function (data) {
$( "#myWebSite" ).html( $( "#myWebSite" ).html() + data );
});
isLoadingStarted = false;
}
file.html which will be loaded:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var i = 0;
while (i < 1000000000) {
i++
}
</script>
</head>
<body>
I will be loaded.
</body>
</html>
If you execute this code, you will see that setTimeout will be executed AFTER ajax call is finished, delete javascript part from file.html, and maybe add some long lorem ipsum, just to slow down execution, and you will see that setTimeout will be executed beofre ajax call.
Here you can see example with javascript, and here you can see example with long lorem ipsum.
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3918
Consider following example:
var Foo=function () {
var number = 1;
self.number = 1;
}
Foo.prototype.bar = function () {
console.log("test");
};
var foo = new Foo();
foo.bar();
Notice here that in line Foo.prototype.bar = function () I didn't write "var".
This code will work perfectly, in console you will see "test".
Now check following code:
var Foo=function () {
var number = 1;
self.number = 1;
return {inc: function() {
self.number = self.number + 1;
}}
}
Foo.prototype.bar = function () {
console.log("test");
};
var foo = new Foo();
foo.bar();
This code will not work, we will receive error "Uncaught TypeError: undefined is not a function", because with return we will loose "this". Solution is to add return this:
var Foo=function () {
var number = 1;
self.number = 1;
return this;
}
Foo.prototype.bar = function () {
console.log("test");
};
var foo = new Foo();
foo.bar();
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3732
Just one simple example about private and public methods in JavaScript.
Check this code in JS:
(function (ns) {
function myCreator () {
var self=this;
function privateMethod() {
alert("Hi I am private method and I can be executed only within myCreator class (I will be never called)");
}
self.publicMethod = function () {
document.getElementById("publicMethodCall").innerHTML = "Hi, I am called from publicMethod";
}
}
ns.myCreator = myCreator;
}(window.privateAndPublic))
Here you can see how private method is declared:
function privateMethod
and public method:
self.publicMethod
When you open console and check what newly created object has, you will see that there is no privateMethod (because it is inaccessible):
Example download from here.