MarkersLayer()
constructor
Inherits from BaseLayer
MarkersLayer class is responsible for adding markers on the map
Options:
Events:
pressA marker was clicked/touched. Returns the target marker.long-pressA marker was long clicked/touched. Returns the target marker.overThe mouse is currently over a marker. Returns the target marker.outThe mouse is no longer over a marker. Returns the target marker.before-drag-startFired before the drag operation on a marker starts. Works for mouse and touch. Returns the target marker.drag-startFired at the very moment when the drag operation on a marker starts. Works for mouse and touch. Returns the target marker.dragFired during the drag operation on a marker. Works for mouse and touch. Returns the target marker.drag-endFired when the drag operation ends on a marker. Works for mouse and touch. Returns the target marker.
| Parameter | Type | Description |
|---|---|---|
| options | Object | The MarkerLayer's options |
Example
$(document).ready(function(){
var mapContainer = T.DomUtil.get("map"),
markersLayer = new T.MarkersLayer(),
popupsLayer = new T.PopupsLayer(),
mapoLayer = new T.TibcoLayer();
// Initialize map
var map = new T.Map(
mapContainer,
{
zoom: 6,
center: new T.LatLng(45, 15),
urlLocation: false
}
);
// Add the layers to the map
map.addLayer(mapoLayer);
map.addLayer(markersLayer);
map.addLayer(popupsLayer);
// Create popups
var popup = new T.Popup(
"", {
offset: {x: 0, y: -40},
panMap: true,
panMapExtraOffset: {x: 0, y: 10}
}
);
// Add popup to its layer
popupsLayer.addPopup(popup);
// Create markers
var imageMarker = new T.ImageMarker(
new T.LatLng(46.015534907633075,19.877929687500007),
"http://geoanalytics.tibco.com/documentation/assets/img/marker.png"
);
var htmlMarker = new T.HtmlMarker(
new T.LatLng(45.472681,9.176968),
"<div class='my-label'>HTML Marker</div>",
{
draggable: true,
draggableUsingOffset: true,
offset: new T.Point(0, 0)
}
);
// Add markers to the layer
markersLayer.addMarker(imageMarker);
markersLayer.addMarker(htmlMarker);
// Add event listeners on the layer
markersLayer.events.on("press", function(marker) {
var targetMarker = marker instanceof T.ImageMarker ? "<b>Image Marker</b>" : "<b>HTML Marker</b>";
popup.setHtml("<div class='text'>You clicked on the: {{target}}</div>", {
target: targetMarker
});
popup.close();
popup.open(marker.latlng);
setTimeout(function () {
popup.close();
}, 2000);
});
markersLayer.events.on("long-press", function(marker) {
var targetMarker = marker instanceof T.ImageMarker ? "<b>Image Marker</b>" : "<b>HTML Marker</b>";
popup.setHtml("<div class='text'>You long-clicked on the: {{target}}</div>", {
target: targetMarker
});
popup.close();
popup.open(marker.latlng);
setTimeout(function () {
popup.close();
}, 2000);
});
markersLayer.events.on("over", function(marker) {
var targetMarker = marker instanceof T.ImageMarker ? "<b>Image Marker</b>" : "<b>HTML Marker</b>";
popup.setHtml("<div class='text'>You hovered over the: {{target}}</div>", {
target: targetMarker
});
popup.close();
popup.open(marker.latlng);
setTimeout(function () {
popup.close();
}, 3000);
});
markersLayer.events.on("out", function(marker) {
var targetMarker = marker instanceof T.ImageMarker ? "<b>Image Marker</b>" : "<b>HTML Marker</b>";
popup.setHtml("<div class='text'>You hovered off the: {{target}}</div>", {
target: targetMarker
});
popup.close();
popup.open(marker.latlng);
setTimeout(function () {
popup.close();
}, 2000);
});
});<html>
<head>
<title>TibcoMaps - Markers demo</title>
<meta charset="UTF-8">
<!-- CSS -->
<link rel="stylesheet", href="markers-layer.css"/>
<link rel="stylesheet" type="text/css" href='../lib/GeoAnalytics.css'>
<!-- Javascript -->
<script type="text/javascript" src='../lib/GeoAnalytics.js'></script>
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src="markers-layer.js"></script>
</head>
<body>
<div class="custom-container">
<div id="map"></div>
</div>
</body>
</html>body { margin: 10px 10px;}
#map {
width: 100%;
height: 100%;
}
.custom-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.my-label {
background: #FFF;
border: 1px solid #000;
width: 100px;
height: 20px;
text-align: center;
}
.map-click {
margin: 15px 5px 15px 5px;
}
.tibco-popup {
width: 320px;
border-radius: 10px;
background: #FFF;
padding: 5px;
text-align: center;
}
.tibco-popup-content {
padding: 15px;
}