MapImage | JavaScript Maps v. 3

Inheritance: MapImage → MapObject

Extension for MapObject to define individual settings for each image. it overwrites the settings obtained from ImagesSettings. It supports svg (or path), png, jpg or gif files and has three predefined types available circle, rectangle and bubble, labels can be shown as well.

Example

var map = AmCharts.makeChart("mapdiv",{
  ...
  "dataProvider": {
    "map": "worldHigh",
    "images": [
      {
        "type": "circle",
        "label": "Circle Test",
        "top": 100,
        "left": 100
      }
    ]
  }
});

Properties Hide inherited Show inherited

Property	Type	Default	Description
accessibleLabel	String		Text which screen readers will read if user rolls-over the object or sets focus using tab key (this is possible only if tabIndex property of object settings or individual object is set to some number). Text is added as aria-label tag. Note - not all screen readers and browsers support this.
alpha	Number		Opacity of map object.
animateAlongLine	Boolean	false	If you set it to true, and lineId of some line is set, the image will animate along the line.
animateAngle	Boolean	true	Set this to `false` if you do not want the image change it's angle to align with the line's direction, it is animating on.
animationDuration	Number		Defines duration of animation (along line or when animateTo method is called, in seconds. Global animationDuration can also be set via ImagesSettings.
balloonText	String		Text which is displayed in a roll-over balloon. You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. To disable the balloons, set it to an empty string.
bottom	Number		Distance from bottom of a map container to the image. If centered property is false, then the distance is measured to the bottom of the image, otherwise - to the center. If you set this property, value of top property is ignored. This property can be set as a number (of pixels) or as a percent value, like: image.bottom = "10%";. The image will not be bounded to the map if this property is set. Use latitude and longitude properties if you want the image to move with the map.
bringForwardOnHover	Boolean		Specifies if the object should change it's z-index to the top-most when user hovers it.
centered	Boolean		Specifies if the image's center should be placed in the provided coordinates. If false, top-left corner will be at provided coordinates. This property doesn't work with images set as svgPath.
color	Color		Color of MapObject
customData	Object		A custom data holder.
description	String		Description of MapObject. Description is displayed in DescriptionWindow (when user clicks on an object). It can also be displayed in a roll-over balloon. DescriptionWindow can display HTML formatted code.
descriptionWindowBottom			Distance from the bottom side of map container to the description window. In case it is not set (also if descriptionWindowTop is not set), window will be placed near the mouse pointer.
descriptionWindowHeight	Number		Height of description window.
descriptionWindowLeft	Number		Distance from the left side of map container to the description window. In case it is not set (also if descriptionWindowRight is not set), window will be placed near the mouse pointer.
descriptionWindowRight			Distance from the right side of map container to the description window. In case it is not set (also if descriptionWindowLeft is not set), window will be placed near the mouse pointer.
descriptionWindowTop	Number		Distance from the top side of map container to the description window. In case it is not set (also if descriptionWindowBottom is not set), window will be placed near the mouse pointer.
descriptionWindowWidth	Number		Width of description window.
easingFunction			Function which defines how the image should animate. AmCharts.easeInOutQuad. You can use these methods: AmCharts.bounce, AmCharts.easeInSine, AmCharts.easeOutSine, AmCharts.easeOutElastic. Common for all easing function is set on ImagesSettings.
fixedSize	Boolean	true	Specifies if the object should change the size together with the map or keep fixed size. This applies for objects with lat and long properties set, as they move together with the map.
flipDirection	Boolean	false	Specifies if animation along lines should be played in reverse direction when reached the end of a line.
groupId	String		Id of a group. You can group MapObjects to groups. Grouped objects will change color together with this object when you roll-over it or click it. You can show/hide them using showGroup(groupId) and hideGroup(groupId) methods of AmMap class. You can also use map.zoomToGroup(groupId) methot to zoom-in the map so that all grouped objects are visible.
height	Number		Height of an image. Works with predefined images (if type is set) and loaded images (imageURL is set). If svgPath is set, use scale property to change it's size.
id	String		Unique id of the object. In case it's area, id should match svg path id from SVG file. Id can be used with linkToObject property of MapObject - you can link one object to another using it.
images	Array[MapImage]		Array of MapImage objects.
imageURL	String		Url of an image. Images can be svg, jpg, png or gif files. Note, you can't control color, outlineColor, outlineAlpha and outlineThickness of loaded images. Use svgPath property if you need to change these properties.
label	String		Text which will be shown next to the image.
labelBackgroundAlpha	Number		Opacity of label background alpha.
labelBackgroundColor	Color		Color of label background.
labelColor	Color		Label color.
labelFontSize	Number		Font size of a label.
labelPosition	String		Position of the label. Allowed values are: left, right, top, bottom and middle.
labelRollOverColor	Color		Label roll-over color.
labelShiftX	Number	0	In some cases you might want to adjust label position a bit. Use this property to shift label horizontally.
labelShiftY	Number	0	In some cases you might want to adjust label position a bit. Use this property to shift label vertically.
latitude	Number		Latitude of the image. of the image. Set this property if you want the image to be bounded to the map. Otherwise use left/right/top/bottom properties.
left	Number/String		Distance from left of a map container to the image. If centered property is false, then the distance is measured to the left of the image, otherwise - to the center. The image will not be bounded to the map if this property is set. Use latitude and longitude properties if you want the image to move with the map. This property can be set as a number (of pixels) or as a percent value, like: image.left = "10%";
lineId	String		You should add id for the line and set this id for the image if you want to use create animation along line or position image at some relative position of a line.
lines	Array[MapLine]		Array of MapLine objects.
linkToObject	MapObject		linkToObject can be a reference or id of some other MapObject - MapArea, MapImage or MapLine. It can also be a reference to another DataSet (but not an id). Then user clicks on this object the application would zoom-in to this objects' zoom position (if it is set) and then act as if the linkToObject was clicked. This can also be used for selecting the object you want to be selected right after the map is initialized, as DataSet extends MapObject class, you can specify linkToObject for your DataSet. When you link to another DataSet, you can build drill-down maps.
longitude	Number		Longitude of the image. Set this property if you want the image to be bounded to the map. Otherwise use left/right/top/bottom properties.
loop	Boolean	true	Specifies if animation along lines should be looped.
mouseEnabled	Boolean	true	Set this to false to make the object be irresponsive to any interactions like hover or click events.
objectType	Object		Read-only, type of the Object. Possible values are: "DataSet", "MapImage", "MapLine" and "MapArea".
outlineAlpha	Number		Opacity of image outline. This will affect only predefined images (with "type" property set) and images with svgPath set. This property won't affect bitmap images and loaded SVG images.
outlineColor	Color		Color of image outline. This will affect only predefined images (with "type" property set) and images with svgPath set. This property won't affect bitmap images and loaded SVG images.
outlineThickness	Number		Thickness of image outline. This will affect only predefined images (with "type" property set) and images with svgPath set. This property won't affect bitmap images and loaded SVG images.
passZoomValuesToTarget	Boolean	false	Specifies if current zoom values should be passed to target MapObject. Useful when building drill down maps.
percentHeight	Number		Height of an image, in percents of map container. Works with predefined images (if type is set) and loaded images (imageURL is set). If svgPath is set, use scale property to change it's size.
percentWidth	Number		Width of an image, in percents of map container. Works with predefined images (if type is set) and loaded images (imageURL is set). If svgPath is set, use scale property to change it's size.
positionOnLine	Number	0.5	If you set lineId of some line and then set positionOnLine to 0.5, the image will be placed in the middle of the line. Allowed values are from 0 to 1.
positionScale	Number	1	If you set it to 2, the image will scale 2x in the middle of the animation.
remainVisible	Boolean	true	Specifies if the MapObject and other objects of the same level should remain visible if it was clicked and it has children MapObjects.
right	Number		Distance from right of a map container to the image. If centered property is false, then the distance is measured to the right of the image, otherwise - to the center. If you set this property, value of left property is ignored. The image will not be bounded to the map if this property is set. This property can be set as a number (of pixels) or as a percent value, like: image.right= "10%"; Use latitude and longitude properties if you want the image to move with the map.
rollOverColor	Color		Roll over color of of the object.
rollOverScale	Number		Scale of the image when hovered. Use value like 1.5 - 2 to enlarge image when user rolls-over it.
scale	Number	1	Scale of the image. Works only with images created using svgPath. Use width/height properties for all other images.
selectable	Boolean	false	Specifies if the object can be selected even if it is not clickable. Map object is clickable if zoom properties are set or it has description or has children objects. Sometimes even non of the listed conditions is met you might need it to be clickable. You should set this property to true in this case.
selectedColor	Color		Color of an object when it is selected (somebody clicked on it).
selectedLabelColor	Color		Color of a label when image is selected.
selectedScale	Number		Scale of the image if it is selected. Use value like 1.5 - 2 to enlarge selected image.
showAsSelected	Boolean	false	Specifies if selectedColor should be applied to the object. AmMap can have only one selected item at a time, however there might be situations when multiple objects (areas, images, lines) have to look like they are selected. By setting this property to true, you will be able to produce this result.
showInList	Boolean		Specifies if this object must be displayed in ObjectsList Title should be defined in order the object to appear there.
svgPath	String		SVG path, for example: M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z The line above will create a target icon. For more icons we recommend visiting this page: http://raphaeljs.com/icons/ Simply click on an icon you like and you will get SVG path in the bottom. This is the recommended way to create icons/images in AmMap.
tabIndex	Number		In case you set it to some number, the map will set focus on this object when user clicks tab key. When a focus is set, screen readers like NVDA Screen reader will read label which is set using accessibleLabel property of object settings or individual object. If object is clickable, pressing Enter/Return while focus is set will select the object. Note, not all browsers and readers support this.
title	String		Title of a MapObject. It can be displayed in the roll-over balloon and in the header of description window. All areas in SVG maps distributed with amMap has country names (titles) hard coded in the SVG file.
top	Number		Distance from top of a map container to the image. If centered property is false, then the distance is measured to the top bound of the image, otherwise - to the center. The image will not be bounded to the map if this property is set. This property can be set as a number (of pixels) or as a percent value, like: image.top = "10%"; Use latitude and longitude properties if you want the image to move with the map.
type	String		Type of a predefined image. Allowed values are: circle, rectangle, bubble and hexagon.
url	String		Url of an object. The application will go to this url when you click on the object.
urlTarget	String	_self	Target of an URL, if URL is a string, for example: "_blank", "_top".
useTargetsZoomValues	Boolean	false	If set to `true` the map will carry over the same zoom values when transitioning to new data provider. Useful when building drill down maps.
width	Number		Width of an image. Works with predefined images (if type is set) and loaded images (imageURL is set). If svgPath is set, use scale property to change it's size.
widthAndHeightUnits	String	pixels	You can set miles or kilometers as a unit of width/height of an image. This works only with predefined images (type is set).
zoomLatitude	Number		Specifies latitude to which map should be moved when this object is clicked
zoomLevel	Number		Specifies map scale to which map should be rescaled when this object is clicked.
zoomLongitude	Number		Specifies longitude to which map should be moved when this object is clicked.
zoomX	Number		Specifies X position (in percents of stage width) to which map should be moved when this object is clicked. You can also use zoomLat and zoomLong instead of zoomX and zoomY.
zoomY	Number		Specifies Y position (in percents of stage height) to which map should be moved when this object is clicked. You can also use zoomLat and zoomLong instead of zoomX and zoomY.

Methods Hide inherited Show inherited

Name	Parameters	Description
animateAlong(lineId, duration, easingFunction)	lineId, duration, easingFunction	Triggers animation along a line. Duration and easingFunction attributes are optional.
animateTo(longitude, latitude, duration, easingFunction)	longitude, latitude, duration, easingFunction	You can animate images to any coordinates (instead of longitude/latitude you can use top/left/right/bottom coordinates).
deleteObject()		Deletes the image.
fixToMap()		Fixes the image to the map instead of the stage. To do this, left/top/right/bottom coordinates are changed to latitude/longitude.
fixToStage()		Fixes the image to the stage instead of the map. To do latitude and longitude are changed to top/left coordinates.
updatePosition()		Updates position of an image.
validate()		Redraws the image.

Events Hide inherited Show inherited

Name	Event object	Description
animationEnd	{type: "animationEnd", chart: AmMap, image: MapImage, lineSegment: Number, direction: Number}	Dispatched when animation ends.
animationStart	{type: "animationStart", chart: AmMap, image: MapImage, lineSegment: Number, direction: Number}	Dispatched when animation starts.

MapImage Properties Methods Events

Example

Properties Hide inherited Show inherited

Methods Hide inherited Show inherited

Events Hide inherited Show inherited