Path()
constructor
abstract
The class from which all geometry classes inherit*Note: 'over' and 'out' events are not available for canvas usage!
Options:
Events:
pressThe geometry was clicked/touched. Returns the event containing the map coordinates.long-pressThe geometry was long clicked/touched. Returns the event containing the map coordinates.overThe mouse is currently over the geometry. Returns the event containing the map coordinates. Not available for canvas usage!outThe mouse is no longer over the geometry. Returns the event containing the map coordinates. Not available for canvas usage!
| Parameter | Type | Description |
|---|---|---|
| options | Object | The options of the geometry |
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(
"", {
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
triangle.events.on("press", function (evt) {
popup.setHtml("<div class='text'>You clicked on the: {{target}}</div>", {
target: "<b>Triangle</b>"
});
popup.close();
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
triangle.events.on("long-press", function (evt) {
popup.setHtml("<div class='text'>You long-clicked on the: {{target}}</div>", {
target: "<b>Triangle</b>"
});
popup.close();
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
circle.events.on("over", function (evt) {
popup.setHtml("<div class='text'>You hovered over the: {{target}}</div>", {
target: "<b>Circle</b>"
});
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
circle.events.on("out", function (evt) {
popup.setHtml("<div class='text'>You hovered off the: {{target}}</div>", {
target: "<b>Circle</b>"
});
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-events.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-events.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;
}