Locago

Tutorial: Static layer

Every Locago layer can be described as layer pages and a map view. In the map view, the layer can show an overlay of points, lines and/or polygons.

This tutorial will show you how to create a static layer showing some places in Lund.

In a static layer the content is compiled and placed on the Locago server. If the map data is very seldom changed you should create a static layer, otherwise a dynamic layer.

You can download all the files needed to create the tutorial layer here.

The steps to create this static layer are:


Start the tutorial

Step 1 - Create the IGEO file

IGEO is a XML-based file format where geographical data can be stored. It is preferable to generate an IGEO file if there is a need to store many places.

Create an IGEO file with this content:

<?xmlversion="1.0"encoding="UTF-8"?>
<geodata>
<Marker name="Pizzeria Avesta" text="Best kebab pizza in town" x="13.183161" y="55.70653" />
<Marker name="Pizzeria Delphi" text="Fast and good pizza" x="13.21273" y="55.722304" />
<Marker name="Pub Liten" text="Nice pub, almost every Thursday from 6 pm" x="13.209395" y="55.71247" />
<Marker name="Pub Vildanden" text="Largest collection of beer in town" x="13.168977" y="55.709625" />
<Marker name="Gerdahallen" text="Student fitness center" x="13.201615" y="55.7089" />
<Marker name="Hogevallsbadet" text="Fitness center" x="13.18344" y="55.700061" />
<Marker name="Domkyrkan" text="The oldest church in Lund" x="13.194063" y="55.709635" />
</geodata>

Save the file as tutorial_1.igeo, or download the file from here.

The <Marker> tag is used to store a place.
The attributes used are

name
a name associated with the place
text
a description of the place
x, y
the coordinates of the place, x is longitude and y is latitude both expressed in WGS84 format.

The IGEO can store more information, such as categories. See Develop the layer further. It is also possible to store other types of geometry. See the documentation.

Up Next >

Step 2 - Create the IDOC file

IDOC is also a XML-based file format where both the layer content and how the layer page will look are described.

Create an IDOC file with this content:

<?xml version="1.0" encoding="UTF-8" ?>
<idoc title="My Lund" icon="icon.png" >
 
<!-- Part: Layer-->
<layer>
<info>
This (example) layer shows some places in Lund.
</info>
<symbolLayer name="Places" dataset="tutorial_1.igeo" />
<tag name="Example" />
</layer>
 
<!-- Part: Page -->
<style fontSize="12" fontStyle="bold" alignX="middle" >
My Lund
</style>
<br/>
<br/>
These are some of my favorite places in Lund.
<br/>
<br/>
<section title="Show content" action="layer.viewExtent()" />
</idoc>

Save the file as static_tutorial_1.idoc.
, or download the file from here. Save the icon: icon.png as icon.png

Search result

The title and icon specified in the <idoc> tag are used to describe the layer to Locago users.
The icon must be in .png, .gif or .jpg format and a good size is 24x24 pixels.

Part: Layer

Layer info

A layer must have one and only one <layer> tag. Information about the layer is presented to a Locago user with tags such as <info> and <tag> .

A sublayer, such as <symbolLayer> , connects the IGEO information to the map overlay. The access to the geographical content is defined with the attribute dataset. A layer can consists of many sublayers. See the IDOC documentation to define the layer.

Part: Page

The appearance of the layer page is also described in the IDOC. See the IDOC documentation to find out the appearance possibilities. Many of the tags are similar to ordinary HTML.

The action attribute of the <section> tag makes a call to view the extent of the map data by using the IScript language. See the IScript documentation for more information.

< Back Up Next >

Step 3 - Make the content available on the Internet

Same directory

A web server is needed to make the content available to. Place all the files, IGEO, IDOC and any icons, in the same directory.

Make sure the files are available to Locago for example by pointing a web browser to the files.

< Back Up Next >

Step 4 - Publish the layer on Locago

The last step is to publish the page on Locago. To publish a page you need to be signed in. If you do not have an account you need to create one first. It is free.

Publish the IDOC

The layer URL to be given on the publisher page is the path to the IDOC file.

After publishing your layer you can add it to your mobile phone from the head menu in Locago by searching for the title. You can also view the layer in the Locago's Web demo by clicking the 'View' option on the publisher page.
Note! Your layer may not be visible if you browse the Locago layers by tag. Only the top ten rated layers in every tag category are visible. This may be changed in Locago in the future.

Manage published layers

When logged in you can manage all your already published layers on the publisher page. If any content is changed, please update your layer by clicking on 'Update'.

< Back Up Next >

Develop the layer further

An easy way to develop the layer further is to add categories to make the layer more interactive with the Locago users.

You can download all the files needed to create the further development of the tutorial layer here. You can also see them here.

Add categories in IGEO

Make the following changes to the IGEO file

<?xml version="1.0" encoding="UTF-8" ?>
<geodata>
<Marker name="Pizzeria Avesta" text="Best kebab pizza in town" category="1" x="13.183161" y="55.70653" />
<Marker name="Pizzeria Delphi" text="Fast and good pizza" category="1" x="13.21273" y="55.722304" />
<Marker name="Pub Liten" text="Nice pub, almost every Thursday from 6 pm" category="2" x="13.209395" y="55.71247" />
<Marker name="Pub Vildanden" text="Largest collection of beer in town" category="2" x="13.168977" y="55.709625" />
<Marker name="Gerdahallen" text="Student fitness center" category="3" x="13.201615" y="55.7089" />
<Marker name="Hogevallsbadet" text="Fitness center" category="3" x="13.18344" y="55.700061" />
<Marker name="Domkyrkan" text="The oldest church in Lund" category="4" x="13.194063" y="55.709635" />
</geodata>

Save the file as tutorial_2.igeo, or download the file from here.

The category must be a number between 0 and 31. See the IGEO documentation for more attributes of the geographical data.

Add categories in IDOC

Make the following changes to the IDOC file

<?xml version="1.0" encoding="UTF-8" ?>
<idoc title="My Lund 2" icon="icon.png" >
 
<!-- Part: Layer-->
<layer>
<info>
This (example) layer shows some places in Lund.
</info>
<symbolLayer name="Places" dataset="tutorial_1.igeo" >
<categorySymbol value="1" symbol="i:pinred" />
<categorySymbol value="2" symbol="i:pingreen" />
<categorySymbol value="3" symbol="i:pinorange" />
<categorySymbol value="4" symbol="symbol.png" />
</symbolLayer>
<tag name="Example" />
</layer>
 
<!-- Part: Page -->
<style fontSize="12" fontStyle="bold" alignX="middle" >
My Lund 2
</style>
<br/>
<br/>
These are some of my favorite places in Lund.
<br/>
<br/>
Choose which type of places you want to see
<br/>
<checkbox value="false" id="pizza" label="Pizza" />
<checkbox value="false" id="pub" label="Pub" />
<checkbox value="false" id="fitness" label="Fitness" />
<br/>
<br/>
<section title="Show content" action="layer.set({sublayer:'Places', category:1, included:doc.fields.pizza.value}); layer.set({sublayer:'Places', category:2, included:doc.fields.pub.value}); layer.set({sublayer:'Places', category:3, included:doc.fields.fitness.value}); layer.viewExtent();" />
</idoc>

Save the file as static_tutorial_2.idoc, or download the file from here. Save the symbol: symbol.png as symbol.png

The <cateogrySymbol> tag defines a symbol to correspond to a category in the IGEO. In Locago the symbol aliases i:pinblue, i:pinred, i:pingreen, i:pinyellow, i:pinlime, i:pinpurple and i:pinorange are available. You can also use an URL path to a .png, .gif or .jpg image. This is done for category 4. The path can be relative. See the IDOC documentation for more information.

The action attribute of the <section> tag makes a call using the IScript language. As can be found in the IScript documentation for the layer.set call:

This example hides the sublayer myLayer:

layer.set({sublayer:'myLayer', category:3, included:'false'})

To set the parameter included the doc.fields from the IScript language is used to get the value of the checkboxes, referenced by id. The action makes three calls to layer.set and one two layer.viewExtent() to show the extent on top of the map.

Update the layer

Make all the files available on the web server. Replace IGEO and IDOC and add the symbol. Go to the publish and manage layer side and update the layer.

Hint!An update of an layer transmitts your changes to all Locago user's already using your layer.

Update the layer

< Back Up