Dev: SM: Example - Overlaying Points
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.
|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|
Optional: Unique identifier for the point, only needed should you plan on accessing the point using it later
Setting the Icon
|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|
|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
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
|anchory||(string)||How the icon image will be aligned to the coordinates specified for this point
|Parameter||(string)||New behaviour of this point
|Parameter||(string)||Sets the display style of this point
Set icon size
|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|
The map will not be updated until the Init() function is called.
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.|
Removing all Points
This will delete all point in that layer and again the myMap.Init() must be called after the RemoveAllPoints function.