Hoppala change

Hoppala has changed the link of the page to create layars:
http://augmentation.hoppala.eu/
instead of
http://www.hoppala.eu/
The last link has become an interesting blog.

to compare!

In competition with Layar:
http://7scenes.com/
http://www.junaio.com/
http://wikitude.me/
http://foursquare.com/


list of apps to be found in
http://www.mobilestorytelling.net/mobilenet_mainlist.html#usepatterns

Cui Bono?

Since the Romans the question to ask when you start a research.

LAYAR is free! How does this company layer earns money?
A simple Google search comes up with this:
http://www.nuzakelijk.nl/e-business/2185751/layar-krijgt-miljoeneninvestering.html
nice start!

HTML5?
This is done by a group of people:
http://en.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group
who were not satisfied by
http://en.wikipedia.org/wiki/World_Wide_Web_Consortium
This last group as indicated in the article is "dominated by larger organizations".

Google Maps PHP and your own dataBase

The last post found a PHP lib which functioned well.
Then it is relatively easy to insert the PHP needed to get the stored data from your dataBase:

Just insert: (in the file of the last post)

$database="DATABASENAME";
$db=mysql_connect("localhost", "YOURUSERNAME", "YOURPASSWORD");
@mysql_select_db($database) or die( "Unable to select database...");

$mydBaseCounter = 0;
$q
="SELECT *
FROM `POI_Table`
ORDER BY id ASC
";
$page_imp_r=mysql_query($q) or print(mysql_error());

while ($page_imp=mysql_fetch_array($page_imp_r)){
$loop_marker = $MAP_OBJECT->addMarkerByCoords( $page_imp['lon'],$page_imp['lat'],'contrechoc.com '.$mydBaseCounter.' ',' ');
//to check the coordinates from the dBase
echo $mydBaseCounter." ".$page_imp['lat']." ".$page_imp['lon']."
";
$mydBaseCounter++;
}

testing: http://www.contrechoc.com/layar/secondGooggleMapPHPTest2.php

download source file phpTest2

The last obstacle was the order of latitude, longitude, some defenition start with latitude, others with longitude, so check this, otherwise you end up in Somalia instead of Hollland....

The one but last obstacle is connecting to your database, somehow, this always poses me problems :-), where to put the database name, where the user etc.....

The funny thing is, that the PHP generates a JAVASCRIPT file (!). This can be seen opening the source in the browser.

Google Maps and PHP

Well this is going to be a bit technical,
Why start doing Google Maps in PHP?
Because with PHP we can easily access our dataBase...

This link was the first to give working code:
http://www.phpro.org/examples/Google-Maps-With-PHP-And-Phproogle.html
see my try out:
http://www.contrechoc.com/layar/googlePHP.php
but this is still working with the keys (deprecated, go to version 3)
and also you cannot change the markers with this simple lib (?)

Then this came up:
http://code.google.com/p/php-google-map-api/
which works without the keys, so in API3
and gives the possibility to use your own markers
(and of course, doing all in php makes life easier when working with a dBase. Who wants to type in all the POI's???)
a test page using these classes:
http://www.contrechoc.com/layar/secondGooggleMapPHPTest.php

So now the way to go is to add PHP database code and add the codes we used for LAYAR. And with all this technical stuff we are nearly creating our own version of LAYAR, or understanding it a little bit...

download source file phpTest1

Google maps design

With the background of a map on a html page, you can play around with the icons, replacing the standard ones with your own...

So you can use the standard icons of Google Maps, but also mix or add your own icons.
These icons must not be too big, but can be transparent (.png).

You can do a shadow in Photoshop, (png format).

With the positioning, the difference of icons and their transparency you can start designing.

This script contains the elements, and with replacing the path's to the images you can start creating and designing your own page. It is just learning how to hack what is already made.

Ingredients:

• the GPS position, eg: new google.maps.LatLng(51.937740, 4.472122),
• the png image, eg: palm.png
• the path to the image on your server eg:
  

var imagePalm = 'http://www.contrechoc.com/layar/palm.png';

• making the marker with your special icon in it:

var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.937740, 4.472122),
map: map,
title: 'my paradise, a palm in rainy Holland',
clickable: false,
icon: 'http://www.contrechoc.com/layar/palm.png'
});

• and adding the marker: markersArray.push(marker);

So the total JAVASCRIPT section:




< type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
< /script>

< type="text/javascript">

//globals
var map;
var markersArray = [];

function initialize()

//center of the map

var latlng = new google.maps.LatLng(51.937740, 4.472122);

// map options

var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//dont forget the comma's after the parameters but the last

var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.937740, 4.472122),
map: map,
title: 'My workplace',
clickable: false,
icon: 'http://www.contrechoc.com/layar/icon5.png'
});

//dont forget the comma's after the parameters but the last, i repeat :-)

addMarker(latlng, 'http://www.contrechoc.com/layar/icon5.png' ); //add marker with function

//you can or should do all by hand, but
//to go faster, programming a position and positions beside this center:

//you need path's to images:

var imageM = 'http://www.contrechoc.com/layar/icon5.png';
var imageM2 = 'http://www.contrechoc.com/layar/icon5a.png';
var imageG = 'http://www.contrechoc.com/layar/dot.png';

//and here we do a programming trick to get pentagonic arrangements, two nested for loops

for( var ii=0 ; ii < i="0" latlng6 =" bearing("> 3 )
addMarker(latlng6, imageG);
if ( ii <> 0 ) addMarker(latlng6, imageM2);
if ( ii ==0 ) addMarker(latlng6, imageM);
}
}
}
//we have used this function to add markers with our own image

function addMarker(location, imageM) {
marker = new google.maps.Marker({
position: location,
map: map,
icon: imageM
});
markersArray.push(marker);
}

//we need this function fr the bearings, it is all about calculating....

function bearing( latlngStart, dP, brngP ){

var R = 6371;
var lat1 = latlngStart.lat()/180*3.1415;
var lon1 = latlngStart.lng()/180*3.1415;
var d = dP;
var brng = brngP/180*3.1415;

var lat2 = Math.asin( Math.sin(lat1)*Math.cos(d/R) + Math.cos(lat1)*Math.sin(d/R)*Math.cos(brng) );
var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat1), Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2));

lat2 = (lat2* 180/3.1415 + 360 ) % 360;
lon2 = (lon2* 180/3.1415 + 360 ) % 360;

//document.write("d " + d +"lat " + lat2 + " " + lat1* 180/3.1415 + "<>");
//document.write("d " + d +"lng " + lon2+ " " + lon1* 180/3.1415+ "<>");

var newPoint = new google.maps.LatLng( lat2 ,lon2);
return newPoint;

}

//and we can finish the java script part
< /script>




as a desert: try out what happens when you zoom, very funny effect!

for the total source file, open VIEW SOURCE in your browser on page www.contrechoc.com/crosslab/googleMapsExample.html

found this page http://www.powerhut.co.uk/googlemaps/custom_markers.php , for making custom marker's.
this is a page with free official icons: http://code.google.com/p/google-maps-icons/

POI drawing

When you get the feeling of JAVASCRIPT and do a bit of calculating you can start drawing nice figures on the earth!

For my homepage I made a certain irregular-regular figure which I particularly like, the pentagon.

For this we need to calculate 5 points from a center, for which I have used this function, made from the GPS calculating page:

function bearing( latlngStart, dP, brngP ){

var R = 6371;
var lat1 = latlngStart.lat()/180*3.1415;
var lon1 = latlngStart.lng()/180*3.1415;
var d = dP;
var brng = brngP/180*3.1415;

var lat2 = Math.asin( Math.sin(lat1)*Math.cos(d/R) + Math.cos(lat1)*Math.sin(d/R)*Math.cos(brng) );
var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat1), Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2));

lat2 = (lat2* 180/3.1415 + 360 ) % 360;
lon2 = (lon2* 180/3.1415 + 360 ) % 360;

var newPoint = new google.maps.LatLng( lat2 ,lon2);
return newPoint;

}

This functions returns a newPoint, after doing some long mathematics.
This point starts from a center point, and does a radius of dP kilometers, at an angle of brngP degrees.

In a for loop this is done 5 times, getting a pentagon, and this is repeated five times in another for-loop, which shifts the starting angle.

In the same way a polygon, colored is added.

You can see the result here: http://www.contrechoc.com/ which is actually my homepage:

locative utilities

Handy website to find longitude and latitude of a spot directly:
http://www.gorissen.info/Pierre/maps/googleMapLocation.php

If you want to calculate things with GPS you need an astronomer :-)
GPS formula's:
http://www.movable-type.co.uk/scripts/latlong.html

Google Maps:
Google maps can be programmed in JAVASCRIPT
Here a Javascript tutorial (so without Google Maps)
http://richardbowles.tripod.com/javascript/menu.htm

Google Maps, watch it! There are different API (Application programming interface), that is systems of commands to program.
This is the last one: ( Google Maps JavaScript API V3)
http://code.google.com/intl/nl/apis/maps/documentation/javascript/tutorial.html
which does not use a server key anymore (?), wel yes if you want to do it all in PHP and not JAVASCRIPT.

Do not use:
The version of this API before this (API V2) still uses a key, you can get from Google:
http://code.google.com/intl/nl/apis/maps/documentation/javascript/v2/overlays.html
You can get the Google Maps key here: (bottom of page)
http://code.google.com/intl/nl/apis/maps/signup.html

Google Maps using Javascript:
Start tutorial of Google Maps using JAVASCRIPT:
http://code.google.com/intl/nl/apis/maps/documentation/javascript/tutorial.html
With these examples you can play around with Google Maps.

But to use the database (with POI's) you have to add PHP and MYSQL. SO to keep it simple (as far as possible) you could better use PHP directly instead of a double mix of HTML, JAVASCRIPT and PHP.


Google Maps using PHP (for easy connection with your database):
For PHP you have to include a PHP class, which can be downloaded from the tutorial pages.

Found this tutorial:
http://www.timshowers.com/2008/08/php-geocoding-tutorial-with-the-google-maps-api-part-one/
http://www.phpro.org/examples/Google-Maps-With-PHP-And-Phproogle.html

HTML 5 and the GPS script

What is html 5 is difficult to answer in one sentence. Is it FLASH scripting inside HTML? Will it replace companies like LAYAR.com?

Anyway making a page on your mobile phone with GPS and getting your location is fun!

Some people have made this easy for us:
http://merged.ca/iphone/html5-geolocation

and indeed for the crosslab minor ( wdka.nl ) I hacked this page above for loading on my phone with gps in safari, and have put it on my server:
http://www.contrechoc.com/layar/geoTest.html

You can imagine what to do with this page:
in the page connect to a database (use the same database of the previous posts on layar)
look if you are in the neighbourhood of a POI (Point of interest) and do something!

Now being in a browser you are outside the application of (for instance) layar.com.
You have your own control over all the elements of the game, database, effects etc.

For this you have to program a bit, in:
html
php (for a database connection)

If you understand the page of the tutorial of layar.com:
http://layar.pbworks.com/First+Layar+Tutorial+-+Create+a+simple+layer
you could hack this page and salvage the useful bits for your own php page.

One part of this script is calling a Google map. Here you can find the principles:
http://code.google.com/intl/nl/apis/maps/index.html#The_Hello_World_of_Google_Maps
where you find this tutorial:
http://code.google.com/intl/nl/apis/maps/documentation/javascript/tutorial.html
what you can do with that?
see my current homepage: http://www.contrechoc.com

Make a LAYAR layer (the soft way)

Draft! version 1

Making a storytelling layer with layar.com can be done the hard way, see the last post, making your database and putting your page on a server, but some nice folks have already facilitated this task. You can create a layar while seeing it and edit the properties of the points of interest.

All the same:
You have to create a developer LAYAR account. (This costs about one working day)


On the page:
http://www.hoppala.eu/
you can make points of interest, provide the data and it will make and host the database.
first go to http://www.hoppala.eu/
then make an account and log in (checking your mail for the password.)

The dashboard is rudimentary, but it functions.

First you have to edit name and title of the page, (icons to the right)
Then you can click on the line of the page to get the map view, zoom in and "add augment" right under on the page to add a POI icon, clicking on the POI icon you can specify.

If finished you can copy the link of the URL of your layar from the dashboard page.

Then go to the LAYAR developers site and
Create a layar
Edit title name and insert the link from hoppala

in principle you can now already test it on the testing page: API Test Page

Make a LAYAR layer (the hard way)

First draft! (This is the hard way, for the soft way see the next post.)

In principle to get a layar you have to set up a database with the points of interest.Then put a php script on your server.Then make a layar on the developers site of layar.com and you can test it.

( you can find the layar tutorial at: http://layar.pbworks.com/First+Layar+Tutorial+-+Create+a+simple+layer but of course this leaves out the how to get your own server and ftp etc.)

1. create a developpers account on http://publishing.layar.com/ this may take a day.
2. when you are registered activate account etc.
3. for your account you need a server, a free server can be obtained here: www.freebyte.com
4. register an account here and activate.
5. go to controlpanel and log in: http://panel.byethost.com
6. go to databases and take the link MySQL databases

7. 

8. 
   

9. make a database called LAYAR

10. 

11. go admin (on this page too, to the right of the Backup button)
    
12. go SQL you get a window to put in code

13. 

14. insert a code to make a table:

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

CREATE TABLE IF NOT EXISTS `POI_Table` (
`id` int(50) NOT NULL auto_increment,
`attribution` varchar(50) default NULL,
`title` varchar(50) default NULL,
`lat` decimal(20,10) default NULL,
`lon` decimal(20,10) default NULL,
`imageURL` varchar(255) default NULL,
`line4` varchar(50) default NULL,
`line3` varchar(50) default NULL,
`line2` varchar(50) default NULL,
`type` int(11) NOT NULL default '0',
`actions` varchar(50) default NULL,
`dimension` int(1) NOT NULL default '1',
`alt` int(10) default NULL,
`relativeAlt` int(10) default NULL,
`transform` int(10) default NULL,
`object` int(10) default NULL,
`distance` decimal(20,10) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

1. click start and the tabel will be made.
2. now we add some data:

3. 

4. go SQL again and to get a few entries fast insert (and press the start button):

INSERT INTO `POI_Table` (`id`, `attribution`, `title`, `lat`, `lon`, `imageURL`, `line4`, `line3`, `line2`, `type`, `actions`, `dimension`, `alt`, `relativeAlt`, `transform`, `object`, `distance`) VALUES
(2, 'acadmie richting 2', 'acadmie richting 2', '51.9180000000', '4.4900000000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance%', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.0000000000'),
(3, 'acadmie richting 3', 'acadmie richting 3', '51.9170780000', '4.4890170000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance%', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.0000000000'),
(4, 'acadmie richting 3', 'acadmie richting 3', '51.9181360000', '4.4852400000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance%', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.0000000000'),
(5, 'acadmie richting 4', 'acadmie richting 4', '51.9204130000', '4.4860980000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance%', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5.0000000000'),
(18, 'street', 'blaak', '51.9170000000', '4.4955000000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance% ', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.0000000000'),
(20, 'boulevard', 'weena', '51.9175000000', '4.4954000000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance% ', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.5000000000'),
(17, 'marker', 'hello rotterdam', '51.9171800000', '4.4953000000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance% ', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.0000000000'),
(19, 'street', 'coolsingel', '51.9176000000', '4.4952000000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance% ', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.0000000000'),
(16, 'architecture', 'where do you want to be', '51.9169000000', '4.4951000000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance% ', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.0000000000'),
(15, 'architecture', 'where do you want to be', '51.9800000000', '4.6000000000', 'http://custom.layar.nl/layarimage.jpg', NULL, 'distance:%distance% ', NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.0000000000'),
(21, 'house', 'my home', '51.9140000000', '4.4280000000', 'http://custom.layar.nl/layarimage.jpg', NULL, NULL, NULL, 0, NULL, 1, NULL, NULL, NULL, NULL, '5000.5000000000');

1. now first we need to put a script on the server you have created to find the POI's in the table you just made: go to your FTP program, I use firefox with FireFTP.
2. make an account in your FTP program and log in, you find the login name and password in your bytehost documentation
3. make folder called "layar"
4. now copy the file called "FirstTutorial_POI.php" from the download you find on this pae: http://layar.pbworks.com/First+Layar+Tutorial+-+Create+a+simple+layer just above number 6 testing the layar
5. rename this file: so FirstTutorial_POI.php becomes "layar_POI.php"
6. open this file in textEdit (or alike)
7. now you have to change the login and passwords in the file to the ones you got from bytehost:

$dbhost = "localhost";// local host must become "sqlxxx.byethostxx.com", where xx are your numbers
$dbdata = "database_name";//"bxx_xxxxxxx_LAYAR", where xx are your numbers
$dbuser = "database_username";//"bxx_xxxxxxx"
$dbpass = "database_password";// your password

save the file and upload in the "layar" folder.

1. go to the developers site of layar: http://publishing.layar.com/publishing/layers/
2. login etc
3. create layar

4. 

5. now you get the first screen with properties of the layar,
   
6. give your layar a title
7. now fill in the link to the file on your database: http://YOURNAME.byethost31.com/layar/layar_POI.php, where YOURNAME is the name of your bytehost account

8. 

9. do a SAVE
10. file in the tabs LISTING and DETAILS, indicated in red
11. The last tab FILTERS, i use to set the range slider to 50000 (meters) which is easy for testing
12. in principle this should work, that is you can test the page on the API Test Page of layar
13. later on you can test on your cell phone

14.