Dev: SM: Overlaying Points

From AAT Wiki
Jump to: navigation, search

Introduction

Now that you have a myMap object, you can interact with it. (see Basic Map page) The basic map object looks and behaves a lot like the map you interact with on the StreetMaps website and comes with a lot of built-in Events.

Adding a point

Adding a point to the map is very Simple:

var newPoint = myMap.AddPoint(31.039006,-29.855916,'Caption!','id');
myMap.Update();

Creating a POI (Point of interest)

This Adds a point to the default POI layer. Default values are used for all the customizable attributes. You can add many points to a single points layer. You can set different methods for this point to further enrich the look and functionality.

var newPoint = myMap.AddPoint(x,y,'caption','id');
X (float) X Coordinate of the new point
Y (float) Y Coordinate of the new point
Caption (string) Default caption for this new point
ID

Optional: Unique identifier for the point, only needed should you plan on accessing the point using it later

The default properties of the point are

  • Large speech bubble for the caption
  • Small black dot for the icon
  • Clicking on the close button of the speech bubble will go to the icon, and vice versa.

Point Methods

Once the point has been added to the map, there are a number of operations you can perform on it to change the look and behaviour of it.

These examples show how to manipulate points on the default POI layer of the map. It is possible to create one or more POI layers and operate on POIs within those layers; the full API reference should be referred to for this.

Setting the Icon

newPoint.SetIcon("https://www.streetmaps.co.za/img/aat_logo.png");
Parameter (string) The URL of the icon which will represent this point. It is suggested that a png or gif file is used, as the API will honour transparent backgrounds and attempt to make the PNG files work in IE6, where there are issues with PNG files and transparent images


Tool Tip

newPoint.SetTooltip("Johannesburg");
Parameter (string) The string which will be displayed in a standard tooltip when then cursor hovers over the icon of the point


Icon / Label Anchor

newPoint.SetIconAnchor("anchorx","anchory");
newPoint.SetLabelAnchor("bottom","bottom");

Both functions do the same thing, one controls the icon and the other the lable. Two arguments are passed to these functions

anchorx (string) How the icon image will be aligned to the coordinates specified for this point
“left”: The left edge of the image will be aligned to the coordinate
“center”: The center of the image will be aligned to the coordinate
“right”: The right edge of the image will be aligned to the coordinate
anchory (string) How the icon image will be aligned to the coordinates specified for this point
“left”: The left edge of the image will be aligned to the coordinate
“center”: The center of the image will be aligned to the coordinate
“right”: The right edge of the image will be aligned to the coordinate

Click Behaviour

newPoint.SetClickBehaviour("toggle_icon_label");
Parameter (string) New behaviour of this point
“toggle_all_label”: Clicking on either the label area or the image icon will toggle between just displaying the icon and the icon and label together
“toggle_icon_label”: Clicking on only the icon will toggle between displaying the icon and the icon and label together. This should be used should your popup label contain any hotspots.

Set Style

newPoint.SetStyle("label");
Parameter (string) Sets the display style of this point
“label”: The label an corresponding icon will both be shown
“icon”: Only the icon will be shown

Set icon size

:“label”: The label an corresponding icon will both be shown
.SetIconSize(newx,newy);
newx (integer) Size, in pixels, of the width of the icon to be used for this point
newy (integer) Size, in pixels, of the height of the icon to be used for this point

Initialize point

myMap.Update();

The map will not be updated until the Init() function is called.

Delete Point

myMap.DeletePoint('ID');

To delete a point to need to call the point layer with the delete function as above and after the delete function is called you will need to call the Initialize fynction, myMap.Init().

id (string) The unique identifier of the point to delete, as specified in AddPoint.
Returns (boolean)
true: Point was found and deleted
false: Point was not found in the layer

Removing all Points

myMap.RemoveAllPoints();

This will delete all point in that layer and again the myMap.Init() must be called after the RemoveAllPoints function.