VectorLayer()
constructor
Inherits from BaseLayer
The layer class responsible for adding vector shapes on the map
Options:
Events:
pressA geometry was clicked/touched. Returns the target geometry and the event containing the map coordinates.long-pressA geometry was long clicked/touched. Returns the target geometry and the event containing the map coordinates.overThe mouse is currently over a geometry. Returns the target geometry and the event containing the map coordinates.outThe mouse is no longer over a geometry. Returns the target geometry and the event containing the map coordinates.
| Parameter | Type | Description |
|---|---|---|
| options | Object | The VectorLayer options |
Example
$(document).ready(function(){
var mapContainer = T.DomUtil.get("map"),
popupsLayer = new T.PopupsLayer({name: "Popups"}),
mapoLayer = new T.TibcoLayer({name: "Tile"}),
vectorLayer = new T.VectorLayer({name: "Vector", useCanvas: false});
var map = new T.Map(
mapContainer,
{
zoom: 4,
center: new T.LatLng(45, 15),
urlLocation: false
}
);
// Add layers to map
map.addLayer(mapoLayer);
map.addLayer(vectorLayer);
map.addLayer(popupsLayer);
// Create Popup
var popup = new T.Popup(
"", {
closeButtonUrl: "../../assets/close.png",
offset: {x: 0, y: -10},
panMap: true,
panMapExtraOffset: {x: 0, y: 10}
}
);
// Add popup to its layer
popupsLayer.addPopup(popup);
// Create circle
var circle = new T.Circle([48.85341, 2.3488], 100000, { radiusMeasure: 'meter' });
circle.setStyle({ color:"#FF0000", stroke: true });
// Create triangle
var triangle = new T.Polygon([[[48.871941, 2.349358],[57.751076,11.939392],[45.759859, 21.234856]],[[49.871941, 4.349358],[55.751076,11.939392],[47.759859, 16.234856]]]);
// Add geometries to vector layer
vectorLayer.addGeometry(circle);
vectorLayer.addGeometry(triangle);
// Add event listeners
vectorLayer.events.on("press", function (geometry, evt) {
var targetGeometry = geometry instanceof T.Circle ? "<b>Circle</b>" : "<b>Triangle</b>";
popup.setHtml("<div class='text'>You clicked on the: {{target}}</div>", {
target: targetGeometry
});
popup.close();
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
vectorLayer.events.on("long-press", function (geometry, evt) {
var targetGeometry = geometry instanceof T.Circle ? "<b>Circle</b>" : "<b>Triangle</b>";
popup.setHtml("<div class='text'>You long-clicked on the: {{target}}</div>", {
target: targetGeometry
});
popup.close();
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
vectorLayer.events.on("over", function (geometry, evt) {
var targetGeometry = geometry instanceof T.Circle ? "<b>Circle</b>" : "<b>Triangle</b>";
popup.setHtml("<div class='text'>You hovered over the: {{target}}</div>", {
target: targetGeometry
});
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
vectorLayer.events.on("out", function (geometry, evt) {
var targetGeometry = geometry instanceof T.Circle ? "<b>Circle</b>" : "<b>Triangle</b>";
popup.setHtml("<div class='text'>You hovered off the: {{target}}</div>", {
target: targetGeometry
});
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
});<html>
<head>
<title>TibcoMaps - Vector events demo</title>
<meta charset="UTF-8">
<!-- CSS -->
<link rel="stylesheet", href="vector-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="vector-layer.js"></script>
</head>
<body>
<div class="custom-container">
<div id="map"></div>
</div>
</body>
</html>body {
width: 100%;
height: 100%;
}
.custom-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#map {
width: 100%;
height: 100%;
}
.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: 300px;
border-radius: 10px;
background: #FFF;
padding: 5px;
text-align: center;
}
.tibco-popup-content {
padding: 0px 20px 20px 20px;
}