[!] Please open HTML source of any sample
HTML file and look for comments in JavaScript function
InitializeMap().
LVME setup
file
Editing the
setup file
Inserting LVME
into a htmlL page
Initializing
language
Adding/modifying
languages
Defining LVME
modes
Adding locations
to map
Dynamically
showing/hiding locations on the map
Files in the
package
Browser support
matrix
LVME setup file
Every instance of LVME needs a setup file that defines default
parameters for the engine. The setup file must be named same as main LVME
SWF file, but have a ".txt" extension. This is done to enable placing
multiple instances of the engine in single directory.
The LVME
package has a main LVME SWF file called LVME.swf and a setup file LVME.txt. Should you decide to rename the main file
(eg. to LVME_MyCity.swf), you should rename the setup file as well
(following the example, if you rename the main file to LVME_MyCity.swf,
you should rename the setup file to LVME_MyCity.txt).
If you place
in one directory several instances of the engine for more than one city
(egz. LVME_OneCity.swf, LVME_TwoCity.swf, etc.), you should create a setup
file for each (LVME_OneCity.txt, LVME_TwoCity.txt, etc.)
LVME setup
file must be placed into the same directory as the main LVME SWF file
(LVME.swf in the package).
[Help
topics]
Editing the setup file
To edit the setup file, just open it in any text editor (avoid using MS
WORD or other rich-text applications because they place formatting
information that will make the file unreadable for the engine). Using
Notepad is recommended.
When you open the setup file, you will see
something similar to the following line:
Multilevel=NO&MapSource=Stockholm.swf&MapName=Stockholm&InitialScale=220&InitialX=-306&InitialY=-66&...
This
is URL-encoded string of parameters and values, delimetered by "&"
sign. You can edit the parameters according to your needs. The following
parameters are presented:
1. "Multilevel" - can have "YES"
or "NO" values. This parameter can be omitted (same result as "NO" value).
This tells the engine whether to use Multilevel Mode.
2.
"MapSource" - a Flash file (SWF format) that is used as map for the
engine. It must be placed in the same directory as LVME main SWF file
(LVME.swf in distribution package).
3. "MapName" - name of the
map (city or country name, etc.). This name will be shown in top left
corner of the map window.
4. "InitialScale" - initial scale for
the map. To visually find the right scale, pls. enter an Editor Mode (pls.
refer to htmlL samples on how to use this mode), select the right scale,
get the map information and place the scale value to the setup file.
5.
"InitialX" - initial X position for the map.
6.
"InitialY" - same as above for Y.
7. "MinZoomLevel" -
minimal allowed zoom level for the map. Also used as zoom value for
most-left position in Scale Jump control element on the map. (Light blue
triangle in the bottom-right part of LVME window).
8.
"MaxZoomLevel" - maximum allowed zoom level for the map. Also used
as zoom value for most-right position in Scale Jump control.
9.
"ScaleUnit" - a parameter that binds real distances (in kilometers
and miles) to vector map. To establish the right value for the parameters,
please perform the following steps:
a) Set "InitialScale"
value to 100 and reload the SWF file.
b) Measure on a real
map how many meters are represented on the Scale Measurement Unit
(distance label on the bottom-left part of the LVME
window.)
c) Write down this value (number of meters) as
"ScaleUnit" value.
Eg. with "InitialScale" value of 100, you
established that Scale Measurement Unit should represent 5 km. 422 meters.
Set "ScaleUnit" value to 5422 and the map will show correct distances for
all zoom levels.
[Help
topics]
Inserting LVME into a htmlL page
It is very simple to insert LVME into htmlL page. You can look at how it
is inserted in any of the htmlL sample files provided in the
package.
1. Make sure you have loaded a JavaScript Bridge
into your htmlL page. The following line should be placed within the
<HEAD> tag:
<script language=javascript
src="lvme_bridge.js"></script>
If you generate htmlL
pages from different directories (Eg. from cgi-bin directory, whilst
lvme_bridge.js is placed in different directory, make sure you specified a
correct path (absolute -
src="http://YourServer.com/yourLVMEdirectory/lvme_bridge.js" or relative -
src="../subdirectory/lvme_bridge.js").
2. Make sure that you
insert a LVME JavaScript initialization function within the <HEAD>
tag. This should look like following:
function
InitializeMap()
{
iniMap("Normal");
}
Here,
iniMap("Normal"); initializes LVME in normal
mode. For more modes, please read further.
3. Change since v3.0+
Function
InitializeMap() is now called by LVME.swf when the map is loaded. You
don't have to insert
onLoad="InitializeMap()" into <body> tag. If you insert this function into
<body> tag (as suggested in earlier versions of LVME), it will not
work with Netscape 6.02
4. Insert LVME Flash include into
your htmlL page. The code should be exactly like following:
<!--Start LVME Map Include -->
<OBJECT
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH=550
HEIGHT=400 id="movie">
<PARAM NAME=movie VALUE="LVME.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor
VALUE=#FFFFFF>
<EMBED src="LVME.swf" quality=high
swLiveConnect=true bgcolor=#FFFFFF WIDTH=550 HEIGHT=400
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED></OBJECT>
<!--End LVME Map Include -->
Here, you should
replace Flash movie source "LVME.swf" to
whatever you renamed your main LVME SWF file (LVME.swf in distribution package).
[Help
topics]
Initializing language.
Since v3.0 you must initialize LVME language. Initialization is done
with InitializeLanguage() function (last function in LVME include block).
The syntax is following:
function
InitializeLanguage()
{
setLanguage("en");
}
Here,
we are initializing English language by calling
setLanguage("en");
[!] Only those languages that are added
to lvme_lang.js can be initialized. Please refer to the section below on
how to add/modify languages in lvme_lang.js
[Help
topics]
Adding/modifying languages
LVME uses external language file lvme_lang.js. Messages for
every language are defined in lvme_lang.js language blocks that are
enclosed in [///Start language block] and [///End language block]. Please
follow the steps below to add a new language:
1. Copy default (English) language block.
Before
copying:
//----------------Start English
language block----------------
var lang_code = "en";
msg[lang_code]
= new Array();
msg[lang_code]['loading']="Loading
map";
....
//----------------End language
block----------------
After copying:
//----------------Start English language
block----------------
var lang_code = "en";
msg[lang_code] = new
Array();
msg[lang_code]['loading']="Loading
map";
....
//----------------End language
block----------------
//----------------Start English language
block----------------
var lang_code = "en";
msg[lang_code] = new
Array();
msg[lang_code]['loading']="Loading
map";
....
//----------------End language
block----------------
2. Change language code (as you
will call it) in var lang_code. For example, we'll use German code "de"
(see below). Then translate all messages into another language. The
changed new language block should look like below (changes in red):
//----------------Start
German language
block----------------
var lang_code = "de";
msg[lang_code] = new
Array();
msg[lang_code]['loading']="Loading
map in German";
....
//----------------End language
block----------------
[Help
topics]
Defining LVME modes
Normal Mode
Normal mode is used in most
cases. It loads regular LVME interface without Auto / Editor / Search htmlL
connectivity.
The following JavaScript block initializes Normal
Mode:
<script language=javascript
src="lvme_bridge.js"></script>
<script
language=javascript>
function
InitializeMap()
{
iniMap("Normal");
//FORMAT:
iniMap(Mode);
// Normal mode is used for most cases - it does not load
any of the Editor Modes and Search Mode
}
Editor Mode
LVME
Editor Mode is used to establish coordinates for Locations (eg. to enter
an object's X&Y to database), as well as getting map's X, Y and Scale
(eg. to place into setup file, so initially the map is loaded into a
centered view with the desired scale).
This mode can be accessed in
two ways
- By initializing the map in Editor Mode (as it is shown below
on this page)
- By pressing a mouse button anywhere on the map, holding
it pressed and pressing "Home" button on the keyboard. "Home" button
switches Editor Mode on/off - you can try it on any of the maps in
previous samples.
The following
JavaScript block initializes Editor Mode:
<script language=javascript
src="lvme_bridge.js"></script>
<script
language=javascript>
function
InitializeMap()
{
iniMap("EditorNormal", 200, 100);
// FORMAT:
iniMap("EditorNormal", pointer_x, pointer_y);
// "EditorNormal" sets
the map into Editor Mode
// Here, 200 (pointer_x) is initial Pointer's
X coordinate
// 100 (pointer_y) is initial Pointer's Y coordinate
}
</script>
Editor Auto
Mode
LVME Editor Auto Mode is used to automate the process of
sending objects' coordinates to web applications (Perl scripts, PHP, ASP,
and all others that can process GET/POST data), egz. for further storing
in database.
The following JavaScript block initializes Editor Auto
Mode:
<script language=javascript
src="lvme_bridge.js"></script>
<script
language=javascript>
function
InitializeMap()
{
iniMap("EditorAuto", "form", "x", "y", 200,
100);
// FORMAT: iniMap("EditorAuto", htmlL_form_name,
htmlL_x_field_name, htmlL_y_field_name, pointer_x, pointer_y);
//
"EditorAuto" sets the map into Editor Mode
// Here, "form"
(htmlL_form_name) is a name for the form in htmlL page where X and Y input
fields are nested.
// "x" (htmlL_x_field_name) is the name for htmlL
input field in specified form, where X coordinate of the Pointer is
passed.
// "x" (htmlL_y_field_name) is the name for htmlL input field in
specified form, where Y coordinate of the Pointer is passed.
// 200
(pointer_x) is initial Pointer's X coordinate
// 100 (pointer_y) is
initial Pointer's Y coordinate
}
</script>
Search Mode
This mode is used to visually
take search area and pass the parameters to a server application. In this
mode, three parameters for htmlL form are set by LVME - search square
center's X & Y and Offset.
For example, if user sets the search
square to position X:100, Y:200, Offset: 50, a search script should return
all objects, where
50 < X <150 and 150 < Y <250
The
following JavaScript block initializes Search Mode:
<script language=javascript
src="lvme_bridge.js"></script>
<script
language=javascript>
function
InitializeMap()
{
iniMap("Search", "form", "x", "y", "offset", 250,
125, 50);
// FORMAT: iniMap("Search", htmlL_form_name,
htmlL_x_field_name, htmlL_y_field_name, htmlL_offset_field_name, square_x,
square_y, square_scale);
// "Search" sets the map into Search
Mode
// Here, "form" (htmlL_form_name) is a name for the form in htmlL
page where X and Y input fields are nested.
// "x" (htmlL_x_field_name)
is the name for htmlL input field in specified form, where X coordinate of
the Search Square center is passed.
// "x" (htmlL_y_field_name) is the
name for htmlL input field in specified form, where Y coordinate of the
Search Square center is passed.
// "offset" (htmlL_offset_field_name) is
the name for htmlL input field in specified form, where Offset value is
passed.
// 250 (square_x) is initial Search Square center X coordinate
// 125 (square_y) is initial Search Square center Y coordinate
//
50 (square_scale) is initial Search Square scale
value
}
</script>
[Help
topics]
Adding locations to map
First, you need to define Locations Groups (even if you have only one
location, eg. one hotel, you still need to create a Locations Group and
then add the location to the group). Every locations group can have
different pointers (symbols).
After you have defined one or more
Locations Groups, you can add individual locations to them.
To add
Locations Group, use the following function:
addLocationsGroup(1,"Hotels","DefaultPointer",15);
FORMAT: addLocationsGroup(group_number, name_of_the_group,
pointer_for_the_group, pointer_size);
Here, "1" (group_number) is the number for the first group. All
groups must be added subsequently - 1, 2, 3, etc.
"Hotels" (name_of_the_group) is name for the group 1. The name
will be displayed on the map once the group is shown
"DefaultPointer"
(pointer_for_the_group) sets the default
pointer (red arrow) for this group.
You can also specify any other
valid swf file to be used as pointer.
[!] If you specify an
external SWF file as pointer, make sure it's in the same directory or is
specified absolutely - eg."http://server.com/pointer.swf"
"15" (pointer_size) is the size of the pointer - you can
set any size.
To add a location, use the
following function:
addLocation(1,1,237,112,"Hotel A","HotelA.html","Tip
for Hotel A - can be its address, telephone, etc.");
FORMAT:
addLocation(group_number,location_number,location_x,location_y,location_name,location_link,tip);
Here,
the first "1" (group_number) is a number of
group that you added by the above command.
The second "1" (location_number) is a location number. All locations
in every group must be added subsequently: 1, 2, 3, etc.
"237" (location_x) is the location X coordinate.
"112"
(location_y) is the location Y
coordinate.
[!] location X and Y coordinates can be established
in Editor Mode or Editor Auto Mode.
[!] If an object doesn't
have X and Y coordinates, X=0 and Y=0 should be passed - then users will
be prompted by LVME that this object is not mapped.
"Hotel A" (location_name) is name for the object. Will be
displayed on the map (top left corner) when users mouseover the symbol for
this location.
"HotelA.html" (location_link)
is a link for the object. When users click on the symbol representing the
object in LVME window, they will be directed to the location.
[!] If an object doesn't have a name of location, double quotes
(empty string) should be used.
"Tip for Hotel A - can be its address,
telephone, etc." (tip) - tip for the location.
Will be displayed on the map (popup box) when users mouseover the symbol
for this location.
[Help
topics]
Dynamically showing/hiding locations on the map
First, objects and layers should be initialized in JavaScript function
InitializeMap(); in htmlL <HEAD> block.
Please open htmlL source in sample htmlL files and refer to comments on how
to do the initialization.
Next, several functions are used to
show/hide objects or layers.
Display objects
All you have
to do is call JavaScript function showLocation(group_number, object_number); or
showLocation(group_number, object_number,zoom_level);
Here,
group_number and object_number are the same that you assigned to the
object in InitializeMap(); funcition.
zoom_level is optional parameter that sets zoom level
of the map (overriding any previous zoom commands and user zoom
preference).
htmlL source for a link that shows one object once
clicked, will look like following:
<a
href="javascript:showLocation(1,2)">Display this Location on the
Map</a>
In the line above, "1" is a group number for the
location and "2" is location number.
You can also define map zoom
as the third parameter. This will set map into specified zoom level when
executing showLocation() command. Example below sets the map zoom level to
100.
<a
href="javascript:showLocation(1,2,100)">Display this Location on the
Map</a>
Hide objects
You are only able to
hide the entire group. So, htmlL source for link that hides the location,
displayed in the previous example, will look like this:
<a href="javascript:hideGroup(1)">Hide this
object</a>
Here, "1" is the number for the group, where
the object belongs.
Display a group of objects (layer of
objects)
htmlL source of the link that shows entire group of objects
once clicked is:
<a
href="javascript:showLocationsGroup(2)">Show this
group</a>
Here, "2" is the number of group to
display.
Hide a group of objects
<a href="javascript:hideGroup(1)">Hide this
group</a>
Here, "2" is the number of group to
hide.
[Help
topics]
Files in the package
Below you will find links to some files in the package that may be
useful for you:
LVME.fla - LVME Flash sources (LVME Commercial Package only)
LVME.txt - LVME initialization file.
lvme_lang.js - LVME language
file
RestaurantsPointer.fla - Flash example of restaurants pointer. It
is 40x40 Flash file with one frame. The very bottom/center point will
actually point to the correct coordinates on the
map.
RestaurantsPointer.swf - Flash (published SWF file) example of a
restaurants pointer used in package's
examples.
stockholm_multilevel.fla - Flash example of a multilevel
map.
Stockholm.swf - Flash (published SWF file) example of Stockholm
map.
[Help
topics]
Browser support matrix
LVME 3.0 has been tested to work with:
Internet Explorer 4+
Netscape Navigator 4.x, 6.02+
LVME does
not work under Netscape Navigator 6.01 as it does not support
LiveConnect.
LVME may or may not work with other browsers.
[Help
topics] |
