ImageMarker.js

ImageMarker()


constructor

ImageMarker class is responsible for displaying an image in a marker on the map. Markers should be added using MarkersLayer

Options:
  • draggable(Boolean)If true, a MarkerDragHandler will be enabled for the marker (default: false)
  • offset(Point)The pixels offset of the marker from its original position (default: new T.Point(0, 0))
  • anchor(String)The point of anchor on the marker (default: 'bottom-center'). Available options are:

    • 'bottom-left'
    • 'bottom-center'
    • 'bottom-right'
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;
}