api
controls
core
distance
geocoder
geometry
importers
itinerary
layers
legacy
map
popup
projections
trade-area
utils

Popup.js


constructor

Popup class is responsible for displaying HTML content in a popup on the map. Popups should be added using PopupsLayer

Options:
  • closeButtonUrl(String)The URL to the close button image (default: '')
  • offset(Point)The pixels offset of the popup from its original position (default: {x: 0, y: 0})
  • panMap(Boolean)If true, pans the map if popup is not completely visible
  • panMapExtraOffset(Point)The extra pixels that the map should be panned when popup is not completely in view
Parameter Type Description
html String The HTML content that will be added to the popup's container
options Object The options of the popup instance

setHtml()


method
Parameter Type Description
template String The template as a string. Can also be parametrized. A parameter must have the follwoing form: {{parameter}}. E.g setHtml("Marker in {{cityName}} city!", {cityName: "Paris"})
templateData Object The values for the template parameter. E.g setHtml("Marker in {{cityName}} city!", {cityName: "Paris"})

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;
}

isInViewport()


method

Checks if the popup is entirely visible in the map viewport

returns
Boolean - If true, the popup is visible

isHorizontallyVisible()


method

Checks if popup is entirely visible on X axis

returns
Boolean - If true, the popup is visible

isVerticallyVisible()


method

Checks if popup is entirely visible on Y axis

returns
Boolean - If true, the popup is visible

open()


method

Opens the popup and sets its position

Parameter Type Description
reference LatLng The coordinates on the map where to show the popup

close()


method

Closes the popup