ImageMarker()
constructor
ImageMarker class is responsible for displaying an image in a marker on the map. Markers should be added using MarkersLayer
Options:
Events:
pressThe marker was clicked/touched. Returns the event including the map coordinates.long-pressThe marker was long clicked/touched. Returns the event including the map coordinates.right-clickThe marker was right clicked. Returns the event including the map coordinates.overThe mouse is currently over the marker. Returns the event including the map coordinates.outThe mouse is no longer over the marker. Returns the event including the map coordinates.before-drag-startFired before the drag operation starts. Works for mouse and touch. Returns the event.drag-startFired at the very moment when the drag operation starts. Works for mouse and touch. Returns the event.dragFired during the drag operation. Works for mouse and touch. Returns the event.drag-endFired when the drag operation ends. Works for mouse and touch. Returns the event.
| Parameter | Type | Description |
|---|---|---|
| latLng | LatLng | The coordinates of the marker |
| url | String | The URL to the image |
| options | Object | The options of the marker |
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(47, 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: -10},
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(45.757918, 21.229024),
"http://geoanalytics.tibco.com/documentation/assets/img/marker.png"
);
var htmlMarker = new T.HtmlMarker(
new T.LatLng(48.858915, 2.348777),
"<div class='my-label'>Paris</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
imageMarker.events.on("press", function (evt) {
popup.setHtml("<div class='text'>You clicked on the marker in: {{target}}</div>", {
target: "<b>Timișoara</b>"
});
popup.close();
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
imageMarker.events.on("long-press", function (evt) {
popup.setHtml("<div class='text'>You long-clicked on the marker in: {{target}}</div>", {
target: "<b>Timișoara</b>"
});
popup.close();
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
imageMarker.events.on("right-click", function (evt) {
popup.setHtml("<div class='text'>You right-clicked on the marker in: {{target}}</div>", {
target: "<b>Timișoara</b>"
});
popup.close();
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
htmlMarker.events.on("over", function (evt) {
popup.setHtml("<div class='text'>You hovered the marker in: {{target}}</div>", {
target: "<b>Paris</b>"
});
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
htmlMarker.events.on("out", function (evt) {
popup.setHtml("<div class='text'>You hovered off the marker in: {{target}}</div>", {
target: "<b>Paris</b>"
});
popup.open(evt.latLng);
setTimeout(function () {
popup.close();
}, 2000);
});
});
<html>
<head>
<title>TibcoMaps - Markers demo</title>
<meta charset="UTF-8">
<!-- CSS -->
<link rel="stylesheet", href="marker-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="marker-events.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: 350px;
border-radius: 10px;
background: #FFF;
padding: 5px;
text-align: center;
}
.tibco-popup-content {
padding: 15px;
}