Difference between revisions of "Linden Lab Official:Map API Basic Examples"

From Second Life Wiki
Jump to navigation Jump to search
(Updated for version 2 of API #2)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Supported API}}
{{Supported API}}
{{:API Portal/navigation}}
{{:API Portal/navigation|map}}
__TOC__
__TOC__


See [http://slurl.com/examples/ Second Life Map API Examples] to see these examples in action.
See [http://maps.secondlife.com/examples/ Second Life Map API Examples] to see these examples in action.
<br clear=all/>
<br clear=all/>
== Required image files ==
== Required image files ==
Line 20: Line 20:
| [[Image:Yellow marker.gif]]
| [[Image:Yellow marker.gif]]
| b_map_yellow.gif
| b_map_yellow.gif
| <br>http://slurl.com/examples/b_map_yellow.gif
| http://maps.secondlife.com/examples/b_map_yellow.gif


|-
|-
| [[Image:Fountain.gif]]  
| [[Image:Fountain.gif]]  
| fountain.gif
| fountain.gif
| http://slurl.com/examples/fountain.gif
| http://maps.secondlife.com/examples/fountain.gif
 
|-
| [[Image:Forsale.png]]
| forsale.png
| http://slurl.com/examples/forsale.png
 
|-
|[[Image:Forsale-shadow.png]]
| forsale-shadow.png
|http://slurl.com/examples/forsale-shadow.png
|}
|}


Line 59: Line 49:
First, include the [[Webmap_API#Common_HTML_header|common header code]], required by all Webmap applications.   
First, include the [[Webmap_API#Common_HTML_header|common header code]], required by all Webmap applications.   


<pre><nowiki>
<source lang="html5">
<html>
<!DOCTYPE html>
<head>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta charset="utf-8">
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={GOOGLE MAPS KEY}" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" href="http://slurl.com/_styles/MAIN.css" />
    <script src="http://maps.secondlife.com/_scripts/sl.mapapi2.js"></script>
<style>
    <link rel="stylesheet" type="text/css" href="http://maps.secondlife.com/_styles/sl.mapapi2.css">
div#map-container {
 
      width: 500px;
    <style>
      height: 500px;
    div#map-container {
}
        width: 500px;
</style>
        height: 500px;
...
    }
    </style>
    ...
</head>
</head>
</nowiki></pre>
</source>
 
Be sure to replace {GOOGLE MAPS KEY} with your Google Map key.


'''2. Add HTML body element'''
'''2. Add HTML body element'''
Line 83: Line 71:
Next, add the HTML body element to contain your map. The body contains a Javascript onload event handler that calls the '''loadmap()''' function you will define in the next step.
Next, add the HTML body element to contain your map. The body contains a Javascript onload event handler that calls the '''loadmap()''' function you will define in the next step.


<pre>
<source lang="html5">
<body onload="loadmap()" onunload="GUnload()">
<body onload="loadmap()">
  <div id="map-container"></div>
    <div id="map-container"></div>
</body>
</body>
</pre>
</source>


The div element is passed to the SLMap object constructor, using the  <code>document.getElementById('map-container')</code> DOM method call.
The div element is passed to the SLMap object constructor, using the  <code>document.getElementById('map-container')</code> DOM method call.
NOTE: If you want the position attribute of the div element to be absolute, either set it programmatically using Javascript or using the style attribute tag.  Setting the position attribute of this element in the CSS stylesheet will not work.


'''3. Add loadmap() function'''
'''3. Add loadmap() function'''
Line 97: Line 83:
The body element you just added has a Javascript event handler for the "onload" event, called when the browser initially loads the page.  You deifined this to call a '''loadmap()''' function.  Now, define that Javascript function in the head of your page (after the code that is already there), as follows:  
The body element you just added has a Javascript event handler for the "onload" event, called when the browser initially loads the page.  You deifined this to call a '''loadmap()''' function.  Now, define that Javascript function in the head of your page (after the code that is already there), as follows:  


<script>
<source lang="html5">
function loadmap() {
<script>
  mapInstance = new SLMap(document.getElementById('map-container'));
function loadmap() {
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997, 1002), 3);
    var lmap = SLMap(document.getElementById('map-container'));
}
    lmap.setView([1002, 997], 7);
</script>
}
</script>
</source>


The first line defines a new Map object from the HTML div element.  The second line centers the map at a specific point, and zooms it to zoom level three.
The first line defines a new Map object from the HTML div element.  The second line centers the map at a specific point, and zooms it to zoom level three.
Line 108: Line 96:
'''4. Save and test'''  
'''4. Save and test'''  


When you are done, save the file, and then load it into your web browser.  Try panning the map by clicking and dragging the mouse cursor; you can also pan by clicking on the arrow icons on the four sides.  Also try zooming the view in and out by clicking the "+" and "-" icons.
When you are done, save the file, and then load it into your web browser.  Try panning the map by clicking and dragging the mouse cursor.  Also try zooming the view in and out by clicking the "+" and "-" icons.


'''Complete source code'''
'''Complete source code'''


<pre>
<source lang="html5">
<html>
<!DOCTYPE html>
<head>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta charset="utf-8">
<script src="http://maps.google.com/maps?file=api&v=2&key=[GOOGLE MAPS KEY]" type="text/javascript"></script>
 
<script src="http://slurl.com/_scripts/slmapapi.js" type="text/javascript"></script>
    <script src="http://maps.secondlife.com/_scripts/sl.mapapi2.js"></script>
    <link rel="stylesheet" type="text/css" href="http://maps.secondlife.com/_styles/sl.mapapi2.css">
 
    <style>
    div#map-container {
        width: 500px;
        height: 500px;
    }
    </style>
 
    <script>
    function loadmap() {
        var lmap = new SLMap(document.getElementById('map-container'));
        lmap.setView([1002, 997], 7);
    }
    </script>


<link rel="stylesheet" type="text/css" href="http://slurl.com/_styles/MAIN.css" />
</head><body onload="loadmap()">
<style>
div#map-container {
      width: 500px;
      height: 500px;
}
</style>


<script>
    <div id="map-container"></div>
function loadmap() {
  mapInstance = new SLMap(document.getElementById('map-container'));
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997, 1002), 2);
}
</script>


</head>
</body></html>
<body onload="loadmap()" onunload="GUnload()">
</source>
<div id="map-container"></div>
</body>
</pre>


==Map with a marker ==
==Map with a marker ==
Line 153: Line 142:


<br clear="all"/>
<br clear="all"/>
<pre>
// Create the icons
var yellow_dot_image = new Img("b_map_yellow.gif", 9, 9);
var yellow_icon = new Icon(yellow_dot_image);
var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];


// Create the marker
<source lang="javascript">
var marker = new Marker(all_images, new XYPoint(997, 1002));
// creates the icon
mapInstance.addMarker(marker);
var icon = L.icon({
</pre>
    iconUrl: 'b_map_yellow.gif',
    iconSize: [9, 9]
});
 
// creates the marker
L.marker([1002, 997], {
    icon: icon
}).addTo(lmap);
</source>


In this example, clicking on the marker does nothing.  Subsequent examples illustrate adding some onClick behavior.  
In this example, clicking on the marker does nothing.  Subsequent examples illustrate adding some onClick behavior.  
Line 170: Line 162:
Replace the first line comment below with the [[Webmap_API#Common_HTML_header|common header code]].
Replace the first line comment below with the [[Webmap_API#Common_HTML_header|common header code]].


<pre>
<source lang="html5">
<!-- Insert common HTML header -->
<!DOCTYPE html>
<script>
<html><head>
function loadmap() {
    <meta charset="utf-8">
  // creates the map
 
  var mapInstance = new SLMap(document.getElementById('map-container'));
    <script src="/_scripts/sl.mapapi2.js" type="text/javascript"></script>
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997, 1002), 2);
    <link href="/_styles/sl.mapapi2.css" rel="stylesheet" type="text/css">
 
 
  // creates the icons
    <script>
  var yellow_dot_image = new Img("b_map_yellow.gif", 9, 9);
    function loadmap() {
  var yellow_icon = new Icon(yellow_dot_image);
        // creates the map
  var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
        var lmap = SLMap(document.getElementById('map-container'));
 
        lmap.setView([1002, 997], 7);
  // creates the marker
 
  var marker = new Marker(all_images, new XYPoint(997, 1002));
        // creates the icon
  mapInstance.addMarker(marker);
        var icon = L.icon({
}
            iconUrl: 'b_map_yellow.gif',
</script>
            iconSize: [9, 9]
</head>
        });
<body onload="loadmap()" onunload="GUnload()">
 
<p>There should be a yellow marker in the center of this map:
        // creates the marker
<div id="map-container"></div>
        L.marker([1002, 997], {
</body>
            icon: icon
</pre>
        }).addTo(lmap);
    }
    </script>
 
</head><body onload="loadmap()">
 
    <p>There should be a yellow marker in the center of this map:</p>
    <div id="map-container"></div>
 
</body></html>
</source>
 
==Map with an initial open popup ==


==Map with an initial open window ==
[[Image:Map_with_window.png|thumb|right|Map with a popup]]


[[Image:Map_with_window.png|thumb|right|Map with a window]]
A ''popup'' is a caption pointing to a specific point on the map, as shown in the screenshot at right. It looks something like a comic book dialog bubble.


A Webmap ''window'' is a caption pointing to a specific point on the map, as shown in the screenshot at right.  It looks something like a comic book dialog bubble. 
Use the [http://leafletjs.com/reference-1.0.2.html#popup Popup] object to create a popup.
For example, to create a popup that opens initially when the page loads:


Use the [[Webmap_API_Reference#MapWindow|MapWindow]] object to create a window.
# Instantiate a popup object with the desired caption.
For example, to create a window that opens initially when the page loads:
# Call its '''openOn()''' method with the [[Webmap_API_Reference#Map|Map]] object to add the popup to the map.  
# Instantiate a [[Webmap_API_Reference#MapWindow|MapWindow]] object with the desired caption.
# Call the '''addMapWindow()''' method on the [[Webmap_API_Reference#SLMap|SLMap]] object to add the window to the map.  
<br clear="all"/>
<br clear="all"/>
For example:
For example:


<pre>
<source lang="javascript">
// creates a window
// creates a popup
var mapWindow = new MapWindow("This is where the welcome area fountain is!!");
L.popup()
mapInstance.addMapWindow(mapWindow, new XYPoint(997, 1002));
    .setLatLng([1002, 997])
</pre>
    .setContent("<p>This is where the welcome area fountain is!!</p><img src='fountain.gif'>")
    .openOn(lmap);
</source>


The code adds an open window to the map positioned again at (997, 1002), right above the welcome area fountain.  
The code adds an open popup to the map positioned again at (997, 1002), right above the welcome area fountain.  


NOTE: after the user closes the window there is no way to bring it back.  A subsequent example will show how to enable the user to reopen the window, by using markers with windows.  
NOTE: after the user closes the popup there is no way to bring it back.  A subsequent example will show how to enable the user to reopen the popup, by using markers with popups.  
<br clear="all"/>
<br clear="all"/>


To make the map initially centered on the fountain, change the call to '''centerAndZoomAtSLCoord()''' as follows:
To make the map initially centered on the fountain, change the call to '''setView()''' as follows:


  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997, 1002), 3);
<source lang="javascript">
lmap.setView([1002, 997], 6);
</source>


'''Source code'''
'''Source code'''


This example shows how to create a map with a window. The code is the same as the first example, with the addition of some lines of Javascript after the initialization of the map, in the '''loadmap()''' function. In addition, the map is centered in a different location in order to make the window fully visible.  
This example shows how to create a map with a popup. The code is the same as the first example, with the addition of some lines of Javascript after the initialization of the map, in the '''loadmap()''' function.


Replace the first line comment below with the [[Webmap_API#Common_HTML_header|common header code]].
<source lang="html5">
<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
 
    <script src="/_scripts/sl.mapapi2.js" type="text/javascript"></script>
    <link href="/_styles/sl.mapapi2.css" rel="stylesheet" type="text/css">
 
    <link href="/_styles/MAIN.css" rel="stylesheet" type="text/css">
    <style>
        div#map-container {
            width: 500px;
            height: 500px;
        }
    </style>
    <script>
        var lmap;
        function loadmap() {
            // creates the map
            lmap = SLMap(document.getElementById('map-container'));
            lmap.setView([1001.5, 997.5], 7);
 
            // creates a popup
            L.popup()
                .setLatLng([1002, 997])
                .setContent("<p>This is where the welcome area fountain is!!</p><img src='fountain.gif'>")
                .openOn(lmap);
        }
    </script>
 
    <title>Map API Examples - Map with an initial open popup</title>
 
</head><body onload="loadmap()">
 
    <h1>Map with an initial open popup </h1>
    <p><a href="javascript:gotoSLURL(997, 1002, lmap)"> Go to (997, 1002)</a> where the welcome fountain is.</p>
 
    <div id="map-container"></div>


<pre>
</body></html>
<!-- Insert common HTML header -->
</source>
<script>
function loadmap() {
  mapInstance = new SLMap(document.getElementById('map-container'));
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997, 1002), 3);
 
  // Create window
var mapWindow = new MapWindow("This is where the welcome area fountain is!!");
mapInstance.addMapWindow(mapWindow, new XYPoint(997, 1002));
}
</script>
</head>
<body onload="loadmap()" onunload="GUnload()">
  <h1>Simple Map Example</h1>
  <div id="map-container"></div>
</body>
</pre>


==Map with a marker that opens a window ==
==Map with a marker that opens a popup ==


[[Image:Map with marker and window.png|thumb|right|Map with marker that opens a window]]
[[Image:Map with marker and window.png|thumb|right|Map with marker that opens a popup]]


This example shows how to create a map with a marker which opens a window when clicked.  It is a combination of the previous two examples, because the code first creates a marker and a window.
This example shows how to create a map with a marker which opens a popup when clicked.  It is a combination of the previous two examples, because the code first creates a marker, then a popup.


The difference comes in adding the marker to the map: this time you provide the window object as well as the marker object in the call to '''addMarker()''':
The difference comes in adding the marker to the map: first you bind the popup to the marker, using '''marker.bindPopup()''':


mapInstance.addMarker(marker, mapWindow);
<source lang="javascript">
marker.bindPopup(popup);
marker.addTo(lmap);
</source>


Doing this adds the marker and causes it to open the specified window when the user clicks it.  If the user subsequently closes the window, s/he can open it again by clicking on the marker.
Doing this adds the marker and causes it to open the specified popup when the user clicks it.  If the user subsequently closes the popup, they can open it again by clicking on the marker.


<br clear="all" />
<br clear="all" />
'''Source code'''
'''Source code'''


Replace the first line comment below with the [[Webmap_API#Common_HTML_header|common header code]].
<source lang="html5">
<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
 
    <script src="/_scripts/sl.mapapi2.js" type="text/javascript"></script>
    <link href="/_styles/sl.mapapi2.css" rel="stylesheet" type="text/css">
 
    <link href="/_styles/MAIN.css" rel="stylesheet" type="text/css">
    <style>
        div#map-container {
            width: 500px;
            height: 500px;
        }
    </style>
    <script>
        function loadmap() {
            // creates the map
            var lmap = SLMap(document.getElementById('map-container'));
            lmap.setView([1001.5, 997.5], 7);
 
            // creates the icon
            var icon = L.icon({
                iconUrl: 'b_map_yellow.gif',
                iconSize: [9, 9]
            });
 
            // creates the marker
            var marker = L.marker([1002, 997], {
                icon: icon
            });
 
            // creates a popup
            var popup = L.popup().setContent("<p>This is where the welcome area fountain is!!</p><img src='fountain.gif'>");
 
            // adds the marker to the map
            marker.bindPopup(popup);
            marker.addTo(lmap);
        }
    </script>
 
    <title>Map API Examples - Map with a marker that opens a popup</title>
 
</head><body onload="loadmap()" onlunload="GUnload()">
 
    <h1>Map with a marker that opens a popup</h1>
 
    <div id="map-container"></div>
    <p>Click on the marker to open a popup.</p>


<pre>
</body></html>
<!--- Insert common HTML header --->
</source>
<script>
function loadmap() {
  // Create the map
  var mapInstance = new SLMap(document.getElementById('map-container'));
  mapInstance.centerAndZoomAtSLCoord(new XYPoint(997.5, 1001.5), 2);
 
  // Create the icons
  var yellow_dot_image = new Img("b_map_yellow.gif", 9, 9);
  var yellow_icon = new Icon(yellow_dot_image);
  var all_images = [yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon, yellow_icon];
 
  // Create the marker
  var marker = new Marker(all_images, new XYPoint(997, 1002));
 
  // Create a window
  var mapWindow = new MapWindow("This is where the welcome area fountain is!! <br><img src='fountain.gif'>");
 
  // Adds the marker to the map
  mapInstance.addMarker(marker, mapWindow);
}
</script>
</head>
<body onload="loadmap()" onunload="GUnload()">
<p>This map shows a yellow marker on the welcome fountain.  When you click the marker,
a window appears with a screenshot of the fountain.</p>
<div id="map-container"></div>
</body>
</pre>

Latest revision as of 17:51, 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.

See Second Life Map API Examples to see these examples in action.

Required image files

Some of the following examples use image files for markers. To run the examples with the code as shown, download the image files and save them in the same directory as the example HTML files. Alternatively, create the Img objects using the URLs listed in the table below that refer to the images stored on this wiki.

The following table lists the images used in the examples:

Image File name URL
Yellow marker.gif b_map_yellow.gif http://maps.secondlife.com/examples/b_map_yellow.gif
Fountain.gif fountain.gif http://maps.secondlife.com/examples/fountain.gif

Simple map

The first example is a map with basic panning and zooming capabilities. When you are done, it will look as shown here.

Simple map

You can pan the map and zoom in and out.

To create this example, follow these steps:

  1. Add common HTML header code.
  2. Add HTML body element.
  3. Add loadmap() function.
  4. Save and test.


1. Add common HTML header

First, include the common header code, required by all Webmap applications. 

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">

    <script src="http://maps.secondlife.com/_scripts/sl.mapapi2.js"></script>
    <link rel="stylesheet" type="text/css" href="http://maps.secondlife.com/_styles/sl.mapapi2.css">

    <style>
    div#map-container {
        width: 500px;
        height: 500px;
    }
    </style>
    ...
</head>

2. Add HTML body element

Next, add the HTML body element to contain your map. The body contains a Javascript onload event handler that calls the loadmap() function you will define in the next step. 

<body onload="loadmap()">
    <div id="map-container"></div>
</body>

The div element is passed to the SLMap object constructor, using the document.getElementById('map-container') DOM method call.

3. Add loadmap() function

The body element you just added has a Javascript event handler for the "onload" event, called when the browser initially loads the page. You deifined this to call a loadmap() function. Now, define that Javascript function in the head of your page (after the code that is already there), as follows: 

<script>
function loadmap() {
    var lmap = SLMap(document.getElementById('map-container'));
    lmap.setView([1002, 997], 7);
}
</script>

The first line defines a new Map object from the HTML div element. The second line centers the map at a specific point, and zooms it to zoom level three.

4. Save and test

When you are done, save the file, and then load it into your web browser. Try panning the map by clicking and dragging the mouse cursor. Also try zooming the view in and out by clicking the "+" and "-" icons.

Complete source code 

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">

    <script src="http://maps.secondlife.com/_scripts/sl.mapapi2.js"></script>
    <link rel="stylesheet" type="text/css" href="http://maps.secondlife.com/_styles/sl.mapapi2.css">

    <style>
    div#map-container {
        width: 500px;
        height: 500px;
    }
    </style>

    <script>
    function loadmap() {
        var lmap = new SLMap(document.getElementById('map-container'));
        lmap.setView([1002, 997], 7);
    }
    </script>

</head><body onload="loadmap()">

    <div id="map-container"></div>

</body></html>

Map with a marker

Map with a marker

A marker is simply an image displayed at a specific location on the map. The Map API enables you to define an image for each zoom level, so the marker can appear differently at each zoom level if you wish.

This example shows how to make a map with a marker. The code is the same as the first example, with with addition of some Javascript after the initialization of the map in the page's onload event handler function, loadmap().

To use the code below verbatim, you must download the marker image as described in Required image files; you can also use the URL of the wiki image if you prefer.

The code first creates the icon for the marker, then places it on the map at (997, 1002) at the welcome area fountain. Because the same icon is specified for every zoom level, it appears the same size regardless of zoom level. 


// creates the icon
var icon = L.icon({
    iconUrl: 'b_map_yellow.gif',
    iconSize: [9, 9]
});

// creates the marker
L.marker([1002, 997], {
    icon: icon
}).addTo(lmap);

In this example, clicking on the marker does nothing. Subsequent examples illustrate adding some onClick behavior.

Source code

Replace the first line comment below with the common header code. 

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">

    <script src="/_scripts/sl.mapapi2.js" type="text/javascript"></script>
    <link href="/_styles/sl.mapapi2.css" rel="stylesheet" type="text/css">

    <script>
    function loadmap() {
        // creates the map
        var lmap = SLMap(document.getElementById('map-container'));
        lmap.setView([1002, 997], 7);

        // creates the icon
        var icon = L.icon({
            iconUrl: 'b_map_yellow.gif',
            iconSize: [9, 9]
        });

        // creates the marker
        L.marker([1002, 997], {
            icon: icon
        }).addTo(lmap);
    }
    </script>

</head><body onload="loadmap()">

    <p>There should be a yellow marker in the center of this map:</p>
    <div id="map-container"></div>

</body></html>

Map with an initial open popup

Map with a popup

A popup is a caption pointing to a specific point on the map, as shown in the screenshot at right. It looks something like a comic book dialog bubble.

Use the Popup object to create a popup. For example, to create a popup that opens initially when the page loads:

  1. Instantiate a popup object with the desired caption.
  2. Call its openOn() method with the Map object to add the popup to the map.


For example: 

// creates a popup
L.popup()
    .setLatLng([1002, 997])
    .setContent("<p>This is where the welcome area fountain is!!</p><img src='fountain.gif'>")
    .openOn(lmap);

The code adds an open popup to the map positioned again at (997, 1002), right above the welcome area fountain.

NOTE: after the user closes the popup there is no way to bring it back. A subsequent example will show how to enable the user to reopen the popup, by using markers with popups.

To make the map initially centered on the fountain, change the call to setView() as follows: 

lmap.setView([1002, 997], 6);

Source code

This example shows how to create a map with a popup. The code is the same as the first example, with the addition of some lines of Javascript after the initialization of the map, in the loadmap() function. 

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">

    <script src="/_scripts/sl.mapapi2.js" type="text/javascript"></script>
    <link href="/_styles/sl.mapapi2.css" rel="stylesheet" type="text/css">

    <link href="/_styles/MAIN.css" rel="stylesheet" type="text/css">
    <style>
        div#map-container {
            width: 500px;
            height: 500px;
        }
    </style>
    <script>
        var lmap;
        function loadmap() {
            // creates the map
            lmap = SLMap(document.getElementById('map-container'));
            lmap.setView([1001.5, 997.5], 7);

            // creates a popup
            L.popup()
                .setLatLng([1002, 997])
                .setContent("<p>This is where the welcome area fountain is!!</p><img src='fountain.gif'>")
                .openOn(lmap);
        }
    </script>

    <title>Map API Examples - Map with an initial open popup</title>

</head><body onload="loadmap()">

    <h1>Map with an initial open popup </h1>
    <p><a href="javascript:gotoSLURL(997, 1002, lmap)"> Go to (997, 1002)</a> where the welcome fountain is.</p>

    <div id="map-container"></div>

</body></html>

Map with a marker that opens a popup

Map with marker that opens a popup

This example shows how to create a map with a marker which opens a popup when clicked. It is a combination of the previous two examples, because the code first creates a marker, then a popup.

The difference comes in adding the marker to the map: first you bind the popup to the marker, using marker.bindPopup(): 

marker.bindPopup(popup);
marker.addTo(lmap);

Doing this adds the marker and causes it to open the specified popup when the user clicks it. If the user subsequently closes the popup, they can open it again by clicking on the marker.


Source code 

<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">

    <script src="/_scripts/sl.mapapi2.js" type="text/javascript"></script>
    <link href="/_styles/sl.mapapi2.css" rel="stylesheet" type="text/css">

    <link href="/_styles/MAIN.css" rel="stylesheet" type="text/css">
    <style>
        div#map-container {
            width: 500px;
            height: 500px;
        }
    </style>
    <script>
        function loadmap() {
            // creates the map
            var lmap = SLMap(document.getElementById('map-container'));
            lmap.setView([1001.5, 997.5], 7);

            // creates the icon
            var icon = L.icon({
                iconUrl: 'b_map_yellow.gif',
                iconSize: [9, 9]
            });

            // creates the marker
            var marker = L.marker([1002, 997], {
                icon: icon
            });

            // creates a popup
            var popup = L.popup().setContent("<p>This is where the welcome area fountain is!!</p><img src='fountain.gif'>");

            // adds the marker to the map
            marker.bindPopup(popup);
            marker.addTo(lmap);
        }
    </script>

    <title>Map API Examples - Map with a marker that opens a popup</title>

</head><body onload="loadmap()" onlunload="GUnload()">

    <h1>Map with a marker that opens a popup</h1>

    <div id="map-container"></div>
    <p>Click on the marker to open a popup.</p>

</body></html>
Retrieved from "https://wiki.secondlife.com/w/index.php?title=Linden_Lab_Official:Map_API_Basic_Examples&oldid=1205054"