Difference between revisions of "Linden Lab Official:Map API Reference"

From Second Life Wiki
Jump to navigation Jump to search
(Added a warning about missing capability id for BUG-4116)
(Updated for version 2 of API)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
{{Supported API}}
{{Supported API}}
{{:API Portal/navigation|map}}
{{:API Portal/navigation|map}}
'''NOTE:''' See the [[Map API#Release notes|Release Notes]] for information on new features and known issues.
'''NOTE:''' See the [[Linden Lab Official:Map API Introduction#Release notes|Release Notes]] for information on new features and known issues.
__TOC__
__TOC__
<br clear="all"/>
<br clear="all"/>
Line 12: Line 12:
!valign="top"| Description
!valign="top"| Description


|-
|valign="top" class="signature"|
SLMap(
[https://developer.mozilla.org/en/DOM/element HTMLElement] element)
|[[#Map|Map]]
|Creates a new map inside the specified DOM element.
|-
|-
|valign="top" class="signature"|
|valign="top" class="signature"|
Line 17: Line 23:
x Number,
x Number,
y Number,
y Number,
[[#SLMap|SLMap]] slMap)  
[[#Map|Map]] lmap)
|None
|None
|Launches the Second Life Viewer, setting the avatar's location to the specified inworld location.
|Pans the map to display the specified inworld location.
 
|}
|}


== Objects ==
== Objects ==


=== Bounds ===
=== Map ===
Represents the bounds for a 2D coordinate space. Typically, you don't construct one explicitly, but rather call the '''getViewportBounds()''' method on a [[#SLMap|SLMap]] instance.
This class is the Leaflet class that represents the map. For more information, see [http://leafletjs.com/reference-1.0.2.html#map the Leaflet Map reference].
 
 
{{API Constructor|
Bounds (
xMin Number,
xMax Number,
yMin Number,
yMax Number)
}}
 
'''Properties'''
 
{| border="2" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Property
!valign="top"| Default
!valign="top"| Description
 
|-
|xMin
|Zero
|Minimum x coordinate of the bounding window.  Must be a postive integer.
 
|-
|xMax
|Zero
|Maximum x coordinate of the bounding window.  Must be a postive integer.
 
|-
|yMin
|Zero
|Minimum y coordinate of the bounding window.  Must be a postive integer.
 
|-
|yMax
|Zero
|Maximum y coordinate of the bounding window.  Must be a postive integer.
|}
 
NOTE: The default values are applied if any of the properties is not specified in the constructor call.
 
'''Example'''
 
...
var mapInstance = new SLMap(document.getElementById('map-container'));
var bounds = mapInstance.getViewportBounds();  // This is a Bounds object
...
 
=== Icon ===
Represents an icon to used as a marker.
 
{{API Constructor|
Icon (
[[#Img|Img]] mainImage,
[[#Img|Img]] shadowImage )
}}
 
Creates a new icon to be used on the map. The optional second parameter specifies a shadow image.
The shadowImage argument is optional and defaults to null.
 
'''Example'''
 
// create the icons
var forsale_sign = new Img("Forsale.png",80,83, true); // note fourth parameter is true!
var forsale_shadow = new Img("Forsale-shadow.png",98,83, true);
var forsale_icon = new Icon(forsale_sign, forsale_shadow);
var all_images = [forsale_icon,
                  forsale_icon,
                  forsale_icon,
                  forsale_icon,
                  forsale_icon,
                  forsale_icon];
// create the marker
var marker = new Marker(all_images, new XYPoint(995,1004));
mapInstance.addMarker(marker);
 
=== Img ===
Represents an image to be used as an icon.
 
{{API Constructor|
Img (
String imageSource,
Number width,
Number height,
Boolean hasAlphaChannel )
}}
 
The followint table describes the Img object's properites:
 
{| border="2" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Property
!valign="top"| Default
!valign="top"| Description
 
|-
| imageSource
| None
| URL of image file.  Can be a relative or absolute URL.
 
|-
| width
| None
| Width of image in pixels (a positive integer).
 
|-
| height
| None
| Height of image in pixels (a positive integer).
 
|-
| hasAlphaChannel
| false
| Boolean that indicates whether the image is a 24-bit PNG image with alpha channel transparency.  Optional parameter.
 
|}
 
'''Example'''
 
// create the icons
var forsale_sign = new Img("Forsale.png", 80, 83, true); // Note fourth parameter is true!
var forsale_shadow = new Img("Forsale-shadow.png",98,83, true);
var forsale_icon = new Icon(forsale_sign, forsale_shadow);
var all_images = [forsale_icon,
                  forsale_icon,
                  forsale_icon,
                  forsale_icon,
                  forsale_icon,
                  forsale_icon];
// create the marker
var marker = new Marker(all_images, new XYPoint(995,1004));
mapInstance.addMarker(marker);
 
'''Methods'''
 
{| border="1" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Method
!valign="top"| Return Value
!valign="top"| Description
 
|-
|valign="top" class="signature"|
isAlpha()
|Boolean
|Returns true if the image has an alpha channel, false otherwise.
|}
 
=== MapWindow ===
This class represents a window placed over the map.
 
{{API Constructor|
MapWindow (
String windowText)
}}
 
Creates a new map window. The window will display the text specified by the '''windowText''' parameter.  You can include HTML tags in the windowText, but you must escape quotes, otherwise, you'll get Javascript errors.
 
<!-- Currently not implemented
The '''options''' argument is an [http://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Literals#Object_Literals object literal] that specifies the window options, as described in the following table.
 
{| border="2" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Property
!valign="top"| Default
!valign="top"| Description
 
|-
|closeOnMove
|false
|Whether window is closed when user drags the map.
 
|-
|width
|252
|Width of the window in pixels.
 
 
|-
|alwaysOnTop
|false
|Whether window is always displayed on top of other windows.
 
|-
|bringToTop
|false
|Whether window is brought to the top when user clicks other windows.
 
|-
|noEffect
|false
|Whether window appears with fade-in and fade-out effect.
 
|-
|height
|236
|Height of the window in pixels.
 
|-
|padding
|10
|Padding of the window in pixels.
|}
-->
'''Example'''
 
var mapWindow = new MapWindow("This is where the welcome area fountain is!! &lt;br&gt;<img src='fountain.gif'>");
mapInstance.addMapWindow(mapWindow, new XYPoint(997, 1002));
 
=== Marker ===
Represents a marker to be added on the map.  


{{API Constructor|  
{{API Constructor|  
Marker (
[http://leafletjs.com/reference-1.0.2.html#map Map] SLMap([https://developer.mozilla.org/en/DOM/element HTMLElement] container)
Array icons,
[[#XYPoint|XYPoint]] coordinate,
[[#MarkerOptions|MarkerOptions]] markerOptions )
}}
}}


Creates a new marker to be placed on the map at given coordinate. The first parameter is an array of six icon objects. Each icon in the array corresponds to a zoom level, icons[0] being the icon used at the close zoom (level 0).
Creates a Leaflet map configured to display a map of Second Life.
 
The [[#MarkerOptions|MarkerOptions]] argument is optional.
 
'''Properties'''
 
{| border="2" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Property
!valign="top"| Default
!valign="top"| Description
 
|-
|slCoord.x
|None
|Second Life x coordinate of the marker
 
|-
|slCoord.y
|None
|Second Life y coordinate of the marker
|}
 
=== MarkerOptions ===
 
Object used to specify optional properties when creating a [[#Marker|Marker]] object.
 
'''Properties'''
 
{| border="2" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Property
!valign="top"| Default
!valign="top"| Description
 
|-
|autopanOnClick
|true
|If true, the map will automatically pan the map if part of the associated MapWindow would have been clipped by an edge of the map when it was opened.
 
|-
|autopanPadding
|45
|How close the window needs to be (in pixels) to an edge of the map to trigger autopanning.
 
|-
|centerOnClick
|false
|If true, centers the map on the marker when user clicks on it.
 
|-
|clickHandler
|null
|Event handler function called when user clicks on marker, that is, when onClick event.  Optional.  The marker is automatically passed as the argument to the function.
 
|-
|horizontalAlign
|"center"
|Specifies how the marker is horizontally aligned.  Valid values are:
* "left"
* "right"
* "center"
 
|-
|onMouseOutHandler
|null
|Event handler function called when mouse pointer leaves marker, that is, when onmouseout event occurs.    Optional.
 
 
|-
|onMouseOverHandler
|null
|Event handler function called when mouse pointer moves over marker, that is, when onmouseover event occurs.    Optional.
 
|-
|verticalAlign
|"middle"
|Specifies how the marker is vertically aligned. Valid values are:
* "top"
* "bottom"
* "middle"
 
|-
|zLayer
|0
|Specifies the CSS z-index of the marker. A marker with a greater z-index will display over one with a lower z-index.  For example, if a marker having zLayer of one (1) and another marker having zLayer of zero (0) overlap, the first one will be on top.  For more information on z-index, see [http://developer.mozilla.org/En/Understanding_CSS_z-index Understanding CSS z-index].
|}
 
The optional clickHandler, onMouseOverHandler, and onMouseOutHandler properties specify event handler functions called when the respective events occur.
 
'''Example'''
 
The following code sets the '''clickHandler''', '''onMouseOverHandler''', and '''onMouseOutHandler''' properties to assign an event handler function called when theuser clicks on the marker, moves the mouse pointer over the marker, and moves the mouse pointer off the marker, respectively:
 
var doMarkerAction = function(marker) {alert("an event occured at (" + marker.slCoord.x + "," + marker.slCoord.y + ")"); };
var marker = new Marker(all_images,
                        new XYPoint(997,1002),
                        {clickHandler: doMarkerAction,
                          onMouseOutHandler:  doMarkerAction,
                          onMouseOverHandler: doMarkerAction});
 
=== SLMap ===
This class represents the map.
 
{{API Constructor|
SLMap (
[https://developer.mozilla.org/en/DOM/element HTMLElement] container,
[[#SLMapOptions|SLMapOptions]] options )
}}


Creates the map. The options argument defaults to null.
The map is generated with a click event handler that calls '''gotoSLURL()''' to display a popup with a “Visit this location” link.


By default the map has a clickhandler function that calls '''gotoSLURL()''', passing the location of the click.  By default, the map has a doubleclickhandler function that calls '''centerAndZoomAtSLCoord()''', passing the location of the double click.
==== Useful Methods ====


==== Methods ====
For other methods, see [http://leafletjs.com/reference-1.0.2.html#map-method the Leaflet Map methods reference].


{| border="1" cellspacing="0" cellpadding="3" rules="all" class="apitable"
{| border="1" cellspacing="0" cellpadding="3" rules="all" class="apitable"
Line 373: Line 53:
|-
|-
|valign="top" class="signature"|
|valign="top" class="signature"|
addMapWindow(
[http://leafletjs.com/reference-1.0.2.html#map-setview setView](
[[#MapWindow|MapWindow]] mapWindow,
[http://leafletjs.com/reference-1.0.2.html#latlng LatLng] center,
[[#XYPoint|XYPoint]] coord )
|valign="top"| None
|valign="top"| Add a MapWindow to the map at specified coordinate.  
 
|-
|valign="top" class="signature"|
addMarker(
[[#Marker|Marker]] marker,
[[#MapWindow|MapWindow]] mapWindow )
|valign="top"| None
|valign="top"| Add a marker. If the optional mapWindow argument is null, then clicking on the marker will not open a window.
 
|-
|valign="top" class="signature"|
centerAndZoomAtSLCoord(
[[#XYPoint|XYPoint]] coordinate,  
Number zoom)
Number zoom)
|valign="top"| None
|valign="top"| [http://leafletjs.com/reference-1.0.2.html#map Map]
|valign="top"| Centers and zooms the map to the specified location.  Argument zoom must be an integer value.
|valign="top"| Centers and zooms the map to the specified location.  Argument zoom must be an integer value. Note that [http://leafletjs.com/examples/crs-simple/crs-simple.html#this-is-not-the-latlng-youre-looking-for a LatLng is a (Y, X) coordinate], so coordinates passed as ''center'' should be in (Y, X) order.
 
|-
|valign="top" class="signature"|
clickMarker(
[[#Marker|Marker]] marker)
|valign="top"| None
|valign="top"| Simulates clicking a marker. Recenters the pan if its not currently in the viewport of the map.
 
|-
|valign="top" class="signature"|
disableDragging()
|valign="top"| None
|valign="top"| Disables all dragging on the map. Note: panning controls will still work.  
 
|-
|valign="top" class="signature"|
enableDragging()
|valign="top"| None
|valign="top"| Re-enables dragging on the map if it was disabled.
 
|-
|valign="top" class="signature"|
getCurrentZoomLevel()
|valign="top"| None
|valign="top"| Gets the current zoom level (1-6). For more information, see [[Webmap_API#Zoom_levels|Zoom levels]].
 
|-
|valign="top" class="signature"|
getMapCenter()
|valign="top"|[[#XYPoint|XYPoint]]
|valign="top"| Returns the current map center. For more information, see [[Webmap_API#About_coordinates|About coordinates]].
 
|-
|valign="top" class="signature"|
getViewportBounds()
|valign="top"|[[#Bounds|Bounds]]
|valign="top"| Gets the viewport bounds. For more information, see [[Webmap_API#About_coordinates|About coordinates]].
 
|-
|valign="top" class="signature"|
panDown()
|valign="top"| None
|valign="top"| Pan the map down by half its width.
 
|-
|valign="top" class="signature"|
panLeft()
|valign="top"| None
|valign="top"| Pan the map left by half its width.
 
|-
|valign="top" class="signature"|
panOrRecenterToSLCoord(
[[#XYPoint|XYPoint]] coord,
Boolean recenter )
|valign="top"| None
|valign="top"| Pan the map to the given coordinate if it is currently in the viewport (in the user's view). Otherwise, recenters the map to the given coordinate.  The optional recenter argument  specifies whether to center the given coordinate even it if is currently in the viewport. Its default value is false.
 
|-
|valign="top" class="signature"|
panRight()
|valign="top"| None
|valign="top"| Pan the map right by half its width.
 
|-
|valign="top" class="signature"|
panUp()
|valign="top"| None
|valign="top"| Pan the map up by half its width.
 
|-
|valign="top" class="signature"|
removeAllMarkers() 
|valign="top"| None
|valign="top"| Remove all markers.
 
|-
|valign="top" class="signature"|
removeMarker(
[[#Marker|Marker]] marker) 
|valign="top"| None
|valign="top"| Remove a marker.
 
|-
|valign="top" class="signature"|
setCurrentZoomLevel(
Number zoom)
|valign="top"| None
|valign="top"| Set the zoom level to specified value.  Argument zoom must be an integer.
 
|-
|valign="top" class="signature"|
zoomIn()
|valign="top"| None
|valign="top"| Zoom in on the map if the map is not already all the way zoomed in.
 
|-
|valign="top" class="signature"|
zoomOut()
|valign="top"| None
|valign="top"| Zoom out on the map if the map is not already all the way zoomed out.
|}
 
=== SLMapOptions ===
This class represents optional arguments to the [[#SLMap|SLMap]] constructor. It has no constructor, so you must instantiate it as an [http://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Literals#Object_Literals object literal].
 
'''Properties'''
 
{| border="2" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Property
!valign="top"| Default
!valign="top"| Description
 
|-
|hasZoomControls
|true
|Whether the map has zoom controls.
 
|-
|hasPanningControls
|true
|Whether the map has pan controls.
 
|-
| hasOverviewMapControl
| true
| Specifies whether to display overview control in lower right of map.
|-
|doubleClickHandler
|null
| Specifies event handler function called when user double-clicks on the map.
 
|-
|clickHandler
|null
|Specifies event handler function called when user clicks once on the map.
|-
|onStateChangedHandler
|null
|Specifies an event handler function to call when map state changes, that is:
* Map pans
* Zoom level changes
 
|-
|zoomMin
|6
|Specifies an minimum level a map can be zoomed to. Maximum is seven (7).
 
|-
|zoomMax
|1
|Specifies an maximum level a map can be zoomed to. Minimum is one (1).
|}
 
'''Example'''
 
Set the '''onStateChangedHandler''' property to define an event handler called whenever the "state" of the map changes (for example, when the map bounds change).
 
var doSomething = function(x,y) {
                                    alert("The map state changed.");
                                  };
mapInstance = new SLMap(document.getElementById('map-container'),
                        {onStateChangedHandler: doSomething});
 
=== SLPoint ===
 
Not currently implemented.
 
<!--
Represents a point in Second Life.
 
 
{{API Constructor|
SLPoint (String Region_name,
Int local_x,
Int local_y )
 
Creates an SLPoint object.
 
'''Properties'''
 
{| border="2" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Property
!valign="top"| Default
!valign="top"| Description
|-
|x
|X coordinate
 
|-
|y
|Y coordinate
|}
 
Note - The region name is case insensitive; for example, so to specificy "Da Boom" region, use either:
 
* SLPoint("da boom")
* SLPoint("dA bOOm")
-->
=== XYPoint ===
Represents a point in 2D coordinate space.
 
{{API Constructor|
XYPoint (
Number x,  
Number y )
}}
 
Creates an XYPoint object.
 
'''Properties'''
 
{| border="2" cellspacing="0" cellpadding="3" rules="all" class="apitable"
|- bgcolor="#A7C1F2"
!valign="top"| Property
!valign="top"| Default
!valign="top"| Description
 
|-
|x
|None
|X coordinate
 
|-
|y
|None
|Y coordinate
|}
|}
'''Example'''
  mapInstance1.centerAndZoomAtSLCoord(new XYPoint(997.5, 1001.5), 2);


== Utility URLs ==
== Utility URLs ==
Line 634: Line 64:


=== Region name from global coordinates ===
=== Region name from global coordinates ===
'''Note''': the capability for this service, b713fe80-283b-4585-af4d-a3b7d9a32492, is currently unavailable.  [[User:Maestro Linden|Maestro Linden]] 14:46, 22 January 2014 (PST)
https<nowiki></nowiki>://cap.secondlife.com/cap/0/'''b713fe80-283b-4585-af4d-a3b7d9a32492'''?'''var'''=''varName''&'''grid_x'''=''xcoord''&'''grid_y'''=''ycoord''
  https<nowiki></nowiki>://cap.secondlife.com/cap/0/'''b713fe80-283b-4585-af4d-a3b7d9a32492'''?'''var'''=''varName''&'''grid_x'''=''xcoord''&'''grid_y'''=''ycoord''
* '''var''' is arbitrary, for output formatting.
* '''var''' is arbitrary, for output formatting.
* '''grid_x''' is the region's global x coordinate as an integer.
* '''grid_x''' is the region's global x coordinate as an integer.
Line 645: Line 74:


=== Global coordinates from region name ===
=== Global coordinates from region name ===
https<nowiki></nowiki>://cap.secondlife.com/cap/0/'''d661249b-2b5a-4436-966a-3d3b8d7a574f'''?'''var'''=''varName''&'''sim_name'''=''RegionName''
https<nowiki></nowiki>://cap.secondlife.com/cap/0/'''d661249b-2b5a-4436-966a-3d3b8d7a574f'''?'''var'''=''varName''&'''sim_name'''=''RegionName''
* '''var''' is arbitrary, for output formatting.
* '''var''' is arbitrary, for output formatting.
* '''sim_name''' is a region on the Second Life map.
* '''sim_name''' is a region on the Second Life map.
Line 652: Line 81:
  https://cap.secondlife.com/cap/0/d661249b-2b5a-4436-966a-3d3b8d7a574f?var=coords&sim_name=Da%20Boom
  https://cap.secondlife.com/cap/0/d661249b-2b5a-4436-966a-3d3b8d7a574f?var=coords&sim_name=Da%20Boom
:Returns: <pre>var coords = {'x' : 1000, 'y' : 1000 };</pre>
:Returns: <pre>var coords = {'x' : 1000, 'y' : 1000 };</pre>
=== Voice support ===
''(This was for support of the former Second Life voice map. It's documented for completeness, but basically all regions have supported voice for a long time.)''
https<nowiki></nowiki>://secondlife.com/app/voicemap/index.php?var=varName&'''x'''=''xcoord''&'''y'''=''ycoord''&'''blocksize'''=''num''
* '''var''' is arbitrary, for output formatting.
* '''x''' is the region's global x coordinate as an integer.
* '''y''' is the region's global y coordinate as an integer.
* '''blocksize''' controls now many regions are reported. <code>blocksize=1</code> returns a single region's information, <code>blocksize=2</code> returns information for a 2 x 2 square of regions (4 total), and so on.
'''Example'''
https://secondlife.com/app/voicemap/index.php?var=voice&x=1000&y=1000&blocksize=1
:Returns: <pre>var voice = [{x: 1000, y: 1000, voiceEnabled: new Date(f), name: 'a'}]</pre>

Latest revision as of 18:23, 13 December 2016

NOTE: This is an official Second Life API provided and documented by Linden Lab. Its use is subject to the API Terms of Use.

NOTE: See the Release Notes for information on new features and known issues.


Global functions

Function Return Value Description

SLMap( HTMLElement element)

Map Creates a new map inside the specified DOM element.

gotoSLURL( x Number, y Number, Map lmap)

None Pans the map to display the specified inworld location.

Objects

Map

This class is the Leaflet class that represents the map. For more information, see the Leaflet Map reference.

Constructor

Map SLMap(HTMLElement container)

Creates a Leaflet map configured to display a map of Second Life.

The map is generated with a click event handler that calls gotoSLURL() to display a popup with a “Visit this location” link.

Useful Methods

For other methods, see the Leaflet Map methods reference.

Method Return Value Description

setView( LatLng center, Number zoom)

Map Centers and zooms the map to the specified location. Argument zoom must be an integer value. Note that a LatLng is a (Y, X) coordinate, so coordinates passed as center should be in (Y, X) order.

Utility URLs

These map helper functions are available from the caps server. The JSON-like results return text that Javascript could eval(), but scripts coming from outside should parse them the "hard" way for safety.

Region name from global coordinates

https://cap.secondlife.com/cap/0/b713fe80-283b-4585-af4d-a3b7d9a32492?var=varName&grid_x=xcoord&grid_y=ycoord

  • var is arbitrary, for output formatting.
  • grid_x is the region's global x coordinate as an integer.
  • grid_y is the region's global y coordinate as an integer.

Example 

https://cap.secondlife.com/cap/0/b713fe80-283b-4585-af4d-a3b7d9a32492?var=region&grid_x=1000&grid_y=1000
Returns: 
var region='Da Boom';

Global coordinates from region name

https://cap.secondlife.com/cap/0/d661249b-2b5a-4436-966a-3d3b8d7a574f?var=varName&sim_name=RegionName

  • var is arbitrary, for output formatting.
  • sim_name is a region on the Second Life map.

Example 

https://cap.secondlife.com/cap/0/d661249b-2b5a-4436-966a-3d3b8d7a574f?var=coords&sim_name=Da%20Boom
Returns: 
var coords = {'x' : 1000, 'y' : 1000 };
Retrieved from "https://wiki.secondlife.com/w/index.php?title=Linden_Lab_Official:Map_API_Reference&oldid=1205051"