Dev: SM: Example - Overlaying Points

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 and the code and step are explaied below

// Create a points layer, z-level=1, right at the top
points=myMap.AddLayer('point',1,'id');
// Sets the point using the latitude and longitude and text description
var t = points.AddPoint(28.05,-26.19,'caption','id'); 
  //Display a icon of your choice            
  t.SetIcon("https://www.streetmaps.co.za/img/aat_logo.png");
  t.SetTooltip("Johannesburg");
  t.SetIconAnchor("center","center");
  t.SetLabelAnchor("iconcenter","iconcenter");
  t.SetClickBehaviour("toggle_icon_label");
  t.SetStyle("label");
  t.SetIconSize(48,34);
myMap.Init();

Creating the point layer

Using the myMap object, you will need to create a new "maps" layer to load your points of interest. As shown above, the new maps layer take three parameters.

points=myMap.AddLayer("point",1,"id");

Point	(string)	this is the layer type
Z-index	(number)	Z-Position of the layer in the stack – the higher this number is, the further toward the bottom of the stack of layers it will be. Layers with a lower position will appear to be stacked on top of ones with a higher number.
ID	(string)	A unique reference for this layer; It only needs to be unique should you need to reference it later, the system does not require this to be unique to function correctly

Setting the POI (Point of interest)

This Adds a point to the layer and you can add many points to a single points layer. Only the very bare minimum properties of the point are set with this function, But you can set different methods for this point to further enrich the look and functionality.

var t = points.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

Point Methods

Setting the Icon

t.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

t.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

t.SetIconAnchor("anchorx","anchory");
t.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 “iconcenter”: (label only): The center of the icon 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 “iconcenter”: (label only): The center of the icon image will be aligned to the coordinate “right”: The right edge of the image will be aligned to the coordinate

Click Behaviour

t.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

t.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

t.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.Init();

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

Delete Point

points.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

points.RemoveAllPoints();

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