GeoAnalytics v1.3.1

Map.js

Map()
The map's constructor
destroy()
Destroys the map
addHandler()
Adds a handler to the map
Ex. map.addHandler(new T.MouseHandler())
addControl()
Adds a UI control to the map
Ex. map.addControl(new T.RulerControl({...}))
resetView()
Resets the map to the specified center and zoom
addLayer()
Adds a layer to the map
Ex. map.addLayer(new T.MarkersLayer())
removeLayer()
Removes a layer from the map
setCenter()
Sets the map center to a given location
setZoom()
Sets the map to a new zoom level
getCenter()
Returns the map's current center coordinates
latLngToPoint()
Converts map coordinates to a point representing the pixels on the map from the top left corner
pointToLatLng()
Converts a point representing the pixels on the map from the top left corner to map coordinates
panBy()
Pans the map by the given offset value.
Ex. map.panBy(new T.Point(-100, 0)), pans the map to the right by 100 pixels
zoomAround()
Sets the map location to new coordinates and zooms the map to a new zoom level
fitToBounds()
Sets the map location and zoom level to the specified bounds
getBounds()
Returns the current bounds of the map
moveLayer()
Moves a layer to a new index (zIndex) in the stack of layers
moveLayerUp()
Moves a layer up (increase its position) in the stack of layers
moveLayerDown()
Moves a layer down (decrease its position) in the stack of layers
copyrightVisibilityChange()
Sets the visibility mode for the copyright text

Map()

constructor

The map object is responsible for rendering a map in a container with a set of options.

Options:

zoom(Number)The initial zoom (default: 5)
minZoom(Number)The minimum zoom level (default: 0)
maxZoom(Number)The maximum zoom level (default: 18)
center(LatLng)The initial map location coordinates (default: new T.LatLng(46.0, 2.0))
crs(CRS)The CRS option for the map (default: new T.Crs({code: "EPSG:3857"}))
maxExtent(LatLngBounds)The bounds that will constrain the map movement
skipDefaultHandlers(Boolean)If true, will disable all map event listeners and handlers (default: false)
repeatX(Boolean)If true, will repeat the tiles when exceeding the world's bounds horizontally (default: true)
urlLocation(Boolean)If true, will append the center of the map (latitude, longitude) and the map zoom in the URL hash (default: true)
noHistory(Boolean)If true, will not insert URL hash changes in history when urlLocation option is active (default: true)
geolocate(Boolean)If true, will automatically geolocate the user by using the browser's built-in geolocation system (default: false)
controls(Object)
The controls to enable on the map. Available options are:
- attribution, if this option has a property addToMap: true (ex.: attribution: {addToMap: true}), AttributionControl will be added to the map
- scale, if this option has a property addToMap: true (ex.: scale: {addToMap: true}), ScaleControl will be added to the map

Events:

pressThe map was clicked/touched. Contains coordinates of the event point. Fired only if the target is the map itself.
long-pressThe map registered a long click/touch. Contains coordinates of the event point. Fired only if the target is the map itself.
map-pressThe map was clicked/touched. Contains coordinates of the event point. Is always fired when clicking within map container, no matter the target.
view-resetThe map was moved at a specified location and zoom level
move-startThe map will be moved by panning
moveThe map is being moved by panning
move-endPanning of the map has stopped
layer-addA new layer was added to the map
layer-removeA layer was removed from the map
layer-movedA layer's position (z-index) on the map was changed
zoom-interval-changeThe available maximum and minimum zoom levels were changed
zoom-changeThe map zoom levels were changed
geolocatedThe browser retrieved the user's geolocation

Parameter	Type	Description
container	HTMLDiv	The html div where the map will be rendered
options	Object	The options to set for the map's initial rendering

Example

$(document).ready(function () {

    var mapContainer = $("#map")[0],
        mapoLayer = new T.TibcoLayer();
    
    var map = new T.Map(
        mapContainer,
        {
            zoom: 3,
            center: new T.LatLng(46, 2),
            controls: {
                attribution: {
                    prefix: "<a href=''>©TIBCO</a>"
                }
            }
        }
    );

    map.addLayer(mapoLayer);

});

<html>    
    <head>
        <title>TibcoMaps - Simple map</title>
        <meta charset="UTF-8">

        <!-- CSS -->
        <link rel="stylesheet", href="map.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="map.js"></script>	
        
      
    </head>
    
    <body>
        <div class="custom-container">
            <div id="map"></div>
        </div>
    </body>
</html>

body, html { 
    height: 100%;
    width: 100%;
    margin: 0px;
}

.custom-container  {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;   
}

#map {			
    width: 100%;
    height: 100%;
}

destroy()

method

Destroys the map, including all events attached to this instance
Ex. map.destroy()

addHandler()

method

Adds a handler to the map
Ex. map.addHandler(new T.MouseHandler())

By default the map contains two handlers: MouseHandler and TouchHandler if touch is supported.

Parameter	Type	Description
handler	MouseHandler \| TouchHandler	The new handler to add to the map

addControl()

method

Adds a UI control to the map
Ex. map.addControl(new T.RulerControl({...}))

Parameter	Type	Description
control	AttributionControl \| LayersControl \| NavigationControl \| RulerControl \| ScaleControl	The new control to add to the map

Example

$(document).ready(function () {

    var mapContainer = $("#map")[0],
        mapoLayer = new T.TibcoLayer();
    
    var map = new T.Map(
        mapContainer,
        {
            zoom: 3,
            center: new T.LatLng(46, 2),
        }
    );
    
     //Add control
    var navigationControl = new T.NavigationControl({
        offset: [10, 10],
        //disableMapReset: true,
        panControl: true,
        zoomControl: true,
        zoomRailHeight: 120,
        titles: {
            panUp: "Pan up",
            panDown: "Pan down",
            panLeft: "Pan left",
            panRight: "Pan right",
            reset: "Reset map",
            zoomIn: "Zoom in",
            zoomOut: "Zoom out"
        }
    });

    map.addControl(navigationControl);

    map.addLayer(mapoLayer);
});

<html>    
    <head>
        <title>TibcoMaps - Simple map</title>
        <meta charset="UTF-8">

        <!-- CSS -->
        <link rel="stylesheet" href="add-control.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="add-control.js"></script>	
        
      
    </head>
    
    <body>
        <div class="custom-container">
            <div id="map"></div>
        </div>
    </body>
</html>

body, html { 
    height: 100%;
    width: 100%;
    margin: 0px;
}

.custom-container  {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;   
}

#map {			
    width: 100%;
    height: 100%;
}

resetView()

method

Resets the map to the specified center and zoom

Parameter	Type	Description
center	LatLng	The desired map center position.
zoom	Number	The desired map zoom level.
hard	Boolean	If true, will not use the back buffer.

Example

var theMap  = null;
$(document).ready(function(){

    var mapContainer = T.DomUtil.get("map"),
        mapoLayer = new T.TibcoLayer();

    theMap = new T.Map(
        mapContainer,					
        {
            zoom: 3, 
            center: new T.LatLng(46, 2),
            controls: {
                attribution: {
                    prefix: "<a href=''>©TIBCO</a>"
                }
            }						
        }
    );								

    theMap.addLayer(mapoLayer);

    $("#geolocate").click(function () {
        navigator.geolocation.getCurrentPosition(function (position) {
            theMap.center = new T.LatLng(position.coords.latitude, position.coords.longitude);
            theMap.zoom = 14;

            // Reset map with updated position
            theMap.resetView(theMap.center, theMap.zoom);
        });
    });
});

<!DOCTYPE html>
<html>    
    <head>
        <meta charset="UTF-8">

        <!-- CSS -->
        <link rel="stylesheet", href="reset-view.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="reset-view.js"></script>
    </head>

    <body>
        <div class="custom-container">
            <div id="map"></div>
            <button id="geolocate" title="Geolocate">Geolocate</button>
        </div>
    </body>
</html>

body, html { 
    height: 100%;
    width: 100%;
    margin: 0px;
}

#geolocate {
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;
}

.custom-container  {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;   
}

#map {			
    width: 100%;
    height: 100%;
}

addLayer()

method

Adds a layer to the map
Ex. map.addLayer(new T.MarkersLayer())

Parameter	Type	Description
layer	BaseLayer \| TileLayer \| VectorLayer \| MarkersLayer \| ImageLayer \| PopupsLayer \| WmsLayer	The new layer to add to the map

returns

Map - The map object

Example

$(document).ready(function () {

    var mapContainer = $("#map")[0],
        markersLayer = new T.MarkersLayer(),
        mapoLayer = new T.TibcoLayer();
    
    var map = new T.Map(
        mapContainer,
        {
            zoom: 3,
            center: new T.LatLng(46, 2),
            controls: {
                attribution: {
                    prefix: "<a href=''>©TIBCO</a>"
                }
            }
        }
    );
    
    markersLayer.addMarker(
        new T.HtmlMarker(
            new T.LatLng(45.472681,9.176968),
            "<div class='my-label'>Label 1</div>",
            {
                draggable: true,
                draggableUsingOffset: true,
                offset: new T.Point(0, 0)
            }
        )
    );
    

    map.addLayer(mapoLayer);
    map.addLayer(markersLayer);

});

<html>    
    <head>
        <title>TibcoMaps - Simple map</title>
        <meta charset="UTF-8">

        <!-- CSS -->
        <link rel="stylesheet", href="add-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="add-layer.js"></script>	
        
      
    </head>
    
    <body>
        <div class="custom-container">
            <div id="map"></div>
        </div>
    </body>
</html>

body, html { 
    height: 100%;
    width: 100%;
    margin: 0px;
}

.custom-container  {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;   
}

#map {			
    width: 100%;
    height: 100%;
}

.my-label {
    background: #FFF;
    border: 1px solid #000;
    width: 100px;
    height: 20px;
    text-align: center;
}

removeLayer()

method

Removes a layer from the map

Parameter	Type	Description
layer	BaseLayer \| TileLayer \| VectorLayer \| MarkersLayer \| ImageLayer \| PopupsLayer \| WmsLayer	The layer on the map to remove

returns

Map - The map object

setCenter()

method

Sets the map center to a given location

Parameter	Type	Description
center	LatLng	The coordinates of the new map center

setZoom()

method

Sets the map to a new zoom level

Parameter	Type	Description
zoom	Number	The value of the new zoom level

getCenter()

method

Returns the map's current center coordinates

returns

LatLng - The current center coordinates

latLngToPoint()

method

Converts map coordinates to a point representing the pixels on the map from the top left corner

Parameter	Type	Description
latLng	LatLng	The coordinates that will be converted

returns

Point - The point representing the converted coordinates

pointToLatLng()

method

Converts a point representing the pixels on the map from the top left corner to map coordinates

Parameter	Type	Description
The	Point	point that will be converted

returns

LatLng - latLng The coordinates converted from the given point

panBy()

method

Pans the map by the given offset value.
Ex. map.panBy(new T.Point(-100, 0)), pans the map to the right by 100 pixels

Parameter	Type	Description
offset	Point	The value by which to pan the map
skipRefresh	Boolean	If `true`, the `move-end` event is not fired

returns

Map - The map instance

zoomAround()

method

Sets the map location to new coordinates and zooms the map to a new zoom level

Parameter	Type	Description
latLng	LatLng	The coordinates of the new map location
zoom	Number	The value of the new zoom level
withAnim	Boolean	If `true`, animation effects will be used if possible to transit to the new location

fitToBounds()

method

Sets the map location and zoom level to the specified bounds

Parameter	Type	Description
bounds	LatLngBounds	The new bounds of the map.
tolerance	Number	The new bounds' tolerance (margin) in pixels.
hard	Boolean	If true, will not use the back buffer.

getBounds()

method

Returns the current bounds of the map

returns

LatLngBounds - The current bounds of the map

moveLayer()

method

Moves a layer to a new index (zIndex) in the stack of layers

Parameter	Type	Description
layer	BaseLayer \| TileLayer \| VectorLayer \| MarkersLayer \| ImageLayer \| PopupsLayer \| WmsLayer	The layer for which a new position will be set
newLayerIndex	Number	The new position of the layer

moveLayerUp()

method

Moves a layer up (increase its position) in the stack of layers

Parameter	Type	Description
layer	BaseLayer \| TileLayer \| VectorLayer \| MarkersLayer \| ImageLayer \| PopupsLayer \| WmsLayer	The layer for which a new position will be set

moveLayerDown()

method

Moves a layer down (decrease its position) in the stack of layers

Parameter	Type	Description
layer	BaseLayer \| TileLayer \| VectorLayer \| MarkersLayer \| ImageLayer \| PopupsLayer \| WmsLayer	The layer for which a new position will be set

copyrightVisibilityChange()

method

Sets the visibility mode for the copyright text

Parameter	Type	Description
expanded	Boolean	Shows the state of the copyright attribution (expanded/closed)