Tag: geolocation

HTML5 and CSS3 Video Tutorial List

Here we list all the HTML5 and CSS3 video tutorials ..all these video tutorials are 3 or 5 or 10 minutes in length and you can go through them very quickly. Learning along with me while I teach is the best way to learn. You can ask your questions/doubts in the comment section of respective tutorial page/post.

HTML5-css3-sticker-technotip

If you’re thinking of HTML7, then my advice would be to first learn HTML5 – this would surly be a basement for upcoming improvements. By learning HTML5, you’ll be ahead of your competition.

Please bookmark this page, share on social sites, let your friends know about our video tutorials – this way you’ll be helping us in our good cause of helping people!

This page will be updated with up coming HTML5 and CSS3 lessons ..stay subscribed

Enter your email address:

    Geolocation API

  1. Geolocation API – Success Handler: HTML5
  2. Geolocation API – Error Handle: HTML5
  3. Google Maps Integration: HTML5
  4. Adding Pin/Marker To Google Map: HTML5
  5. Add Popup message To Google Map Pin: HTML5
  6. Realtime Location Tracking – Google Maps: HTML5

    Canvas

  1. Canvas Basics: HTML5
  2. Draw Rectangle: HTML5 Canvas
  3. Canvas State: HTML5
  4. Canvas clearRect: HTML5
  5. Canvas Lines and Paths: HTML5
  6. Line Ending In Canvas: HTML5
  7. Line Joining In Canvas: HTML5
  8. Draw Arcs/Circle with Canvas: HTML5
  9. Bezier Curve In Canvas: HTML5
  10. Quadratic Curve In Canvas: HTML5
  11. Draw Text on Canvas: HTML5
  12. Shadow Effect on Canvas: HTML5
  13. Canvas Image Patterns: HTML5
  14. Canvas Element Pattern: HTML5
  15. Linear Gradients in Canvas: HTML5
  16. Radial Gradients in Canvas: HTML5
  17. Clipping Paths in Canvas: HTML5
  18. drawImage() in Canvas: HTML5
  19. Translate Transformation in Canvas: HTML5
  20. Scale Transformation in Canvas: HTML5
  21. Rotate Transformation in Canvas: HTML5
  22. Custom Transformation in Canvas: HTML5
  23. globalAlpha and RGBa in Canvas: HTML5
  24. Compositing Methods in Canvas: HTML5
  25. Accessing Raw Pixel Data in Canvas: HTML5
  26. Image Gallery using Canvas: HTML5
  27. Simple Animation using Canvas: HTML5

    HTML5 Web Forms

  1. Pseudo-classes for Form Element
  2. autofocus Attribute of Form Field: HTML5
  3. autocomplete Attribute of Form Field: HTML5
  4. Suggested Entries Using datalist Element: HTML5
  5. Dynamic Suggested List: HTML5 + jQuery + PHP + MySQL
  6. placeholder Attribute of Form Field: HTML5
  7. pattern and title Attribute of Form Field: HTML5
  8. require attribute: HTML5
  9. Form novalidate attribute: HTML5
  10. Text Selection API: HTML5
  11. Form Input Type – search: HTML5
  12. Email Input Type: HTML5
  13. URL Input Type: HTML5
  14. Tel Input Type: HTML5
  15. number Input Type: HTML5
  16. range Input Type: HTML5
  17. date time Input Type: HTML5
  18. color Input Type: HTML5
  19. progress Element: HTML5
  20. Download Attribute: HTML5

..more videos will be added soon, stay subscribed

Enter your email address:

Add Popup message To Google Map Pin: HTML5

In this video tutorial we shall teach you how to add a message window(popup) when the pin or the marker is clicked on a Google Map.

pin-marker-google-map-message-infoWindow

JavaScript file
mySript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function addMarker(map, googleLatLng, title, content){
var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
};
 
var marker=new google.maps.Marker(markerOptn);
 
var infoWindow=new google.maps.InfoWindow({ content: content, 
                                               position: googleLatLng});
    google.maps.event.addListener(marker, "click", function(){
infoWindow.open(map);
});   
}

Add the content and position information to InfoWindow constructor of Google Maps API.
Also add a event listener: once the marker is clicked, open the message window on the map.

Full JavaScript file
mySript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

$(document).ready(function(){
 
if( navigator.geolocation )
 navigator.geolocation.getCurrentPosition(success, fail);
else
 $("p").html("HTML5 Not Supported");
 
});
 
function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude, 
position.coords.longitude);
var mapOtn={
zoom:10,
center:googleLatLng,
mapTypeId:google.maps.MapTypeId.ROAD
};
 
var Pmap=document.getElementById("map");
 
var map=new google.maps.Map(Pmap, mapOtn);
addMarker(map, googleLatLng, "Technotip.com", 
                  "SATISH B<br /><b>About Me:</b>https://technotip.com/about/");
}
 
function addMarker(map, googleLatLng, title, content){
var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
};
 
var marker=new google.maps.Marker(markerOptn);
 
var infoWindow=new google.maps.InfoWindow({ content: content, 
                                               position: googleLatLng});
    google.maps.event.addListener(marker, "click", function(){
infoWindow.open(map);
});   
}
 
function fail(error)
{
var errorType={
0:"Unknown Error",
1:"Permission denied by the user",
2:"Position of the user not available",
3:"Request timed out"
};
 
var errMsg = errorType[error.code];
 
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
 
$("p").html(errMsg);
}

For explanation of above code, please visit previous day videos.

Add Popup message To Google Map Pin/Marker Click Event: HTML5


[youtube https://www.youtube.com/watch?v=DJHepOxO5VM]

YouTube Link: https://www.youtube.com/watch?v=DJHepOxO5VM [Watch the Video In Full Screen.]



Your location may not be shown accurately if you’re accessing the pages via your computer. Open above link in your smart phone, with GPS turned on.

Coming Up: Tracking real time location on Google Map..stay subscribed

Google Maps Integration: HTML5

In this video tutorial we illustrate the implementation of Google Maps API.

Here we supply latitude and longitude values fetched by Geolocation API and feed it to Google Map API, which is turn returns the location on its MAP.

globe-latitude-longitude

It has 4 variations:
ROADMAP (normal, default 2D map)
SATELLITE (photographic map)
HYBRID (photographic map + roads and city names)
TERRAIN (map with mountains, rivers, etc.)

HTML File
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< !doctype html>
<html>
 <head>
  <title>Geolocation API: Technotip.com</title>
  <meta charset="utf-8"/>
  <link href="css/myStyle.css" rel="stylesheet"/>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script src="js/myScript.js"></script>
 </head>
 <body>
  <p id="map"></p>
 </body>
</html>

Here we’ve added an id to paragraph tag. And included Google Map API’s javascript file within the head tag. We must include it before myScript.js, as we’ll be using Google Map API’s inside myScript.js

Javascript File: Google Map API
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude, 
  position.coords.longitude);
var mapOtn={
zoom:10,
center   : googleLatLng,
mapTypeId: google.maps.MapTypeId.ROAD
}
 
var Pmap= document.getElementById("map");
 
var map= new google.maps.Map(Pmap, mapOtn);
}

Pass position.coords.latitude and position.coords.longitude values to LatLng constructor of Google Maps API, which converts it into googleLatLng object.

Set the options of Google Maps:
zoom takes value from 0 to 21.
We center the map to our users/visitors location.
map type: ROADMAP, SATELLITE, HYBRID, TERRAIN.

Full Javascript File: Google Map API
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

$(document).ready(function(){
 
if( navigator.geolocation )
 navigator.geolocation.getCurrentPosition(success, fail);
else
 $("p").html("HTML5 Not Supported");
 
});
 
function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude, 
  position.coords.longitude);
var mapOtn= {
zoom:10,
center   :googleLatLng,
mapTypeId:google.maps.MapTypeId.ROAD
}
 
var Pmap= document.getElementById("map");
 
var map= new google.maps.Map(Pmap, mapOtn);
}
 
function fail(error)
{
var errorType = {
0: "Unknown Error",
1: "Permission denied by the user",
2: "Position of the user not available",
3: "Request timed out"
};
 
var errMsg = errorType[error.code];
 
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
 
$("p").html(errMsg);
}

For explanation of other parts of above code:
Geolocation API – Success Handler: HTML5
Geolocation API – Error Handle: HTML5

Google Maps API Integration: HTML5


[youtube https://www.youtube.com/watch?v=UroKHzuuve8]

YouTube Link: https://www.youtube.com/watch?v=UroKHzuuve8 [Watch the Video In Full Screen.]



Note:
If you’re accessing this application via your desktop computer, then it may be showing you the location of your ISP’s(Internet Service Provider’s) local office location.
To get the accurate location, access our demo page via your smart phone.

Google Maps: Demo

Smartphone
1. Install Google Chrome browser.
2. Switch on your GPS and permit Google to access your location information, for testing purpose.
3. Visit our demo link(present above).
4. Move around and see your location information being updated in real-time.
5. We’ll teach you to make your application show real time data in coming videos, stay subscribed :-)

Geolocation API – Error Handle: HTML5

This video tutorial teaches about error handle of Geolocation API – of HTML5.

It is a continuation of Geolocation API – Success Handler: HTML5

Cumputer-Bug-Error

This code is helpful when geolocation API is unable to determine the users location. In this situation we, as good developers, shouldn’t leave the user keep thinking about what happened! We should gracefully inform the user about what happened in the background of our application data center.

Javascript File
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function fail(error)
{
var errorType = {
0:"Unknown Error",
1:"Permission denied by the user",
2:"Position of the user not available",
3:"Request timed out"
};
 
var errMsg = errorType[error.code];
 
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
 
$("p").html(errMsg);
}

Geolocation API passes error object to the error handle(fail method), which contains error.code and corresponding error.message properties, using which we output the error information to the user.

Error code starts from 0 through 3, which we customize by giving our own, user understandable error messages, inside an object called errorType.

If the error code is 0 or 2, we’ll also output the original error message(sent by geolocation API) associated with the error code along with our own custom error message.

Full Free Code
Javascript File
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

$(document).ready(function(){
 
if( navigator.geolocation )
 navigator.geolocation.getCurrentPosition(success, fail);
else
 $("p").html("HTML5 Not Supported");
 
});
 
function fail(error)
{
var errorType = {
0: "Unknown Error",
1: "Permission denied by the user",
2: "Position of the user not available",
3: "Request timed out"
};
 
var errMsg = errorType[error.code];
 
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
 
$("p").html(errMsg);
}
 
function success(position)
{
$("p").html("Latitude: "+position.coords.latitude+
            "<br />Longitude: "+position.coords.longitude+
"<br />Accuracy: "+position.coords.accuracy);
}

HTML5 page(index.html) and the CSS3(myStyle.css) are same as present in our previous video tutorial.

Geolocation API – Error Handle: HTML5


[youtube https://www.youtube.com/watch?v=j_5EGTb9dhA]

YouTube Link: https://www.youtube.com/watch?v=j_5EGTb9dhA [Watch the Video In Full Screen.]



We can control “request timeout” property of our application via options(3rd parameter) parameter of getCurrentPosition() method, which we’ll look in coming videos.

Next, we’ll integrate the output of geolocation API with Google Maps API and locate the actual position of the user on a MAP!

Geolocation API – Success Handler: HTML5

In this video tutorial we’ll show you how to write your first(simple) HTML5 geolocation API application. Basics of Geolocation API is also explained in the notes below, so don’t skip, read and practice it.

Technologies included
Basic HTML5 tags
jQuery – for Javascript
CSS basics

With Geolocation API we can know our position/location on earth by fetching the latitude and longitude information from the browser.

HTML5 File
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13

< !doctype html>
<html>
 <head>
  <title>Geolocation API: Technotip.com</title>
  <meta charset="utf-8"/>
  <link href="css/myStyle.css" rel="stylesheet"/>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/myScript.js"></script>
 </head>
 <body>
  <p></p>
 </body>
</html>

Here we’re making use of HTML5 markup.
Know more: HTML5 – Getting Started Guide

We’re also including a jQuery library file. Make sure to include it before our custom javascript file(myScript.js), as our javascript file depends on jQuery library file.

CSS File
myStyle.css

1
2
3
4

p{
width: 300px;
height: 300px;
}

This is a simple Cascading Stylesheet file, which is allocating 300px width and height to the paragraph tag present in index.html file. It’ll be helpful when we integrate Google Maps into our application( in the future videos ).

Javascript File
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function(){
 
if( navigator.geolocation )
 navigator.geolocation.getCurrentPosition(success);
else
 $("p").html("HTML5 Not Supported");
 
});
 
function success(position)
{
$("p").html("Latitude: "+position.coords.latitude+
            "<br />Longitude: "+position.coords.longitude+
"<br />Accuracy: "+position.coords.accuracy);
}

This is a minimalistic approach to using geolocation API. We’ll improve it in future videos.

Once the document is loaded and ready, we check if the browser supports Geolocation API.
We do that by checking if navigator.geolocation object exists.
If it doesn’t exist, we display appropriate message to the user(“HTML5 Not Supported”).

If it does support navigator.geolocation, we’ll make use of it’s methods and get the user location.
navigator.geolocation has 3 methods:
getCurrentPosition
watchPosition
clearWatch

In this video tutorial we’ll be looking at the first method, i.e., getCurrentPosition()

navigator.geolocation.getCurrentPosition(success, error, option);

getCurrentPosition()
It takes 3 parameters:
success handler
error handler
and options.

success handler is mandatory.
error handler and options are optional.

getCurrentPosition method passes the users current location information to the success handler, in the form of position object.

position object: success handler method

position object has two properies: coords and timestamp

coords(coordinates) inturn has 7 properties:
3 are supported by most browsers:
latitude
longitude
accuracy

..other 4 are not widely supported:
altitude
altitudeAccuracy
heading
speed

In this tutorial we’re using latitude, longitude and accuracy properties, as it’s supported by most browsers.

Geolocation API – Success Handler: HTML5


[youtube https://www.youtube.com/watch?v=a3-ekroQoHo]

YouTube Link: https://www.youtube.com/watch?v=a3-ekroQoHo [Watch the Video In Full Screen.]



Note:
1. Geolocation API returns latitude and longitude values in decimal number system.
2. It determines users location by using various factors like: IP Address, GPS, Cell phone triangulation, WiFi etc.
3. We can’t know or specify which method it has to use to determine the users location.
4. If you’re getting 404 or googleapi not found, [object][object] etc error messages, then reload your webpage after you restart your system and/or your WiFi modem.
Make sure your WiFi modem is ON: because it’s one of the way Geolocation API will fetch your location from.

Missing things:
Error handling.
Options, to configure maps output. etc
Showing the location of the user on a MAP.
Showing real time movement of the user on a MAP.
All these will be covered in future videos. Stay Subscribed. Share this video with your friends.