17
Edward Mac Gillavry 29 th December 2010 CREATE A LAYAR WITH DRUPAL CREATE A LAYAR WITH DRUPAL Tutorial Tutorial +

Create a Layar with Drupal

Embed Size (px)

DESCRIPTION

This tutorial shows how to show your Drupal content in Layar, the augmented reality browser.

Citation preview

Page 1: Create a Layar with Drupal

Edward Mac Gillavry29th December 2010

CREATE A LAYAR WITH DRUPALCREATE A LAYAR WITH DRUPALTutorialTutorial

+

Page 2: Create a Layar with Drupal

Layar module for Drupal abstracted from homebrewed module

Only basic Layar GetPOIs-Request: Lon,Lat,Radius, layerName

Only basic Layar GetPOIs-JSON Response: 1d objects only Appears to be on par with Layar API version 2.1

CAVEATSCAVEATS

Page 3: Create a Layar with Drupal

Drupal Core Modules:

CCK (content, content_copy, optionwidgets, text) Views (views, views_ui) Location (location, location_cck, location_node) Gmap (gmap, gmap_location) Layar

INSTALLATION REQUIREMENTSINSTALLATION REQUIREMENTS

Page 4: Create a Layar with Drupal

Supports (deprecated) Google Maps API v.2 Requires API key Log in with Google account athttp://code.google.com/apis/maps/signup.html

Fill in website URL Click “Generate API key” Next page provides the API key, for example:ABQIAAAAXL4B_6HzzOGB4k4meSzVJRQAUgWGYxiuj_fVy2Vtau11dGUdwhQWbsemrSoWUer_2wFVxZtOeFP6wA

PREPARE Gmap MODULEPREPARE Gmap MODULE

Page 5: Create a Layar with Drupal

Drupal: admin > settings > gmap Fill in Google Maps API key in “Google Map

Initialize” Configure:

Default map settings Map type control

Click “Save configuration”

CONFIGURE Gmap MODULECONFIGURE Gmap MODULE

Page 6: Create a Layar with Drupal

Drupal: admin > settings > location > main Toggle location display:

Enable the display of locations

Check “Use a Google Map to set latitude and longitude”

Click “Save configuration” Users that are allowed to manually enter

latitude/longitude coordinates will be able to do so with an interactive Google Map!

CONFIGURE Location MODULECONFIGURE Location MODULE

Page 7: Create a Layar with Drupal

Drupal: admin > content > types > add Identification:

Name: Poi Type: poi Description: Point of Interest

Locative Information Number of locations:

Minimum number of locations: 1 Maximum number of locations: 1 Number of locations that can be added at once: 1

Click “Save content type”.

CREATE Poi CONTENT TYPECREATE Poi CONTENT TYPE

Page 8: Create a Layar with Drupal

Drupal: node > add > poi Fill in:

Name Body

Click map to add location Drag marker to adjust location Click “Save”

CREATE Poi CONTENTCREATE Poi CONTENT

Page 9: Create a Layar with Drupal

Drupal: admin > build > views > add View name: Layar View description: Combine POIs for Layar View tag: layar View type: Node

Click “Next”

CREATE Layar VIEW (1)CREATE Layar VIEW (1)

Page 10: Create a Layar with Drupal

Drupal: admin > build > views > edit > Layar Select “Feed” from dropdown box Click “Add display” Basic settings:

Name: Feed Title: POI layer Style: Layar JSON

CREATE Layar VIEW (2)CREATE Layar VIEW (2)

Page 11: Create a Layar with Drupal

Fields: Location: Latitude (decimal degrees) Location: Longitude (decimal degrees) Node: Title Node: Nid Node: Body

Filters:

Node: Published (Yes) Node: Type (Poi) Layar: Location latitude/longitude is within Layars requested

Proximity

CREATE Layar VIEW (3)CREATE Layar VIEW (3)

Page 12: Create a Layar with Drupal

Click the gears behind “Style” in Basic settings Feed: Style options

Layar Unique ID *: node: Nid Layar Latitude *: node: Latitude Layar Longitude *: node: Longitude Layar Title *: node: Title Layar Line 2: node_revisions: Body

Feed settings: Path: pois

CREATE Layar VIEW (4)CREATE Layar VIEW (4)

Page 13: Create a Layar with Drupal

Drupal: node > add > layar Name: Pois Layar Display View: Layar > Feed

Click “Save” Next page provides the POI URL e.g.

http://www.yourdomain.com/layar/1

CREATE Layar CONTENTCREATE Layar CONTENT

Page 14: Create a Layar with Drupal

Open POI URL in browserhttp://www.yourdomain.com/layar/1?lang=NL&countryCode=NL&userId=93527657b34ce7f&Lon=5.11034&action=refresh&Version=4.0&Lat=52.0962453&layerName=pois&Accuracy=252&radius=250000

For explanation of parameters, check:http://layar.pbworks.com/w/page/28473504/GetPOIs-Request

Adjust Lat and Lon parameters to center search area around your POI locations

Browser returns Layar JSON-object!

TEST POI URLTEST POI URL

Page 15: Create a Layar with Drupal

Add support for latest Layar API (version 4.0) Allow content managers to adjust Layer-level

JSON response elements (e.g. Actions) Support for Geo module (to benefit from spatial

database capabilities)http://drupal.org.project/geo/

Investigate REST Server and Services modules as alternativeshttp://drupal.org/project/rest_server

http://drupal.org/project/services

SUGGESTIONS FOR 2011?SUGGESTIONS FOR 2011?

Page 16: Create a Layar with Drupal

Layarhttp://www.layar.com

Howto: Create some basic location aware nodeshttp://drupal.org/node/817592

Layar modulehttp://www.drupal.org/project/layar

Explanation from module maintainerhttp://drupal.org/node/950944#comment-3619706

REFERENCESREFERENCES

Page 17: Create a Layar with Drupal

Edward Mac [email protected]

@emacgillavryhttp://drupal.org/user/682868

www.webmapper.net

CONTACT INFORMATIONCONTACT INFORMATION