# Vexcel Map Control API - Complete Documentation (Version 2.0.2) This file contains the complete Vexcel Map Control API documentation, including all tutorials, class references, and examples. ## Table of Contents 1. [ArcGISLayer](#section-1) 2. [Bar](#section-2) 3. [BaseGroupLayer](#section-3) 4. [BaseLayer](#section-4) 5. [BaseVectorLayer](#section-5) 6. [BingLayer](#section-6) 7. [Button](#section-7) 8. [Circle](#section-8) 9. [CircleTool](#section-9) 10. [Collection](#section-10) 11. [CollectionManager](#section-11) 12. [CollectionStatus](#section-12) 13. [Extent](#section-13) 14. [Feature](#section-14) 15. [Fill](#section-15) 16. [GeoJSON](#section-16) 17. [GroupLayer](#section-17) 18. [HeightTool](#section-18) 19. [Icon](#section-19) 20. [Image](#section-20) 21. [ImageryLayer](#section-21) 22. [InfoBox](#section-22) 23. [LayerCollections](#section-23) 24. [LayerCollectionsStatus](#section-24) 25. [LayerEvents](#section-25) 26. [Line](#section-26) 27. [LineTool](#section-27) 28. [Location](#section-28) 29. [Login](#section-29) 30. [Map](#section-30) 31. [MapStatus](#section-31) 32. [MapStatusView](#section-32) 33. [Measure](#section-33) 34. [MeasurementManager](#section-34) 36. [MultiPolygon](#section-36) 37. [OSMLayer](#section-37) 38. [OverlayManager](#section-38) 39. [Point](#section-39) 40. [PointTool](#section-40) 41. [Polygon](#section-41) 42. [PolygonTool](#section-42) 43. [RectangleTool](#section-43) 44. [RegularShape](#section-44) 45. [RelativeHeightTool](#section-45) 47. [Stroke](#section-47) 48. [Style](#section-48) 49. [Swipe](#section-49) 50. [Text](#section-50) 51. [Toggle](#section-51) 52. [Transform](#section-52) 53. [UserService](#section-53) 54. [VectorLayer](#section-54) 55. [VectorTileLayer](#section-55) 56. [WFSLayer](#section-56) 57. [WKT](#section-57) 58. [WMSLayer](#section-58) 59. [WMTSLayer](#section-59) 60. [XYZLayer](#section-60) 61. [Index](#section-61) 62. [Module Constants](#section-62) 63. [Tutorial control bar](#section-63) 64. [Tutorial control basics](#section-64) 65. [Tutorial control brightness contrast](#section-65) 66. [Tutorial control button](#section-66) 67. [Tutorial control layers](#section-67) 68. [Tutorial control modes](#section-68) 69. [Tutorial control orientation](#section-69) 70. [Tutorial control swipe](#section-70) 71. [Tutorial control toggle](#section-71) 72. [Tutorial control vexcel collections find](#section-72) 73. [Tutorial control vexcel image metadata](#section-73) 74. [Tutorial control vexcel infrared](#section-74) 75. [Tutorial control vexcel integration](#section-75) 76. [Tutorial control vexcel layer](#section-76) 77. [Tutorial control vexcel show collection](#section-77) 78. [Tutorial control zoom](#section-78) 79. [Tutorial control](#section-79) 80. [Tutorial geometries features click](#section-80) 81. [Tutorial geometries features hover](#section-81) 82. [Tutorial geometries features styles](#section-82) 83. [Tutorial geometries geojson reader](#section-83) 84. [Tutorial geometries line](#section-84) 85. [Tutorial geometries multipolygon](#section-85) 86. [Tutorial geometries point shapes styles](#section-86) 87. [Tutorial geometries point styles](#section-87) 88. [Tutorial geometries point](#section-88) 89. [Tutorial geometries polygon styles](#section-89) 90. [Tutorial geometries polygon](#section-90) 91. [Tutorial geometries text styles](#section-91) 92. [Tutorial geometries wkt reader](#section-92) 93. [Tutorial geometries](#section-93) 94. [Tutorial infobox click](#section-94) 95. [Tutorial infobox feature](#section-95) 96. [Tutorial infobox fixed](#section-96) 97. [Tutorial infobox ](#section-97) 98. [Tutorial layers arcgis](#section-98) 99. [Tutorial layers bing](#section-99) 100. [Tutorial layers group](#section-100) 101. [Tutorial layers vector tiles](#section-101) 102. [Tutorial layers vector](#section-102) 103. [Tutorial layers wfs](#section-103) 104. [Tutorial layers wms](#section-104) 105. [Tutorial layers wmts](#section-105) 106. [Tutorial layers xyz](#section-106) 107. [Tutorial layers](#section-107) 108. [Tutorial measures 3d geometries](#section-108) 109. [Tutorial measures change units](#section-109) 110. [Tutorial measures edit geometries](#section-110) 111. [Tutorial measures geometries](#section-111) 112. [Tutorial measures simple tooltip](#section-112) 113. [Tutorial measures tooltips](#section-113) 114. [Tutorial measures](#section-114) 115. [Tutorial start 3d mode](#section-115) 116. [Tutorial start basic](#section-116) 117. [Tutorial start constrained zoom](#section-117) 118. [Tutorial start image 3d mode](#section-118) 119. [Tutorial start multiple maps](#section-119) 120. [Tutorial start no layers](#section-120) 121. [Tutorial start restricted extent](#section-121) 122. [Tutorial start token](#section-122) 123. [Tutorial start](#section-123) 124. [Tutorial styles](#section-124) 125. [Tutorial third party bing](#section-125) 126. [Tutorial third party cesium](#section-126) 127. [Tutorial third party google sbs](#section-127) 128. [Tutorial third party google](#section-128) 129. [Tutorial third party leaflet](#section-129) 130. [Tutorial third party](#section-130) 131. [Tutorial utils transform](#section-131) 132. [Tutorial utils](#section-132) 133. [Tutorial vector](#section-133) 134. [Tutorial walk basic map](#section-134) 135. [Tutorial walk](#section-135) ================================================================================ ## 1. ArcGISLayer Class # ArcGISLayer ## ArcGISLayer(url, opts) Layer definition for ARCGIS feature service. See more in our ArcGIS Feature tutorial. #### # new ArcGISLayer(url, opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | url | string | | | ARCGIS service URL. | | opts | object | | | ArcGIS Rest feature layer options. | | name | string | | | Layer name | | order | number | | | The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. | | visible | boolean | | true | Visibility | | opacity | number | | 1 | Opacity (0, 1). | | attributions | string | | | Attributions. | | obliqueProjection | ObliqueProjections | | none | Set how the vector layer will reproject in oblique mode. If none it´s set, the vector layer will not reproject in oblique mode.'dtm' the layer will reproject the points on the dtm surface.'dsm' the layer will reprojects the points on the dsm surface, if there´s no DSM available DTM will be used instead. | url ARCGIS service URL. opts ArcGIS Rest feature layer options. name Layer name order The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. visible Visibility opacity Opacity (0, 1). attributions Attributions. obliqueProjection Set how the vector layer will reproject in oblique mode. If none it´s set, the vector layer will not reproject in oblique mode.'dtm' the layer will reproject the points on the dtm surface.'dsm' the layer will reprojects the points on the dsm surface, if there´s no DSM available DTM will be used instead. **Tutorials:** : ArcGIS Feature - ArcGIS Feature - LayerEvents#event:VISIBILITY_CHANGE Create empty layer const options = { url :"https://www.sample-url.com/tiles/{x}/{y}/{z}" }; const layer = new Vexcel.Layers.ARCGISLayer(options); const options = { url :"https://www.sample-url.com/tiles/{x}/{y}/{z}" }; const layer = new Vexcel.Layers.ARCGISLayer(options); ### Extends - BaseVectorLayer ### Classes **ArcGISLayer** # Methods #### # getAttributions() -> {string} Gets the attributions of the layer. Attributions of the layer. #### # getBoundingBox() -> {Extent} Gets the bounding box of features in the layer **Overrides:** : BaseVectorLayer#getBoundingBox - BaseVectorLayer#getBoundingBox bounding box #### # getMaxZoom() -> {number} Gets the maximum zoom level of the layer. **Overrides:** : BaseVectorLayer#getMaxZoom - BaseVectorLayer#getMaxZoom The maximum zoom level of the layer. #### # getMinZoom() -> {number} Gets the minimum zoom level of the layer. **Overrides:** : BaseVectorLayer#getMinZoom - BaseVectorLayer#getMinZoom The minimum zoom level of the layer. #### # getObliqueProjection() -> {string} Gets the oblique projection of the layer. **Overrides:** : BaseVectorLayer#getObliqueProjection - BaseVectorLayer#getObliqueProjection The oblique projection of the layer. #### # getOpacity() -> {number} Gets the opacity of the layer (between 0 and 1). **Overrides:** : BaseVectorLayer#getOpacity - BaseVectorLayer#getOpacity The opacity of the layer. #### # getVisible() -> {boolean} Gets the visibility of the layer (true or false). true false **Overrides:** : BaseVectorLayer#getVisible - BaseVectorLayer#getVisible The visibility of the layer. #### # setAttributions(attributions) Sets the attributions of the layer. | Name | Type | Description | | --- | --- | --- | | attributions | string | Attributions. Can be passed as string. | attributions Attributions. Can be passed as string. #### # setMaxZoom(maxZoom) Sets the maximum zoom (exclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | maxZoom | number | The maximum zoom of the layer. | maxZoom The maximum zoom of the layer. **Overrides:** : BaseVectorLayer#setMaxZoom - BaseVectorLayer#setMaxZoom #### # setMinZoom(minZoom) Sets the minimum zoom (inclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | minZoom | number | The minimum zoom of the layer. | minZoom The minimum zoom of the layer. **Overrides:** : BaseVectorLayer#setMinZoom - BaseVectorLayer#setMinZoom #### # setObliqueProjection(obliqueProjection) Sets the oblique projection of the layer. Note: - 'none' it´s set, the vector layer will not reprojects on oblique mode. - 'dtm' the layer will reprojects the points on the dtm surface - 'dsm' the layer will reprojects the points on the dsm surface, if there´s no DSM available DTM will be used instead. | Name | Type | Description | | --- | --- | --- | | obliqueProjection | ObliqueProjections | The oblique projection of the layer. | obliqueProjection The oblique projection of the layer. **Overrides:** : BaseVectorLayer#setObliqueProjection - BaseVectorLayer#setObliqueProjection **See:** : ObliqueProjections - ObliqueProjections #### # setOpacity(opacity) Sets the opacity of the layer, allowed values range from 0 to 1. | Name | Type | Description | | --- | --- | --- | | opacity | number | The opacity of the layer. | opacity The opacity of the layer. **Overrides:** : BaseVectorLayer#setOpacity - BaseVectorLayer#setOpacity #### # setVisible(visible) Sets the visibility of the layer (true or false). true false | Name | Type | Description | | --- | --- | --- | | visible | boolean | The visibility of the layer. | visible The visibility of the layer. **Overrides:** : BaseVectorLayer#setVisible - BaseVectorLayer#setVisible ================================================================================ ## 2. Bar Class # Bar ## Bar(opts) The control bar is a container for other controls. It can be used to create custom toolbars. Control bars can be nested and combined with other controls to handle activate/deactivate. #### # new Bar(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Button options. | | className | string | | | class of the control | | group | boolean | | false | is a part of a group, default false | | toggleOne | boolean | | | only one toggle control is active at a time, default false | | autoDeactivate | boolean | | | used with subbar to deactivate all control when top level control deactivate, default false | | position | string | | | a combination of top|left|bottom|right | | controls | Array. | | | a list of control to add to the bar | opts Button options. className class of the control group is a part of a group, default false toggleOne only one toggle control is active at a time, default false autoDeactivate used with subbar to deactivate all control when top level control deactivate, default false position a combination of top|left|bottom|right controls a list of control to add to the bar **Tutorials:** : Map Bar Control - Map Bar Control ### Classes **Bar** # Methods #### # addControl(control) Add a control to the bar | Name | Type | Description | | --- | --- | --- | | control | object | control to add | control control to add #### # setPosition(position) Set position for the bar. | Name | Type | Description | | --- | --- | --- | | position | string | a combination of top | left | bottom | right, e.g. "top", "bottom-right" or "top-left" | position a combination of top | left | bottom | right, e.g. "top", "bottom-right" or "top-left" ================================================================================ ## 3. BaseGroupLayer Class # BaseGroupLayer ## BaseGroupLayer Abstract base group layer - LayerEvents#event:VISIBILITY_CHANGE ### Extends - BaseLayer ### Classes **BaseGroupLayer** # Methods #### # getMaxZoom() -> {number} Gets the maximum zoom level of the layer. **Overrides:** : BaseLayer#getMaxZoom - BaseLayer#getMaxZoom The maximum zoom level of the layer. #### # getMinZoom() -> {number} Gets the minimum zoom level of the layer. **Overrides:** : BaseLayer#getMinZoom - BaseLayer#getMinZoom The minimum zoom level of the layer. #### # getOpacity() -> {number} Gets the opacity of the layer (between 0 and 1). **Overrides:** : BaseLayer#getOpacity - BaseLayer#getOpacity The opacity of the layer. #### # getVisible() -> {boolean} Gets the visibility of the layer (true or false). true false **Overrides:** : BaseLayer#getVisible - BaseLayer#getVisible The visibility of the layer. #### # setMaxZoom(maxZoom) Sets the maximum zoom (exclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | maxZoom | number | The maximum zoom of the layer. | maxZoom The maximum zoom of the layer. **Overrides:** : BaseLayer#setMaxZoom - BaseLayer#setMaxZoom #### # setMinZoom(minZoom) Sets the minimum zoom (inclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | minZoom | number | The minimum zoom of the layer. | minZoom The minimum zoom of the layer. **Overrides:** : BaseLayer#setMinZoom - BaseLayer#setMinZoom #### # setOpacity(opacity) Sets the opacity of the layer, allowed values range from 0 to 1. | Name | Type | Description | | --- | --- | --- | | opacity | number | The opacity of the layer. | opacity The opacity of the layer. **Overrides:** : BaseLayer#setOpacity - BaseLayer#setOpacity #### # setVisible(visible) Sets the visibility of the layer (true or false). true false | Name | Type | Description | | --- | --- | --- | | visible | boolean | The visibility of the layer. | visible The visibility of the layer. **Overrides:** : BaseLayer#setVisible - BaseLayer#setVisible ================================================================================ ## 4. BaseLayer Class # BaseLayer ## BaseLayer Abstract base layer - LayerEvents#event:VISIBILITY_CHANGE ### Classes **BaseLayer** # Methods #### # getMaxZoom() -> {number} Gets the maximum zoom level of the layer. The maximum zoom level of the layer. #### # getMinZoom() -> {number} Gets the minimum zoom level of the layer. The minimum zoom level of the layer. #### # getOpacity() -> {number} Gets the opacity of the layer (between 0 and 1). The opacity of the layer. #### # getVisible() -> {boolean} Gets the visibility of the layer (true or false). true false The visibility of the layer. #### # setMaxZoom(maxZoom) Sets the maximum zoom (exclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | maxZoom | number | The maximum zoom of the layer. | maxZoom The maximum zoom of the layer. #### # setMinZoom(minZoom) Sets the minimum zoom (inclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | minZoom | number | The minimum zoom of the layer. | minZoom The minimum zoom of the layer. #### # setOpacity(opacity) Sets the opacity of the layer, allowed values range from 0 to 1. | Name | Type | Description | | --- | --- | --- | | opacity | number | The opacity of the layer. | opacity The opacity of the layer. #### # setVisible(visible) Sets the visibility of the layer (true or false). true false | Name | Type | Description | | --- | --- | --- | | visible | boolean | The visibility of the layer. | visible The visibility of the layer. ================================================================================ ## 5. BaseVectorLayer Class # BaseVectorLayer ## BaseVectorLayer Abstract base vector layer - LayerEvents#event:VISIBILITY_CHANGE ### Extends - BaseLayer ### Classes **BaseVectorLayer** # Methods #### # getBoundingBox() -> {Extent} Gets the bounding box of features in the layer bounding box #### # getMaxZoom() -> {number} Gets the maximum zoom level of the layer. **Overrides:** : BaseLayer#getMaxZoom - BaseLayer#getMaxZoom The maximum zoom level of the layer. #### # getMinZoom() -> {number} Gets the minimum zoom level of the layer. **Overrides:** : BaseLayer#getMinZoom - BaseLayer#getMinZoom The minimum zoom level of the layer. #### # getObliqueProjection() -> {string} Gets the oblique projection of the layer. The oblique projection of the layer. #### # getOpacity() -> {number} Gets the opacity of the layer (between 0 and 1). **Overrides:** : BaseLayer#getOpacity - BaseLayer#getOpacity The opacity of the layer. #### # getVisible() -> {boolean} Gets the visibility of the layer (true or false). true false **Overrides:** : BaseLayer#getVisible - BaseLayer#getVisible The visibility of the layer. #### # setMaxZoom(maxZoom) Sets the maximum zoom (exclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | maxZoom | number | The maximum zoom of the layer. | maxZoom The maximum zoom of the layer. **Overrides:** : BaseLayer#setMaxZoom - BaseLayer#setMaxZoom #### # setMinZoom(minZoom) Sets the minimum zoom (inclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | minZoom | number | The minimum zoom of the layer. | minZoom The minimum zoom of the layer. **Overrides:** : BaseLayer#setMinZoom - BaseLayer#setMinZoom #### # setObliqueProjection(obliqueProjection) Sets the oblique projection of the layer. Note: - 'none' it´s set, the vector layer will not reprojects on oblique mode. - 'dtm' the layer will reprojects the points on the dtm surface - 'dsm' the layer will reprojects the points on the dsm surface, if there´s no DSM available DTM will be used instead. | Name | Type | Description | | --- | --- | --- | | obliqueProjection | ObliqueProjections | The oblique projection of the layer. | obliqueProjection The oblique projection of the layer. **See:** : ObliqueProjections - ObliqueProjections #### # setOpacity(opacity) Sets the opacity of the layer, allowed values range from 0 to 1. | Name | Type | Description | | --- | --- | --- | | opacity | number | The opacity of the layer. | opacity The opacity of the layer. **Overrides:** : BaseLayer#setOpacity - BaseLayer#setOpacity #### # setVisible(visible) Sets the visibility of the layer (true or false). true false | Name | Type | Description | | --- | --- | --- | | visible | boolean | The visibility of the layer. | visible The visibility of the layer. **Overrides:** : BaseLayer#setVisible - BaseLayer#setVisible ================================================================================ ## 6. BingLayer Class # BingLayer ## BingLayer(opts) Layer for the Bing Maps tile server. Learn more in our layers-bing tutorial. #### # new BingLayer(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | OSM layer options. | | key | string | | | Bing Maps API key. Get yours at https://www.bingmapsportal.com/. | | imagerySet | string | | | Type of imagery. | | name | string | | | Layer name | | order | number | | | The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. | | visible | boolean | | false | Visibility | | opacity | number | | 1 | Opacity (0, 1). | opts OSM layer options. key Bing Maps API key. Get yours at https://www.bingmapsportal.com/. imagerySet Type of imagery. name Layer name order The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. visible Visibility opacity Opacity (0, 1). **Tutorials:** : layers-bing - layers-bing - LayerEvents#event:VISIBILITY_CHANGE Create empty layer const options = { key :"test_key" }; const layer = new Vexcel.Layers.BingLayer(options); const options = { key :"test_key" }; const layer = new Vexcel.Layers.BingLayer(options); ### Extends - BaseLayer ### Classes **BingLayer** # Methods #### # getMaxZoom() -> {number} Gets the maximum zoom level of the layer. **Overrides:** : BaseLayer#getMaxZoom - BaseLayer#getMaxZoom The maximum zoom level of the layer. #### # getMinZoom() -> {number} Gets the minimum zoom level of the layer. **Overrides:** : BaseLayer#getMinZoom - BaseLayer#getMinZoom The minimum zoom level of the layer. #### # getOpacity() -> {number} Gets the opacity of the layer (between 0 and 1). **Overrides:** : BaseLayer#getOpacity - BaseLayer#getOpacity The opacity of the layer. #### # getVisible() -> {boolean} Gets the visibility of the layer (true or false). true false **Overrides:** : BaseLayer#getVisible - BaseLayer#getVisible The visibility of the layer. #### # setMaxZoom(maxZoom) Sets the maximum zoom (exclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | maxZoom | number | The maximum zoom of the layer. | maxZoom The maximum zoom of the layer. **Overrides:** : BaseLayer#setMaxZoom - BaseLayer#setMaxZoom #### # setMinZoom(minZoom) Sets the minimum zoom (inclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | minZoom | number | The minimum zoom of the layer. | minZoom The minimum zoom of the layer. **Overrides:** : BaseLayer#setMinZoom - BaseLayer#setMinZoom #### # setOpacity(opacity) Sets the opacity of the layer, allowed values range from 0 to 1. | Name | Type | Description | | --- | --- | --- | | opacity | number | The opacity of the layer. | opacity The opacity of the layer. **Overrides:** : BaseLayer#setOpacity - BaseLayer#setOpacity #### # setVisible(visible) Sets the visibility of the layer (true or false). true false | Name | Type | Description | | --- | --- | --- | | visible | boolean | The visibility of the layer. | visible The visibility of the layer. **Overrides:** : BaseLayer#setVisible - BaseLayer#setVisible ================================================================================ ## 7. Button Class # Button ## Button(opts) A simple push button control. This control can be used in countless ways, including running custom logic with the click of a button. #### # new Button(opts) Initialization object | Name | Type | Attributes | Description | | --- | --- | --- | --- | | opts | object | | Button options. | | className | string | | class of the control | | title | number | | title of the control | | name | boolean | | name of the control (optional), default none | | html | number | | html to insert in the control | | handleClick | function | | callback when control is clicked | opts Button options. className class of the control title title of the control name name of the control (optional), default none html html to insert in the control handleClick callback when control is clicked **Tutorials:** : Map Button - Map Button ### Classes **Button** ================================================================================ ## 8. Circle Class # Circle ## Circle(opts) Set circle style for vector features. Learn how to implement a Circle in our Point styles tutorial. #### # new Circle(opts) Initialization object | Name | Type | Attributes | Description | | --- | --- | --- | --- | | opts | object | | Options | | fill | Fill | | Fill style. | | stroke | Stroke | | Stroke style | | radius | number | | Circle radius. | | opacity | number | | Opacity. | | rotateWithView | boolean | | Whether to rotate the shape with the view (meaningful only when used in conjunction with a two dimensional scale). | | rotation | number | | Rotation in radians (positive rotation clockwise, meaningful only when used in conjunction with a two dimensional scale). | | scale | number | | Scale. A two dimensional scale will produce an ellipse. Unless two dimensional scaling is required a better result may be obtained with an appropriate setting for radius | | displacement | number | | Displacement. | opts Options fill Fill style. stroke Stroke style radius Circle radius. opacity Opacity. rotateWithView Whether to rotate the shape with the view (meaningful only when used in conjunction with a two dimensional scale). rotation Rotation in radians (positive rotation clockwise, meaningful only when used in conjunction with a two dimensional scale). scale Scale. A two dimensional scale will produce an ellipse. Unless two dimensional scaling is required a better result may be obtained with an appropriate setting for radius displacement Displacement. **Tutorials:** : Point styles - Point styles ### Classes **Circle** # Methods #### # getAnchor() -> {Array.} Get the anchor point in pixels. The anchor determines the center point for the symbolizer. Anchor. #### # getDisplacement() -> {Array.} Get the displacement of the shape Shape's center displacement #### # getFill() -> {Fill} Get the fill style. #### # getOpacity() -> {number} Get the symbolizer opacity. Opacity. #### # getRadius() -> {number} Get the (primary) radius for the shape. Radius. #### # getRotateWithView() -> {boolean} Determine whether the symbolizer rotates with the map. Rotate with map. #### # getRotation() -> {number} Get the symoblizer rotation. Rotation. #### # getScale() -> {number} Get the symbolizer scale. Scale. #### # getStroke() -> {Stroke} Get the stroke style #### # setFill(fill) Set the fill style. | Name | Type | Description | | --- | --- | --- | | fill | Fill | | fill #### # setOpacity(opacity) Set the opacity. | Name | Type | Description | | --- | --- | --- | | opacity | number | Opacity. | opacity Opacity. #### # setRotateWithView(rotateWithView) Set whether to rotate the style with the view. | Name | Type | Description | | --- | --- | --- | | rotateWithView | boolean | Rotate with map. | rotateWithView Rotate with map. #### # setRotation(rotation) Set the rotation. | Name | Type | Description | | --- | --- | --- | | rotation | number | Rotation. | rotation Rotation. #### # setScale(scale) Set the scale. | Name | Type | Description | | --- | --- | --- | | scale | number | Scale. | scale Scale. #### # setStroke(stroke) Set the stroke style | Name | Type | Description | | --- | --- | --- | | stroke | Stroke | | stroke ================================================================================ ## 9. CircleTool Class # CircleTool ## CircleTool Measurement tool to draw Circles. - Learn more about our Circle Tool in our 2D mode and 3D mode tutorials. ### Classes **CircleTool** # Methods #### # activate() This method activate the tool and you can start to draw a circle #### # cancel() This method cancel the current measure #### # changeAreaUnits(unit) Sets the area units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | AreaUnits | Imperial or metric value from AreaUnits | unit Imperial or metric value from AreaUnits **See:** : AreaUnits - AreaUnits #### # changeLengthUnits(unit) Sets the length units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | LengthUnits | Imperial or metric value from LengthUnits | unit Imperial or metric value from LengthUnits **See:** : LengthUnits - LengthUnits #### # changeSlopeUnits(unit) Sets the slope units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | SlopeUnits | Imperial or metric value from SlopeUnits | unit Imperial or metric value from SlopeUnits **See:** : SlopeUnits - SlopeUnits #### # changeTooltipsVisibility(visible) Change visibility for measurement tooltips | Name | Type | Description | | --- | --- | --- | | visible | boolean | boolean | visible boolean #### # clear() This method clears all measurements of this tool. #### # deactivate() This method deactivate the tool #### # disableEdit() This method disable de edit mode for this tool #### # enableEdit() This method enable de edit mode for this tool ================================================================================ ## 10. Collection Class # Collection ## Collection Represents a collection of geospatial imagery metadata. This class provides structured access to information about an image collection, including capture details, resolution, product type, and geometry. It supports both standard and GraySky collections. ### Classes **Collection** # Members #### # firstCaptureDate First capture date. #### # geometry Geometry. #### # graySkyEvent Graysky event. Only if layer collections is graysky #### # graySkyEventPrettyName Graysky event pretty name. Only if layer collections is graysky #### # imageryLayer Imagery layer name. Should be a value from VexcelLayers #### # lastCaptureDate Last capture date. #### # maxGsd Max gsd. #### # minGsd Min gsd. #### # name name. #### # oblique Indicates if 3D oblique imagery is available. #### # prettyName Pretty name. #### # productType Product type. ================================================================================ ## 11. CollectionManager Class # CollectionManager ## CollectionManager The Collection Manager class provides interaction with the collections loaded by the map depending on your privileges. ### Classes **CollectionManager** # Methods #### # findCollectionsByExtent(extent, epsg) -> {Array.} Filters collections based on an extent. | Name | Type | Description | | --- | --- | --- | | extent | Extent | array with 4 coordinates[] | | epsg | string | Optional parameter to specify the coordinates system of extent (ie. 'EPSG:4326'). | extent array with 4 coordinates[] epsg Optional parameter to specify the coordinates system of extent (ie. 'EPSG:4326'). - Filtered collections. #### # findCollectionsByImageryLayers(imageryLayers) -> {Array.} Filters collections based on the specified layers. | Name | Type | Description | | --- | --- | --- | | imageryLayers | Array. | Imagery layers to filter collections. Only collections matching these programs will be included. | imageryLayers Imagery layers to filter collections. Only collections matching these programs will be included. - Filtered collections. #### # findCollectionsByLocation(location, epsg) -> {Array.} Filters collections based on a location. | Name | Type | Description | | --- | --- | --- | | location | Location | object with geographic coordinates [Lat,Lng] | | epsg | string | Optional parameter to specify the coordinates system of extent (ie. 'EPSG:4326'). | location object with geographic coordinates [Lat,Lng] epsg Optional parameter to specify the coordinates system of extent (ie. 'EPSG:4326'). - Filtered collections. ================================================================================ ## 12. CollectionStatus Class # CollectionStatus ## CollectionStatus Represents the status of a geospatial imagery collection, extending the base Collection class with additional metadata related to image orientations and relevant view information (such as center, zoom, and extent). This class provides structured access to collection information, including resolution, capture details, and orientation options. It supports both standard and GraySky collections. Collection ### Extends - Collection ### Classes **CollectionStatus** # Members #### # firstCaptureDate First capture date. **Overrides:** : Collection#firstCaptureDate - Collection#firstCaptureDate #### # geometry Geometry. **Overrides:** : Collection#geometry - Collection#geometry #### # graySkyEvent Graysky event. Only if layer collections is graysky **Overrides:** : Collection#graySkyEvent - Collection#graySkyEvent #### # graySkyEventPrettyName Graysky event pretty name. Only if layer collections is graysky **Overrides:** : Collection#graySkyEventPrettyName - Collection#graySkyEventPrettyName #### # imageryLayer Imagery layer name. Should be a value from VexcelLayers **Overrides:** : Collection#imageryLayer - Collection#imageryLayer #### # lastCaptureDate Last capture date. **Overrides:** : Collection#lastCaptureDate - Collection#lastCaptureDate #### # maxGsd Max gsd. **Overrides:** : Collection#maxGsd - Collection#maxGsd #### # minGsd Min gsd. **Overrides:** : Collection#minGsd - Collection#minGsd #### # name name. **Overrides:** : Collection#name - Collection#name #### # oblique Indicates if 3D oblique imagery is available. **Overrides:** : Collection#oblique - Collection#oblique #### # orientations Available orientations. #### # prettyName Pretty name. **Overrides:** : Collection#prettyName - Collection#prettyName #### # productType Product type. **Overrides:** : Collection#productType - Collection#productType #### # viewInfo Relevant info for center, zoom and extent ================================================================================ ## 13. Extent Class # Extent ## Extent(coords) This class involves a set of coordinates that are used to represent a rectangular area on the map. These coordinates create an extent, or a bounding box, which are often used for setting the map view. They are also very useful for doing calculations. #### # new Extent(coords) | Name | Type | Description | | --- | --- | --- | | coords | Array. | The latitude of the location. | coords The latitude of the location. Create simple extent object const extent = new Vexcel.Geometry.Extent([20,10,-20,-10]); const extent = new Vexcel.Geometry.Extent([20,10,-20,-10]); ### Classes **Extent** # Methods #### # buffer(value) -> {Extent} Return extent buffered by the provided value. | Name | Type | Description | | --- | --- | --- | | value | number | The amount by which the extent should be buffered. | value The amount by which the extent should be buffered. #### # clone() -> {Extent} Make a complete copy of the Extent. Clone #### # containsExtent(extent) -> {boolean} Check if one extent contains another. An extent is deemed contained if it lies completely within the other extent, including if they share one or more edges. | Name | Type | Description | | --- | --- | --- | | extent | Extent | | extent #### # containsLocation(location) -> {boolean} Check if the passed location is contained or on the edge of the extent | Name | Type | Description | | --- | --- | --- | | location | Location | | location #### # getCenter() -> {Location} Get the center Location of an extent #### # intersection(extent) -> {Extent} Get the intersection with other extent. | Name | Type | Description | | --- | --- | --- | | extent | Extent | | extent #### # intersects(extent) -> {boolean} Determine if one extent intersects another. | Name | Type | Description | | --- | --- | --- | | extent | Extent | | extent ================================================================================ ## 14. Feature Class # Feature ## Feature(geometry) This class contains functionality shared among geometry objects, such as Point, Line, Polygon, and MultiPolygon. Features can be styled individually with setStyle; otherwise they use the style of their vector layer. Learn more about creating features in the Vector Layer tutorial. setStyle #### # new Feature(geometry) | Name | Type | Description | | --- | --- | --- | | geometry | Geometry | Any geometry object: Point, Line, Polygon, MultiPolygon | geometry Any geometry object: Point, Line, Polygon, MultiPolygon **Tutorials:** : Vector Layer - Vector Layer - Feature#event:FEATURE_CLICK - Feature#event:FEATURE_HOVER Create simple feature const location = new Vexcel.Geometry.Location(20, 20); const point = new Vexcel.Geometry.Point(location); const feature = new Vexcel.Geometry.Feature(point); const location = new Vexcel.Geometry.Location(20, 20); const point = new Vexcel.Geometry.Point(location); const feature = new Vexcel.Geometry.Feature(point); ### Classes **Feature** # Methods #### # clone() -> {Feature.} Clone this feature. If the original feature has a geometry it is also cloned. The clone #### # get(key) -> {any} Gets a value | Name | Type | Description | | --- | --- | --- | | key | string | | key #### # getBoundingBox() -> {Extent} Get extent/bounding box for feature geometry in geographic coordinates [minx, miny, maxx, maxy] bounding box #### # getGeometry() -> {Geometry} Get the feature's default geometry The geometry for the feature. #### # getKeys() -> {Array.} Get a list of object property names. List of property names. #### # getProperties() -> {Object.} Get an object of all property names and values. Object. #### # getStyle() -> {Style} Get the feature's style The feature style. #### # set(key, value) Sets a value. | Name | Type | Description | | --- | --- | --- | | key | string | Key name. | | value | any | Value. | key Key name. value Value. #### # setGeometry(geometry) Set the default geometry for the feature. | Name | Type | Description | | --- | --- | --- | | geometry | Geometry | The new geometry. | geometry The new geometry. #### # setProperties(values) Sets a collection of key-value pairs. Note that this changes any existing properties and adds new ones (it does not remove any existing properties). | Name | Type | Description | | --- | --- | --- | | values | Object. | Values. | values Values. #### # setStyle(styleopt) Set the style for the feature to override the layer style. This can be a single style object, an array of styles, or a function that takes a resolution and returns an array of styles. To unset the feature style, call setStyle() without arguments or a falsey value. setStyle() | Name | Type | Attributes | Description | | --- | --- | --- | --- | | style | Style | | Style for this feature. | style Style for this feature. #### # toGeoJSON() -> {string} Convert feature geometry to GeoJSON string with xy coordinates [long, lat] #### # toWKT() -> {string} Convert feature geometry to WKT string with xy coordinates [long, lat] # Events #### # FEATURE_CLICK Event triggered when a feature receives a click | Name | Type | Description | | --- | --- | --- | | location | Location | Location of the coordinates for this event | | layer | VectorLayer | Layer for this feature | location Location of the coordinates for this event layer Layer for this feature Event for click on feature feature.addListener(Vexcel.Events.MapEvents.FEATURE_CLICK, (e) => { console.log(JSON.stringify(e.feature)); }); feature.addListener(Vexcel.Events.MapEvents.FEATURE_CLICK, (e) => { console.log(JSON.stringify(e.feature)); }); #### # FEATURE_HOVER Event triggered when hovering over a feature in the map | Name | Type | Description | | --- | --- | --- | | location | Location | Location of the coordinates for this event | | layer | VectorLayer | Layer for this feature | | hover | boolean | if the feature is hovered or not. False it's triggered when pointer does not intersect when the geometry | location Location of the coordinates for this event layer Layer for this feature hover if the feature is hovered or not. False it's triggered when pointer does not intersect when the geometry Event for hover on feature feature.addListener(Vexcel.Events.MapEvents.FEATURE_HOVER, (e) => { console.log(JSON.stringify(e.feature)); }); feature.addListener(Vexcel.Events.MapEvents.FEATURE_HOVER, (e) => { console.log(JSON.stringify(e.feature)); }); ================================================================================ ## 15. Fill Class # Fill ## Fill(opts) Set fill style for vector features. Learn more about implementing fill style in our Polygon styles, Point styles, Point shapes styles, Feature styles, and Text styles tutorials. #### # new Fill(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Tile layer options. | | color | object | | null | A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. | opts Tile layer options. color A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. **Tutorials:** : Polygon styles Point styles Point shapes styles Feature styles Text styles - Polygon styles - Point styles - Point shapes styles - Feature styles - Text styles ### Classes **Fill** # Methods #### # getColor() -> {string} Get the stroke color. A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. #### # setColor(color) Set the color. | Name | Type | Description | | --- | --- | --- | | color | string | A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. | color A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. ================================================================================ ## 16. GeoJSON Class # GeoJSON ## GeoJSON() Feature format for reading and writing data in the GeoJSON format. #### # new GeoJSON() ### Classes **GeoJSON** # Methods #### # readFeature(geoJSON) -> {Feature} Read the feature from the GeoJSON geometry object. | Name | Type | Description | | --- | --- | --- | | geoJSON | object | GeoJSON geometry | geoJSON GeoJSON geometry Feature. #### # readFeatures(geoJSON) -> {object} Read the features from the GeoJSON geometry string. | Name | Type | Description | | --- | --- | --- | | geoJSON | object | GeoJSON geometry in geographic coordinates. | geoJSON GeoJSON geometry in geographic coordinates. Features. #### # readGeometry(geoJSON) -> {object} Read the geometry from the GeoJSON geometry string. | Name | Type | Description | | --- | --- | --- | | geoJSON | object | GeoJSON geometry | geoJSON GeoJSON geometry Geometry. #### # writeFeature(feature) -> {string} Encode a feature as a GeoJSON object. | Name | Type | Description | | --- | --- | --- | | feature | Feature | Feature. | feature Feature. Encoded feature. #### # writeFeatures(features) -> {string} Encode an array of features as GeoJSON object. | Name | Type | Description | | --- | --- | --- | | features | Array. | Features. | features Features. Encoded features. #### # writeGeometry(geometry) -> {string} Write a single geometry. | Name | Type | Description | | --- | --- | --- | | geometry | object | geometry. | geometry geometry. Geometry ================================================================================ ## 17. GroupLayer Class # GroupLayer ## GroupLayer(opts) Group Layer definition Learn more about Group Layers in our Group Layer tutorial. #### # new GroupLayer(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Group layer options. | | name | string | | | Layer name | | order | number | | | The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. | | visible | boolean | | true | Visibility | | layers | Array. | | | Array of layers to be included in the group. | opts Group layer options. name Layer name order The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. visible Visibility layers Array of layers to be included in the group. **Tutorials:** : Group Layer - Group Layer - LayerEvents#event:VISIBILITY_CHANGE Create empty layer const layer = new Vexcel.Layers.GroupLayer(); const layer = new Vexcel.Layers.GroupLayer(); ### Extends - BaseGroupLayer ### Classes **GroupLayer** # Methods #### # getMaxZoom() -> {number} Gets the maximum zoom level of the layer. **Overrides:** : BaseGroupLayer#getMaxZoom - BaseGroupLayer#getMaxZoom The maximum zoom level of the layer. #### # getMinZoom() -> {number} Gets the minimum zoom level of the layer. **Overrides:** : BaseGroupLayer#getMinZoom - BaseGroupLayer#getMinZoom The minimum zoom level of the layer. #### # getOpacity() -> {number} Gets the opacity of the layer (between 0 and 1). **Overrides:** : BaseGroupLayer#getOpacity - BaseGroupLayer#getOpacity The opacity of the layer. #### # getVisible() -> {boolean} Return the visibility of the layer (true or false). true false **Overrides:** : BaseGroupLayer#getVisible - BaseGroupLayer#getVisible The visibility of the layer. #### # setMaxZoom(maxZoom) Sets the maximum zoom (exclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | maxZoom | number | The maximum zoom of the layer. | maxZoom The maximum zoom of the layer. **Overrides:** : BaseGroupLayer#setMaxZoom - BaseGroupLayer#setMaxZoom #### # setMinZoom(minZoom) Sets the minimum zoom (inclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | minZoom | number | The minimum zoom of the layer. | minZoom The minimum zoom of the layer. **Overrides:** : BaseGroupLayer#setMinZoom - BaseGroupLayer#setMinZoom #### # setOpacity(opacity) Sets the opacity of the layer, allowed values range from 0 to 1. | Name | Type | Description | | --- | --- | --- | | opacity | number | The opacity of the layer. | opacity The opacity of the layer. **Overrides:** : BaseGroupLayer#setOpacity - BaseGroupLayer#setOpacity #### # setVisible(visible) Set the visibility of the layer (true or false). true false | Name | Type | Description | | --- | --- | --- | | visible | boolean | The visibility of the layer. | visible The visibility of the layer. **Overrides:** : BaseGroupLayer#setVisible - BaseGroupLayer#setVisible ================================================================================ ## 18. HeightTool Class # HeightTool ## HeightTool Measurement tool to draw height. Learn more about our Height Tool in our 3D mode tutorials. ### Classes **HeightTool** # Methods #### # activate() This method activate the tool and you can start to draw a polygon #### # cancel() This method cancel the current measure #### # changeHeightUnits(unit) Sets the height units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | LengthUnits | Imperial or metric value from LengthUnits | unit Imperial or metric value from LengthUnits **See:** : LengthUnits - LengthUnits #### # changeTooltipsVisibility(visible) Change visibility for measurement tooltips | Name | Type | Description | | --- | --- | --- | | visible | boolean | boolean | visible boolean #### # clear() This method clears all measurements of this tool. #### # deactivate() This method deactivate the tool ================================================================================ ## 19. Icon Class # Icon ## Icon(opts) Set icon style for vector features. Learn more about implementing Icons in our Point styles and Point shapes styles tutorials #### # new Icon(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Options | | rotateWithView | boolean | | | If the image should get rotated with the view. | | rotation | number | | | Rotation. | | scale | number | | | Scale. | | displacement | number | | | Displacement. | | anchor | Array. | | [0.5, 0.5] | Anchor. Default value is the icon center. | | color | string | | | Color to tint the icon. If not specified, the icon will be left as is. | | offset | Array. | | [0, 0] | Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image. | | displacement | Array. | | [0,0] | Displacement the icon | | offsetOrigin | string | | 'top-left' | Origin of the offset: bottom-left, bottom-right, top-left or top-right. | | opacity | number | | 1 | Opacity of the icon. | | scale | number | | 1 | Scale. | | rotateWithView | boolean | | false | Whether to rotate the icon with the view. | | rotation | number | | 0 | Rotation in radians (positive rotation clockwise). | | size | number | | | Icon size in pixel. Can be used together with offset to define the sub-rectangle to use from the origin (sprite) icon image. | | imgSize | number | | | Image size in pixels. Only required if img is set and src is not, and for SVG images in Internet Explorer 11. The provided imgSize needs to match the actual size of the image. | | src | string | | | Image source URI. | opts Options rotateWithView If the image should get rotated with the view. rotation Rotation. scale Scale. displacement Displacement. anchor Anchor. Default value is the icon center. color Color to tint the icon. If not specified, the icon will be left as is. offset Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image. displacement Displacement the icon offsetOrigin Origin of the offset: bottom-left, bottom-right, top-left or top-right. bottom-left bottom-right top-left top-right opacity Opacity of the icon. scale Scale. rotateWithView Whether to rotate the icon with the view. rotation Rotation in radians (positive rotation clockwise). size Icon size in pixel. Can be used together with offset to define the sub-rectangle to use from the origin (sprite) icon image. offset imgSize Image size in pixels. Only required if img is set and src is not, and for SVG images in Internet Explorer 11. The provided imgSize needs to match the actual size of the image. img src imgSize src Image source URI. **Tutorials:** : Point styles Point shapes styles - Point styles - Point shapes styles ### Classes **Icon** # Methods #### # getAnchor() -> {Array.} Get the anchor point in pixels. The anchor determines the center point for the symbolizer. Anchor. #### # getDisplacement() -> {Array.} Get the displacement of the shape Shape's center displacement #### # getFill() -> {Fill} Get the fill style for the shape. Fill style. #### # getOpacity() -> {number} Get the symbolizer opacity. Opacity. #### # getRotateWithView() -> {boolean} Determine whether the symbolizer rotates with the map. Rotate with map. #### # getRotation() -> {number} Get the symoblizer rotation. Rotation. #### # getScale() -> {number} Get the symbolizer scale. Scale. #### # getSize() -> {Array.} Get the size of the symbolizer (in pixels). Size. #### # getSrc() -> {string} Get the image URL. Image src. #### # getStroke() -> {Stroke} Get the stroke style for the shape. Stroke style. #### # setOpacity(opacity) Set the opacity. | Name | Type | Description | | --- | --- | --- | | opacity | number | Opacity. | opacity Opacity. #### # setRotateWithView(rotateWithView) Set whether to rotate the style with the view. | Name | Type | Description | | --- | --- | --- | | rotateWithView | boolean | Rotate with map. | rotateWithView Rotate with map. #### # setRotation(rotation) Set the rotation. | Name | Type | Description | | --- | --- | --- | | rotation | number | Rotation. | rotation Rotation. #### # setScale(scale) Set the scale. | Name | Type | Description | | --- | --- | --- | | scale | number | Scale. | scale Scale. ================================================================================ ## 20. Image Class # Image ## Image Represents an image object containing metadata. This class provides structured access to various image properties, including capture details, positioning, and sensor specifications. ### Classes **Image** # Members #### # archived Archive status of the image. #### # area Area covered by the image. #### # b1 Band coefficient b1. #### # b2 Band coefficient b2. #### # band Band of the image. #### # bboxWkt Bounding box WKT. #### # bboxWktLatlon Bounding box WKT in lat/lon coordinates. #### # cameraPosX X position of the camera. #### # cameraPosY Y position of the camera. #### # cameraTechnology Camera technology used to capture the image. #### # cameraZ Z position of the camera. #### # captureDate Capture date of the image. #### # captureYear Year of image capture. #### # centreWkt Centre point WKT. #### # centreWktLatlon Centre point WKT in lat/lon coordinates. #### # childAoi Child area of interest (AOI). #### # firstCaptureDate Date of the first image capture. #### # firstPublishDate First date the image was published. #### # flightLineId Flight line ID associated with the image. #### # focalLength Focal length of the camera used to capture the image. #### # groundZ Ground Z position (altitude). #### # gsd Ground Sample Distance (GSD) for the image. #### # imageId Unique identifier for the image. #### # k0 Calibration coefficient k0. #### # k1 Calibration coefficient k1. #### # k2 Calibration coefficient k2. #### # k3 Calibration coefficient k3. #### # kappa Kappa angle of the image. #### # lastCaptureDate Date of the last image capture. #### # lastPublishDate Last date the image was published. #### # layerName Layer name of the image. #### # maxGsd Maximum Ground Sample Distance (GSD) for the image. #### # minGsd Minimum Ground Sample Distance (GSD) for the image. #### # omega Omega angle of the image. #### # orientation Orientation of the image. #### # originalImageName Original image file name. #### # originalShotId Original shot ID. #### # p1 Calibration coefficient p1. #### # p2 Calibration coefficient p2. #### # phi Phi angle of the image. #### # pixelSize Pixel size of the image. #### # pp0X Principal point X of the camera. #### # pp0Y Principal point Y of the camera. #### # projectExt Project extension. #### # projectName Project name associated with the image. #### # rasterSizeHeight Raster size height. #### # rasterSizeWidth Raster size width. #### # utmZone UTM zone of the image. #### # zIndex Z-index value for image layer sorting. ================================================================================ ## 21. ImageryLayer Class # ImageryLayer ## ImageryLayer Represents a specialized map layer for displaying imagery data. Provides functionality to interact with imagery in both 2D and 3D modes, including changing view modes, adjusting opacity and visibility, retrieving metadata, and managing infrared mode. ### Classes **ImageryLayer** # Methods #### # changeImage3D(id) Loads a 3D image by its image ID. | Name | Type | Description | | --- | --- | --- | | id | string | The ID of the image to load in 3D mode. | id The ID of the image to load in 3D mode. #### # changeMode(mode) -> {Promise.<{status: number, msg: string}>} Changes the view mode of the map. | Name | Type | Description | | --- | --- | --- | | mode | '3D' | '2D' | The mode to switch to. | mode The mode to switch to. - A promise resolving with the operation status and message, or rejecting on failure. #### # changeOrientation(orientation) -> {Promise.<{status: number, msg: string}>} Changes the imagery orientation in 3D mode. | Name | Type | Description | | --- | --- | --- | | orientation | string | The orientation to change to. | orientation The orientation to change to. - A promise resolving with the operation status and message, or rejecting if 3D mode is not active. #### # disableInfrared() Disables infrared mode. #### # enableInfrared() Enables infrared mode. #### # getAvailableLayerCollections() -> {Array.} Get all collections in center separated by layer collections. #### # getCenterImageMetadata() -> {Image} Retrieves metadata of the images at the center of the view. The image metadata. #### # getLayerCollections() -> {Array.} Get all collections separated by layer collections. #### # getMaxZoom() -> {number} Gets the maximum zoom level of the layer. The maximum zoom level of the layer. #### # getMinZoom() -> {number} Gets the minimum zoom level of the layer. The minimum zoom level of the layer. #### # getMode() -> {'3D'|'2D'} Get the mode of the map. mode for current view #### # getOpacity() -> {number} Gets the opacity of the layer (between 0 and 1). The opacity of the layer. #### # getOrientation() -> {string} Return view orientation #### # getVisible() -> {boolean} Gets the visibility of the layer (true or false). true false The visibility of the layer. #### # hasInfrared() -> {boolean} Checks if infrared imagery is available in the current mode. - Returns true if infrared imagery is available, otherwise false. true false #### # hideVexcelSources(vexcelLayers) Sets the sources for removing in the base Imagery Layer | Name | Type | Description | | --- | --- | --- | | vexcelLayers | Array. | List of layer sources to remove. Should be values from VexcelLayers | vexcelLayers List of layer sources to remove. Should be values from VexcelLayers #### # is3DAvailable(collectionIdopt, centeropt, zoomopt) -> {boolean} Checks if 3D mode is available for a specific collection, center, and zoom level. If center or zoom are not specified or are null, the function will use the map's current center and zoom. center zoom null | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | collectionId | string | | null | The ID of the collection to check. If not provided, it will check all available collections. | | center | Location | | null | The geographical center [longitude, latitude] to check for 3D availability. Defaults to the map's current center if not provided. | | zoom | number | | null | The zoom level to check for 3D mode. Defaults to the map's current zoom if not provided. | collectionId The ID of the collection to check. If not provided, it will check all available collections. center The geographical center [longitude, latitude] to check for 3D availability. Defaults to the map's current center if not provided. zoom The zoom level to check for 3D mode. Defaults to the map's current zoom if not provided. - Returns true if 3D mode is available, otherwise false. true false #### # isOrientationAvailable(orientation, collectionIdopt) -> {boolean} Checks whether orientation is available for the given collection (if specified). | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | orientation | string | | | The orientation to check. Defaults to the map's current orientation if not provided. | | collectionId | string | null | | null | The ID of the collection to check. If null, checks globally. | orientation The orientation to check. Defaults to the map's current orientation if not provided. collectionId The ID of the collection to check. If null, checks globally. null - Returns true if the orientation is available, otherwise false. true false #### # loadDiscreteByProject(layerCollection, collectionId) Loads discrete imagery by project. | Name | Type | Description | | --- | --- | --- | | layerCollection | string | The layer collections identifier. | | collectionId | string | The collection name. | layerCollection The layer collections identifier. collectionId The collection name. #### # selectCollection(id) Selects a collection to be displayed in the imagery. | Name | Type | Description | | --- | --- | --- | | id | string | The collection to set on top. | id The collection to set on top. #### # setMaxZoom(maxZoom) Sets the maximum zoom (exclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | maxZoom | number | The maximum zoom of the layer. | maxZoom The maximum zoom of the layer. #### # setMinZoom(minZoom) Sets the minimum zoom (inclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | minZoom | number | The minimum zoom of the layer. | minZoom The minimum zoom of the layer. #### # setOpacity(opacity) Sets the opacity of the layer, allowed values range from 0 to 1. | Name | Type | Description | | --- | --- | --- | | opacity | number | The opacity of the layer. | opacity The opacity of the layer. #### # setVisible(visible) Sets the visibility of the layer (true or false). true false | Name | Type | Description | | --- | --- | --- | | visible | boolean | The visibility of the layer. | visible The visibility of the layer. #### # showVexcelSources(vexcelLayers) Sets the sources for the base Imagery Layer to the specified list, removing all others | Name | Type | Description | | --- | --- | --- | | vexcelLayers | Array. | List of layer sources to keep. Should be values from VexcelLayers | vexcelLayers List of layer sources to keep. Should be values from VexcelLayers ================================================================================ ## 22. InfoBox Class # InfoBox ## InfoBox(options) An element to be displayed over the map and attached to a single map location. Overlays are visible widgets, they are not in a fixed position on the screen, but are tied to a geographical coordinate, so panning the map will move an Overlay but not a Control. Learn how to implement an InfoBox in our InfoBox fixed and InfoBox on click tutorials. #### # new InfoBox(options) | Name | Type | Attributes | Description | | --- | --- | --- | --- | | options | options | | Extend Overlay options | | location | Location | | Location object with the coordinates for popup | | content | string | | Html content to show in the info popup | | class | String | | the a class of the overlay to style the popup. | | anim | boolean | | Animate the popup the popup, default false. | | closeBox | bool | | popup has a close box, default false. | | onclose | function | undefined | | callback function when infobox is closed | | onshow | function | undefined | | callback function when infobox is shown | | offsetBox | Number | Array. | | an offset box | | positioning | string | | the 'auto' positioning var the popup choose its positioning to stay on the map. Possible values are 'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'. | options Extend Overlay options location Location object with the coordinates for popup content Html content to show in the info popup class the a class of the overlay to style the popup. anim Animate the popup the popup, default false. closeBox popup has a close box, default false. onclose callback function when infobox is closed onshow callback function when infobox is shown offsetBox an offset box positioning the 'auto' positioning var the popup choose its positioning to stay on the map. Possible values are 'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'. 'bottom-left' 'bottom-center' 'bottom-right' 'center-left' 'center-center' 'center-right' 'top-left' 'top-center' 'top-right' ### Classes **InfoBox** # Methods #### # hide() Hide and remove from map #### # show(locationopt, contentopt) Set the position and the content of the popup. | Name | Type | Attributes | Description | | --- | --- | --- | --- | | location | Location | | Location object with the coordinates for popup | | content | string | | Html content to show in the info popup | location Location object with the coordinates for popup content Html content to show in the info popup ================================================================================ ## 23. LayerCollections Class # LayerCollections ## LayerCollections Represents a layer collections, including its name and the associated collections. This class provides structured access to layer collections information, organizing collections under a specific program and enabling management of geospatial imagery data. ### Classes **LayerCollections** # Members #### # collections Collections of layer collections. #### # name Layer collections name. ================================================================================ ## 24. LayerCollectionsStatus Class # LayerCollectionsStatus ## LayerCollectionsStatus Represents a layer collections with associated status, including the program name, relevant view information (such as center, zoom, and extent), and the collections under this program. This class extends the functionality of the basic LayerCollections by adding dynamic status related to collections and their orientations, enabling more detailed management of geospatial imagery. LayerCollections ### Classes **LayerCollectionsStatus** # Members #### # collections Available collections. #### # name Layer collections name. #### # viewInfo Relevant info for center, zoom and extent ================================================================================ ## 25. LayerEvents Namespace # LayerEvents ## LayerEvents This namespace contains definitions for events related to layers. ### Namespaces **LayerEvents** # Events #### # VISIBILITY_CHANGE Event triggered when layer changes it visibility | Name | Type | Description | | --- | --- | --- | | layer | BaseLayer | Layer that changed visibility | | visible | boolean | New visibility state | layer Layer that changed visibility visible New visibility state Event for layer visibility change layer.addListener('layer:visibility:change', (e) => { console.log(e.visible); }); layer.addListener('layer:visibility:change', (e) => { console.log(e.visible); }); ================================================================================ ## 26. Line Class # Line ## Line(locations) The line class allows you to draw connected lines on a map. In many spatial database systems, these are called PolyLines, or LineStrings. When creating a polyline, an array of locations must be passed as an argument in the constructor. See an implementation in our Line tutorial. #### # new Line(locations) | Name | Type | Description | | --- | --- | --- | | locations | Array. | array of locations. | locations array of locations. **Tutorials:** : Line - Line Create simple line const line = new Vexcel.Geometry.Line( [ new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375), new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375), new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562), ]); const line = new Vexcel.Geometry.Line( [ new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375), new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375), new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562), ]); ### Classes **Line** # Methods #### # clone() -> (non-null) {Line} Make a complete copy of the line. Clone #### # getLength() -> {number} Return the length of the polyline on projected plane. Length (on projected plane). #### # getLocations() -> {Array.} Returns the locations that define the polyline. array with location object with latitude and longitude #### # getType() -> {object} Get the type of this geometry. Geometry type. #### # setLocations(locations) Update polyline locations. | Name | Type | Description | | --- | --- | --- | | locations | Array. | Array of Location objects | locations Array of Location objects #### # toGeoJSON() -> {string} Convert geometry to GeoJSON string with xy coordinates [long, lat] #### # toWKT() -> {string} Convert geometry to WKT string with xy coordinates [long, lat] ================================================================================ ## 27. LineTool Class # LineTool ## LineTool Measurement tool to draw lines. Learn more about our Line Tool in our 2D mode and 3D mode tutorials. ### Classes **LineTool** # Methods #### # activate() This method activate the tool and you can start to draw a polygon #### # cancel() This method cancel the current measure #### # changeLengthUnits(unit) Sets the length units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | LengthUnits | Imperial or metric value from LengthUnits | unit Imperial or metric value from LengthUnits **See:** : LengthUnits - LengthUnits #### # changeSlopeUnits(unit) Sets the slope units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | SlopeUnits | Imperial or metric value from SlopeUnits | unit Imperial or metric value from SlopeUnits **See:** : SlopeUnits - SlopeUnits #### # changeTooltipsVisibility(visible) Change visibility for measurement tooltips | Name | Type | Description | | --- | --- | --- | | visible | boolean | boolean | visible boolean #### # clear() This method clears all measurements of this tool. #### # deactivate() This method deactivate the tool #### # disableEdit() This method disable de edit mode for this tool #### # enableEdit() This method enable de edit mode for this tool ================================================================================ ## 28. Location Class # Location ## Location(latitude, longitude) This class stores the coordinate information needed to mark locations on a map. The Location class consists of two properties: latitude and longitude. The latitude property is used to represent how far north or south a location is. This value is an angle measured around the center of the earth from the equator towards the poles. A positive value is in the northern hemisphere and a negative value is in the southern hemisphere. This value has a range of -90 to 90 degrees however due to the mathematics involved in representing the spherical globe as a flat 2D map, some calculations approach infinity as you approach polar latitudes. To avoid this, mapping platforms that use the Mercator projection system clip the latitude coordinates to approximately -85 and 85 degrees. The longitude property stores the angle of horizontal offset from the prime meridian (0 degrees). This property has a value between -180 and 180 degrees. #### # new Location(latitude, longitude) | Name | Type | Description | | --- | --- | --- | | latitude | number | The latitude of the location. | | longitude | number | The longitude of the location. | latitude The latitude of the location. longitude The longitude of the location. Create simple location object const point = new Vexcel.Geometry.Location(20,20); const point = new Vexcel.Geometry.Location(20,20); ### Classes **Location** # Methods #### # clone() -> (non-null) {Location} Make a complete copy of the Location. Clone. #### # toString() -> {string} Return latitude,longitude in a comma-delimited string format ================================================================================ ## 29. Login # Login You need to login to check the Vexcel API documentation and tutorials - Email: - Password: - Login - Login - Token: - Login ================================================================================ ## 30. Map Class # Map ## Map(opts) The map object generates an interactive map. You can customize the map by passing in number of different options. Some of these options can be specified when creating the map while others can be changed at any time. When loading the map, you can specify settings from the MapOptions. Learn more about initializing maps with our map tutorial #### # new Map(opts) Generate object with options. You must provide at least one of the following parameters: token, apiKey, geoKey, or impersonationKey. token apiKey geoKey impersonationKey | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Map core options. | | target | string | | | Div name where interactive map will reside | | token | number | | | The authentication token, required if no other authentication method is provided. | | apiKey | number | | | The authentication api key, required if no other authentication method is provided. | | geoKey | number | | | The authentication geo key, required if no other authentication method is provided. | | impersonationKey | number | | | The authentication impersonation key, required if no other authentication method is provided. | | mapId | target | | | Map Id. IMPORTANT. If no ID is informed, the used map will be the first map assigned to the user ordered alphabetically. | | center | Array. | | | The initial center for the view. | | zoom | number | | | Zoom level for the view. | | maxZoom | number | | | The maximum zoom level used to determine the resolution constraint. | | minZoom | number | | | The minimum zoom level used to determine the resolution constraint. | | mode | string | | "2D" | Initial mode in which the map will be initialized | | image | string | | | Initial image in which the map will be initialized, necessary 3D mode | | orientation | string | | "N" | Initial orientation in which the map will be initialized | | layerSwitcher | boolean | | false | Add built-in layer switcher control to the map. | | zoomControl | boolean | | false | Add built-in zoom control to the map. | | initialConfig | Map~InitOpts | | {overlays:null,imageryLayers:null,center:true,zoom:true,callback:null} | Object to establish which map config it´s applied. | | restrictedExtent | Extent | | | The extent that the map will be restricted to. | opts Map core options. target Div name where interactive map will reside token The authentication token, required if no other authentication method is provided. apiKey The authentication api key, required if no other authentication method is provided. geoKey The authentication geo key, required if no other authentication method is provided. impersonationKey The authentication impersonation key, required if no other authentication method is provided. mapId Map Id. IMPORTANT. If no ID is informed, the used map will be the first map assigned to the user ordered alphabetically. center The initial center for the view. zoom Zoom level for the view. maxZoom The maximum zoom level used to determine the resolution constraint. minZoom The minimum zoom level used to determine the resolution constraint. mode Initial mode in which the map will be initialized image Initial image in which the map will be initialized, necessary 3D mode orientation Initial orientation in which the map will be initialized layerSwitcher Add built-in layer switcher control to the map. zoomControl Add built-in zoom control to the map. initialConfig Object to establish which map config it´s applied. restrictedExtent The extent that the map will be restricted to. **Tutorials:** : Initialization Init with username/password Init with constrained zoom levels Init with token Init empty map Init in 3D mode Init map with a restricted extent - Initialization - Init with username/password - Init with constrained zoom levels - Init with token - Init empty map - Init in 3D mode - Init map with a restricted extent - Map#event:CENTER_DATE_IMAGE - Map#event:CHANGE_MEASURE - Map#event:CLICK - Map#event:FEATURES_CLICK - Map#event:FIND_IMAGES_LOADED - Map#event:FINISH_MEASURE - Map#event:MAP_INITIALIZE - Map#event:MAP_VISIBILITY_CHANGE - Map#event:MOVE_END - Map#event:START_MEASURE - Map#event:TILES_END_LOAD - Map#event:TILES_START_LOAD Create basic map. Always need at least a target container and token const map = new Vexcel.Map({ target: "map", token: API_KEY, }); const map = new Vexcel.Map({ target: "map", token: API_KEY, }); ### Classes **Map** # Methods #### # addControl(control) Add custom control to the map | Name | Type | Description | | --- | --- | --- | | control | object | Element to add to the map | control Element to add to the map #### # addInfoBox(infobox) Add the given infobox to the map. If the infobox has a location we show in the map if not you can show when you need with the function InfoBox~show | Name | Type | Description | | --- | --- | --- | | infobox | InfoBox | Add the given infobox to the map. | infobox Add the given infobox to the map. #### # changeMap(mapId) Change map. | Name | Type | Description | | --- | --- | --- | | mapId | number | Map Id. IMPORTANT. If no ID is informed, the used map will be the first instance assigned to the user ordered alphabetically. | mapId Map Id. IMPORTANT. If no ID is informed, the used map will be the first instance assigned to the user ordered alphabetically. CoreMap #### # changeMode(mode) -> {Promise.} Change map mode 2d/3d Select the collection in the top and change mode When change to 2d we force North orientation When change to 3d we persist the view orientation | Name | Type | Description | | --- | --- | --- | | mode | string | value from ViewMode | mode value from ViewMode #### # getBrightness() -> {number} Returns the brightness value of the Geomni BASE_LINE when is the base layer. If the base layer is not Geomni BASE_LINE return -1. The default brightness value of Geomni BASE_LINE layer is 100. A value in the range [0-500] #### # getCollectionManager() -> {CollectionManager} Get collection manager #### # getImageryLayer() -> {ImageryLayer} Get imagery layer object that manage the imagery data #### # getLocation() -> {Location} Gets the geographic coordinates of center of the view. #### # getMapStatusView() -> {MapStatusView} Get map status view that allow to visualize the status of the map #### # getMeasurementManager() -> {MeasurementLayer} Get measurement manager object that manage measurement tools #### # getOverlayManager() -> {OverlayManager} Get overlay manager object that manage map layers #### # getViewExtent() -> {Extent} Get the extent for the current view state. **See:** : Extent - Extent #### # getZoom() -> {number} Get the current zoom level. This method may return non-integer zoom levels if the view does not constrain the resolution, or if an interaction or animation is underway. #### # setBrightness(brightness) Sets the brightness value of the Geomni BASE_LINE when is the base layer. | Name | Type | Description | | --- | --- | --- | | brightness | number | A value in the range [0-500]. The default brightness value of Geomni BASE_LINE layer is 100; | brightness A value in the range [0-500]. The default brightness value of Geomni BASE_LINE layer is 100; #### # setCenter(center, EPSG) Centers the map in the given point. | Name | Type | Description | | --- | --- | --- | | center | Array. | The point with the new coordinates where the map will be centered [lat, lng]. | | EPSG | string | epsg code "epsg:4326" by default | center The point with the new coordinates where the map will be centered [lat, lng]. EPSG epsg code "epsg:4326" by default #### # setLocation(location) Centers the map in the given point. | Name | Type | Description | | --- | --- | --- | | location | Location | | location #### # setViewExtent(extent) Fit to extent, move the map to fit this extent | Name | Type | Description | | --- | --- | --- | | extent | Extent | | extent **See:** : Extent - Extent #### # setZoom(zoom) Zoom to a specific zoom level | Name | Type | Description | | --- | --- | --- | | zoom | number | | zoom # Type Definitions #### # InitOpts | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | overlays | Map~VisibilityConfig | | null | Overlays visibility config at start. | | imageryLayers | Map~VisibilityConfig | | null | ImageryLayers visibility config at start. Value from VexcelLayers | | center | boolean | | true | Use center defined in instance config. Use over map config. | | zoom | boolean | | true | Use zoom defined in instance config. Use over map config. | | callback | function | | | Callback called when the map finish the initialization. | overlays Overlays visibility config at start. imageryLayers ImageryLayers visibility config at start. Value from VexcelLayers center Use center defined in instance config. Use over map config. zoom Use zoom defined in instance config. Use over map config. callback Callback called when the map finish the initialization. #### # VisibilityConfig | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | visible | Array. | | null | Names visible at start. | | disabled | Array. | | null | Names invisible at start. | visible Names visible at start. disabled Names invisible at start. # Events Type: object #### # CENTER_DATE_IMAGE Event triggered when center image change Type: object #### # CHANGE_MEASURE Event triggered after creating or editing a new measurement with the measurement tools | Name | Type | Description | | --- | --- | --- | | event | object | Internal event | event Internal event | Name | Type | Description | | --- | --- | --- | | measure | Measure | Measure object | measure Measure object Type: object #### # CLICK Event Triggered when user single clicks on the map. This event is not triggered if drawing tools are enabled or if the user clicks on a feature on the map. | Name | Type | Description | | --- | --- | --- | | location | Location | Location of the coordinates for this event | | drawing | boolean | Return if any of drawing/measurement tools are enabled | location Location of the coordinates for this event drawing Return if any of drawing/measurement tools are enabled #### # COMPLETE_COLLECTIONS Event triggered when map loads all collections Type: object #### # FEATURES_CLICK Event Triggered when user clicks on a space on the map occupied by multiple features. Only fired if there is more than one feature | Name | Type | Description | | --- | --- | --- | | location | Location | Location for point clicked | | features | Array. | List of features when you click | location Location for point clicked features List of features when you click Listener in map to listen on features click core.addListener(Vexcel.Events.MapEvents.FEATURES_CLICK, (e) => { e.features.map(feat => console.log(JSON.stringify(feat))); }); } }); core.addListener(Vexcel.Events.MapEvents.FEATURES_CLICK, (e) => { e.features.map(feat => console.log(JSON.stringify(feat))); }); } }); Type: object #### # FIND_IMAGES_LOADED Event triggered after map loads images for the center of the map in the viewport | Name | Type | Description | | --- | --- | --- | | images | Array. | List of images loaded for the center of the map | | point | Array. | Point of the center of the image | | epsg | string | Epsg code for point coordinates | images List of images loaded for the center of the map point Point of the center of the image epsg Epsg code for point coordinates Type: object #### # FINISH_MEASURE Event triggered after finish a new measurement with the measurement tools | Name | Type | Description | | --- | --- | --- | | event | object | Internal event | event Internal event | Name | Type | Description | | --- | --- | --- | | measure | Measure | Measure object | measure Measure object Type: object #### # MAP_INITIALIZE Event triggered after map is initialized and layers are loaded | Name | Type | Description | | --- | --- | --- | | map | Map | Map object | | status | MapStatus~status | Object with the status of the map | map Map object status Object with the status of the map Type: object #### # MAP_STATUS_EVENT Dispatches a map status update event. | Name | Type | Description | | --- | --- | --- | | status | MapStatus | The updated map status. | status The updated map status. - event:MapStatusEvent Type: object #### # MAP_VISIBILITY_CHANGE Event triggered when the layer switcher change layers visibility, only works when layer switcher is enabled | Name | Type | Description | | --- | --- | --- | | layer | BaseLayer | Layer that changed visibility | | visible | boolean | New visibility state | layer Layer that changed visibility visible New visibility state Type: object #### # MOVE_END Event Triggered after the map is moved. Type: object #### # NO_3D_IMAGES Event triggered when no images to 3D mode Type: object #### # POINTER_MOVE Event triggered when a pointer is moved. Note that on touch devices this is triggered when the map is panned, so it is not the same as moving the mouse. | Name | Type | Description | | --- | --- | --- | | location | Location | Location for point | location Location for point Type: object #### # START_MEASURE Event triggered after start a new measurement with the measurement tools | Name | Type | Description | | --- | --- | --- | | event | object | Internal event | event Internal event | Name | Type | Description | | --- | --- | --- | | measure | Measure | Measure object | measure Measure object #### # TILES_END_LOAD Event triggered when the map finishes loading the tiles #### # TILES_START_LOAD Event triggered when the map starts loading the tiles ================================================================================ ## 31. MapStatus Class # MapStatus ## MapStatus Map Status object containing position view (center, zoom and extent), available images and visible collection - MapStatus#event:MAP_STATUS_EVENT ### Classes **MapStatus** # Members #### # availableLayerCollections Available layer collections. #### # images Available images. #### # viewInfo Contains position of the map (center, zoom and extent). #### # visibleCollection Visible collection. # Type Definitions #### # ViewInfo Map status with the relevant info for center, zoom and extent | Name | Type | Description | | --- | --- | --- | | extent | Array. | Extent for map view | | center | Location | Coordinates for map center | | zoom | number | Zoom level | extent Extent for map view center Coordinates for map center zoom Zoom level ================================================================================ ## 32. MapStatusView Class # MapStatusView ## MapStatusView Represents the current state of the map, including position, zoom level, available layer collections, images, and the visible collection. ### Extends - BaseObject ### Classes **MapStatusView** # Methods #### # getAvailableLayerCollections() -> {Array.|null} Gets the available layer collections in the map. An array of layer collections, or null if unavailable. null #### # getCenter() -> {Location|null} Gets the current center coordinates of the map. The center coordinates as Location, or null if unavailable. null #### # getExtent() -> {Array.|null} Gets the current map extent. The map extent as [minX, minY, maxX, maxY], or null if unavailable. null #### # getImages() -> {Array.|null} Gets the images currently loaded on the map. An array of image objects, or null if unavailable. null #### # getMapStatus() -> {MapStatus|null} Gets the current map status. The map status. #### # getVisibleCollection() -> {CollectionStatus|null} Gets the currently visible collection. The visible collection object, or null if unavailable. null #### # getZoom() -> {number|null} Gets the current zoom level of the map. The zoom level, or null if unavailable. null ================================================================================ ## 33. Measure Class # Measure ## Measure Measure object that extends from Feature. Learn more about Measurements in our 2D mode and 3D mode tutorials. - Measure#event:FEATURE_CLICK - Feature#event:FEATURE_CLICK - Measure#event:FEATURE_HOVER - Feature#event:FEATURE_HOVER ### Extends - Feature ### Classes **Measure** # Methods #### # clone() -> {Measure} Clone this feature. If the original feature has a geometry it is also cloned. **Overrides:** : Feature#clone - Feature#clone The clone. #### # get(key) -> {any} Gets a value | Name | Type | Description | | --- | --- | --- | | key | string | | key **Overrides:** : Feature#get - Feature#get #### # getBoundingBox() -> {Extent} Get extent/bounding box for feature geometry in geographic coordinates [minx, miny, maxx, maxy] **Overrides:** : Feature#getBoundingBox - Feature#getBoundingBox bounding box #### # getGeometry() -> {Geometry} Get the feature's default geometry **Overrides:** : Feature#getGeometry - Feature#getGeometry The geometry for the feature. #### # getKeys() -> {Array.} Get a list of object property names. **Overrides:** : Feature#getKeys - Feature#getKeys List of property names. #### # getMeasurementInfo() -> {Measure~Data} Get all measurement info for this measure measurement info for this shape #### # getProperties() -> {Object.} Get an object of all property names and values. **Overrides:** : Feature#getProperties - Feature#getProperties Object. #### # getStyle() -> {Style} Get the feature's style **Overrides:** : Feature#getStyle - Feature#getStyle The feature style. #### # getType() -> {string} Return type of measure the values could be some of this ViewMode ViewMode #### # set(key, value) Sets a value. | Name | Type | Description | | --- | --- | --- | | key | string | Key name. | | value | any | Value. | key Key name. value Value. **Overrides:** : Feature#set - Feature#set #### # setGeometry(geometry) Set the default geometry for the feature. | Name | Type | Description | | --- | --- | --- | | geometry | Geometry | The new geometry. | geometry The new geometry. **Overrides:** : Feature#setGeometry - Feature#setGeometry #### # setProperties(values) Sets a collection of key-value pairs. Note that this changes any existing properties and adds new ones (it does not remove any existing properties). | Name | Type | Description | | --- | --- | --- | | values | Object. | Values. | values Values. **Overrides:** : Feature#setProperties - Feature#setProperties #### # setStyle(styleopt) Set the style for the feature to override the layer style. This can be a single style object, an array of styles, or a function that takes a resolution and returns an array of styles. To unset the feature style, call setStyle() without arguments or a falsey value. setStyle() | Name | Type | Attributes | Description | | --- | --- | --- | --- | | style | Style | | Style for this feature. | style Style for this feature. **Overrides:** : Feature#setStyle - Feature#setStyle #### # toGeoJSON() -> {string} Convert feature geometry to GeoJSON string with xy coordinates [long, lat] **Overrides:** : Feature#toGeoJSON - Feature#toGeoJSON #### # toWKT() -> {string} Convert feature geometry to WKT string with xy coordinates [long, lat] **Overrides:** : Feature#toWKT - Feature#toWKT # Events #### # FEATURE_CLICK Event triggered when measure receives a click | Name | Type | Description | | --- | --- | --- | | location | Location | Location with the coordinates for this event | | measure | Measure | Measure clicked | | layer | VectorLayer | Layer for this feature | location Location with the coordinates for this event measure Measure clicked layer Layer for this feature **Overrides:** : Feature#event:FEATURE_CLICK - Feature#event:FEATURE_CLICK #### # FEATURE_HOVER Event triggered when hovering over a measure | Name | Type | Description | | --- | --- | --- | | location | Location | Location with the coordinates for this event | | layer | VectorLayer | Layer for this feature | | hover | boolean | If the feature it's hover or not. False it's triggered when pointer not intersect when the geometry | location Location with the coordinates for this event layer Layer for this feature hover If the feature it's hover or not. False it's triggered when pointer not intersect when the geometry **Overrides:** : Feature#event:FEATURE_HOVER - Feature#event:FEATURE_HOVER ================================================================================ ## 34. MeasurementManager Class # MeasurementManager ## MeasurementManager The Measurement Manager class handles measurement logic. Use this class to change measurement units from feet to meters, enable tooltips, and activate/deactivate specific tools. ### Classes **MeasurementManager** # Methods #### # activate(tool) Activates specified tool | Name | Type | Description | | --- | --- | --- | | tool | MeasurementTools | tool to activate | tool tool to activate **See:** : MeasurementTools - MeasurementTools #### # changeAreaUnits(unit) Sets the area units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | AreaUnits | Imperial or metric value from AreaUnits | unit Imperial or metric value from AreaUnits **See:** : AreaUnits - AreaUnits #### # changeLengthUnits(unit) Sets the length units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | LengthUnits | Imperial or metric value from LengthUnits | unit Imperial or metric value from LengthUnits **See:** : LengthUnits - LengthUnits #### # changeMeasureUnits(system) Changes measurement system for tools. Changing measurement system will automatically choose the most appropriate measurement unit for each measurement. | Name | Type | Description | | --- | --- | --- | | system | MeasureSystem | Imperial or metric value from MeasureSystem | system Imperial or metric value from MeasureSystem **See:** : MeasureSystem - MeasureSystem #### # changeSlopeUnits(unit) Sets the slope units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | SolpeUnits | Imperial or metric value from SlopeUnits | unit Imperial or metric value from SlopeUnits **See:** : SlopeUnits - SlopeUnits #### # clear() Clear all features #### # deactivate(tool) Deactivates specified tool | Name | Type | Description | | --- | --- | --- | | tool | MeasurementTools | tool to deactivate | tool tool to deactivate **See:** : MeasurementTools - MeasurementTools #### # disableAreaTooltips() Hides measurement area tooltips #### # disableLengthTooltips() Hides measurement length tooltips #### # disableSlopeTooltips() Hides measurement slope tooltips #### # disableTooltips() Hides measurement tooltips #### # enableAreaTooltips() Shows measurement area tooltips #### # enableLengthTooltips() Shows measurement length tooltips #### # enableSlopeTooltips() Shows measurement slope tooltips #### # enableTooltips() Shows measurement tooltips #### # getDrawingLayer() -> {VectorLayer} Returns the vector layer used for vector drawing. Drawing layer #### # getMeasurementLayer() -> {GroupLayer} Returns the vector layer used for make and save measurements. Measurement Layer #### # toggleEdit() Toggles Edit Mode for measurement tools ================================================================================ ## 36. MultiPolygon Class # MultiPolygon ## MultiPolygon(polygons) The MultiPolygon class allows you to group polygons and complete complex calculations over a larger area. Learn more about how to implement the MultiPolygon class in our MultiPolygon tutorial #### # new MultiPolygon(polygons) | Name | Type | Description | | --- | --- | --- | | polygons | Array.>> | Coordinates. | polygons Coordinates. **Tutorials:** : MultiPolygon - MultiPolygon Create simple MultiPolygon const polygon = new Vexcel.Geometry.MultiPolygon([ [ [ new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375), new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375), new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625), new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375), ] ], [ [ new Vexcel.Geometry.Location(35.737595151747826, -115.224609375), new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875), new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875), new Vexcel.Geometry.Location(35.737595151747826, -115.224609375), ], ], ]); const polygon = new Vexcel.Geometry.MultiPolygon([ [ [ new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375), new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375), new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625), new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375), ] ], [ [ new Vexcel.Geometry.Location(35.737595151747826, -115.224609375), new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875), new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875), new Vexcel.Geometry.Location(35.737595151747826, -115.224609375), ], ], ]); ### Classes **MultiPolygon** # Methods #### # clone() -> (non-null) {MultiPolygon} Make a complete copy of the geometry. Clone #### # getArea() -> {number} Get the area of the multipolygon on projected plane. Area (on projected plane). #### # getLocations() -> {Array.>>} Return array of Location array of Location object with latitude and longitude #### # getType() -> {object} Get the type of this geometry. Geometry type. #### # setLocations(polygons) Update polygons | Name | Type | Description | | --- | --- | --- | | polygons | Array.>> | Array of Array of array locations (rings) Location objects Array of linear rings that define the polygon. The first linear ring of the array defines the outer-boundary or surface of the polygon. Each subsequent linear ring defines a hole in the surface of the polygon. A linear ring is an array of vertices' coordinates where the first coordinate and the last are equivalent. | polygons Array of Array of array locations (rings) Location objects Array of linear rings that define the polygon. The first linear ring of the array defines the outer-boundary or surface of the polygon. Each subsequent linear ring defines a hole in the surface of the polygon. A linear ring is an array of vertices' coordinates where the first coordinate and the last are equivalent. #### # toGeoJSON() -> {string} Convert geometry to GeoJSON string with xy coordinates [long, lat] #### # toWKT() -> {string} Convert geometry to WKT string with xy coordinates [long, lat] ================================================================================ ## 37. OSMLayer Class # OSMLayer ## OSMLayer(opts) Layer for the OpenStreetMap tile server. #### # new OSMLayer(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | OSM layer options. | | name | string | | | Layer name | | order | number | | | The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. | | visible | boolean | | true | Visibility | | opacity | number | | 1 | Opacity (0, 1). | opts OSM layer options. name Layer name order The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. visible Visibility opacity Opacity (0, 1). - LayerEvents#event:VISIBILITY_CHANGE Create empty layer const layer = new Vexcel.Layers.OSMLayer(); const layer = new Vexcel.Layers.OSMLayer(); ### Extends - BaseLayer ### Classes **OSMLayer** # Methods #### # getMaxZoom() -> {number} Gets the maximum zoom level of the layer. **Overrides:** : BaseLayer#getMaxZoom - BaseLayer#getMaxZoom The maximum zoom level of the layer. #### # getMinZoom() -> {number} Gets the minimum zoom level of the layer. **Overrides:** : BaseLayer#getMinZoom - BaseLayer#getMinZoom The minimum zoom level of the layer. #### # getOpacity() -> {number} Gets the opacity of the layer (between 0 and 1). **Overrides:** : BaseLayer#getOpacity - BaseLayer#getOpacity The opacity of the layer. #### # getVisible() -> {boolean} Gets the visibility of the layer (true or false). true false **Overrides:** : BaseLayer#getVisible - BaseLayer#getVisible The visibility of the layer. #### # setMaxZoom(maxZoom) Sets the maximum zoom (exclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | maxZoom | number | The maximum zoom of the layer. | maxZoom The maximum zoom of the layer. **Overrides:** : BaseLayer#setMaxZoom - BaseLayer#setMaxZoom #### # setMinZoom(minZoom) Sets the minimum zoom (inclusive) at which the layer is visible. Note that the zoom levels for layer visibility are based on the view zoom level, which may be different from a tile source zoom level. | Name | Type | Description | | --- | --- | --- | | minZoom | number | The minimum zoom of the layer. | minZoom The minimum zoom of the layer. **Overrides:** : BaseLayer#setMinZoom - BaseLayer#setMinZoom #### # setOpacity(opacity) Sets the opacity of the layer, allowed values range from 0 to 1. | Name | Type | Description | | --- | --- | --- | | opacity | number | The opacity of the layer. | opacity The opacity of the layer. **Overrides:** : BaseLayer#setOpacity - BaseLayer#setOpacity #### # setVisible(visible) Sets the visibility of the layer (true or false). true false | Name | Type | Description | | --- | --- | --- | | visible | boolean | The visibility of the layer. | visible The visibility of the layer. **Overrides:** : BaseLayer#setVisible - BaseLayer#setVisible ================================================================================ ## 38. OverlayManager Class # OverlayManager ## OverlayManager The Overlay Manager class provides interaction with the map's layers and allows you to add, remove, or find layers as needed. ### Classes **OverlayManager** # Methods #### # addLayer(layer) Adds the given layer to the map. This layer will display on top of any existing layers. | Name | Type | Description | | --- | --- | --- | | layer | BaseLayer | Layer to add | layer Layer to add #### # addLayers(layers) Adds the given layers to the map. Added layers will display on top of any existing layers. | Name | Type | Description | | --- | --- | --- | | layers | Array. | Array of layers to add | layers Array of layers to add #### # getDrawingLayer() -> {VectorLayer} Returns the vector layer used for vector drawing. Drawing layer #### # getLayerById(id) -> {BaseLayer} Gets the layer with the same id as the specified in the 'id' parameter. | Name | Type | Description | | --- | --- | --- | | id | number | The id of the layer to be returned. | id The id of the layer to be returned. Layer #### # getLayers() -> {Array.} Retrieves an array with all layers of the map. Array of layers #### # getMarkerLayer() -> {VectorLayer} Returns the vector layer used for showing markers #### # removeLayer(layer) Removes the given layer from the map. | Name | Type | Description | | --- | --- | --- | | layer | BaseLayer | Layer to remove | layer Layer to remove #### # removeLayers(layers) Removes the given layers from the map. | Name | Type | Description | | --- | --- | --- | | layers | Array. | Layers to remove | layers Layers to remove ================================================================================ ## 39. Point Class # Point ## Point(location) The Point class allows you to add points to your map. Learn more about how to implement the Point class in our Point tutorial. #### # new Point(location) | Name | Type | Description | | --- | --- | --- | | location | Location | Location object. | location Location object. **Tutorials:** : Point - Point Create simple point const point = new Vexcel.Geometry.Point( new Vexcel.Geometry.Location(33.34902669028525,-86.09930716682985) ); const point = new Vexcel.Geometry.Point( new Vexcel.Geometry.Location(33.34902669028525,-86.09930716682985) ); ### Classes **Point** # Methods #### # clone() -> (non-null) {Point} Make a complete copy of the geometry. Clone. #### # getLocation() -> {Location} Return Location object location object with latitude and longitude #### # getLocations() -> {Array.} Return array of Location array with location object with latitude and longitude #### # getType() -> {object} Get the type of this geometry. Geometry type. #### # setLocation(location) Update location coordinates | Name | Type | Description | | --- | --- | --- | | location | Location | Location object. | location Location object. #### # toGeoJSON() -> {string} Convert geometry to GeoJSON string with xy coordinates [long, lat] #### # toWKT() -> {string} Convert geometry to WKT string with xy coordinates [long, lat] ================================================================================ ## 40. PointTool Class # PointTool ## PointTool Measurement tool to draw points. Learn more about our Point Tool in our 2D mode and 3D mode tutorials. ### Classes **PointTool** # Methods #### # activate() This method activate the tool and you can start to draw a polygon #### # cancel() This method cancel the current measure #### # changeTooltipsVisibility(visible) Change visibility for measurement tooltips | Name | Type | Description | | --- | --- | --- | | visible | boolean | boolean | visible boolean #### # clear() This method clears all measurements of this tool. #### # deactivate() This method deactivate the tool #### # disableEdit() This method disable de edit mode for this tool #### # enableEdit() This method enable de edit mode for this tool ================================================================================ ## 41. Polygon Class # Polygon ## Polygon(rings) The polygon class contains logic relating to polygons. A polygon is an area defined by a closed ring of locations. A simple polygon consists of an array of Location objects that form a boundary. This is useful for showing an area of interest on a map. In some applications there may be a need to for more complex polygons, such as polygons that have a hole in them. The first array of locations in a polygon represent the main border and is often called the exterior ring. All additional arrays of locations in a polygon are used to represent holes in the main polygon and are often called interior rings. When creating a polygon at least one array of Location objects must be passed as an argument to the constructor. An array of Location arrays can be passed in when creating complex polygons. Learn more about how to implement polygons in our Polygon tutorial. #### # new Polygon(rings) | Name | Type | Description | | --- | --- | --- | | rings | Array.> | Array of array locations (rings) Location objects Array of linear rings that define the polygon. The first linear ring of the array defines the outer-boundary or surface of the polygon. Each subsequent linear ring defines a hole in the surface of the polygon. A linear ring is an array of vertices' coordinates where the first coordinate and the last are equivalent. | rings Array of array locations (rings) Location objects Array of linear rings that define the polygon. The first linear ring of the array defines the outer-boundary or surface of the polygon. Each subsequent linear ring defines a hole in the surface of the polygon. A linear ring is an array of vertices' coordinates where the first coordinate and the last are equivalent. **Tutorials:** : Polygon - Polygon Create simple Polygon const polygon = new Vexcel.Geometry.Polygon([ [ new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875), new Vexcel.Geometry.Location(32.36140331527543, -82.529296875), new Vexcel.Geometry.Location(33.87041555094183, -82.529296875), new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875), new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875), ] ]); const polygon = new Vexcel.Geometry.Polygon([ [ new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875), new Vexcel.Geometry.Location(32.36140331527543, -82.529296875), new Vexcel.Geometry.Location(33.87041555094183, -82.529296875), new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875), new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875), ] ]); ### Classes **Polygon** # Methods #### # clone() -> (non-null) {Polygon} Make a complete copy of the polygon. Clone. #### # getArea() -> {number} Return the area of the polygon on projected plane. Area (on projected plane). #### # getLocations() -> {Array.>} Return array of Location array with location object with latitude and longitude #### # setLocations(rings) Update polygon rings | Name | Type | Description | | --- | --- | --- | | rings | Array.> | Array of array locations (rings) Location objects Array of linear rings that define the polygon. The first linear ring of the array defines the outer-boundary or surface of the polygon. Each subsequent linear ring defines a hole in the surface of the polygon. A linear ring is an array of vertices' coordinates where the first coordinate and the last are equivalent. | rings Array of array locations (rings) Location objects Array of linear rings that define the polygon. The first linear ring of the array defines the outer-boundary or surface of the polygon. Each subsequent linear ring defines a hole in the surface of the polygon. A linear ring is an array of vertices' coordinates where the first coordinate and the last are equivalent. #### # toGeoJSON() -> {string} Convert geometry to GeoJSON string with xy coordinates [long, lat] #### # toWKT() -> {string} Convert geometry to WKT string with xy coordinates [long, lat] ================================================================================ ## 42. PolygonTool Class # PolygonTool ## PolygonTool Measurement tool to draw polygons. - Learn more about our Polygon Tool in our 2D mode and 3D mode tutorials. ### Classes **PolygonTool** # Methods #### # activate() This method activate the tool and you can start to draw a polygon #### # cancel() This method cancel the current measure #### # changeAreaUnits(unit) Sets the area units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | AreaUnits | Imperial or metric value from AreaUnits AreaUnits | unit Imperial or metric value from AreaUnits AreaUnits **See:** : AreaUnits - AreaUnits #### # changeLengthUnits(unit) Sets the length units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | LengthUnits | Imperial or metric value from LengthUnits | unit Imperial or metric value from LengthUnits **See:** : LengthUnits - LengthUnits #### # changeSlopeUnits(unit) Sets the slope units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | SlopeUnits | Imperial or metric value from SlopeUnits | unit Imperial or metric value from SlopeUnits **See:** : SlopeUnits - SlopeUnits #### # changeTooltipsVisibility(visible) Change visibility for measurement tooltips | Name | Type | Description | | --- | --- | --- | | visible | boolean | boolean | visible boolean #### # clear() This method clears all measurements of this tool. #### # deactivate() This method deactivate the tool #### # disableEdit() This method disable de edit mode for this tool #### # enableEdit() This method enable de edit mode for this tool ================================================================================ ## 43. RectangleTool Class # RectangleTool ## RectangleTool Measurement tool to draw Rectangles. - Learn more about our Rectangle Tool in our 2D mode and 3D mode tutorials. ### Classes **RectangleTool** # Methods #### # activate() This method activate the tool and you can start to draw a rectangle #### # cancel() This method cancel the current measure #### # changeAreaUnits(unit) Sets the area units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | AreaUnits | Imperial or metric value from AreaUnits AreaUnits | unit Imperial or metric value from AreaUnits AreaUnits **See:** : AreaUnits - AreaUnits #### # changeLengthUnits(unit) Sets the length units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | LengthUnits | Imperial or metric value from LengthUnits | unit Imperial or metric value from LengthUnits **See:** : LengthUnits - LengthUnits #### # changeSlopeUnits(unit) Sets the slope units to be shown by the tool. | Name | Type | Description | | --- | --- | --- | | unit | SlopeUnits | Imperial or metric value from SlopeUnits | unit Imperial or metric value from SlopeUnits **See:** : SlopeUnits - SlopeUnits #### # changeTooltipsVisibility(visible) Change visibility for measurement tooltips | Name | Type | Description | | --- | --- | --- | | visible | boolean | boolean | visible boolean #### # clear() This method clears all measurements of this tool. #### # deactivate() This method deactivate the tool #### # disableEdit() This method disable de edit mode for this tool #### # enableEdit() This method enable de edit mode for this tool ================================================================================ ## 44. RegularShape Class # RegularShape ## RegularShape(opts) Set regular shape style for vector features. The resulting shape will be a regular polygon when radius is provided, or a star when radius1 and radius2 are provided. Learn more about implementing regular shape style in our Point shapes styles tutorial. #### # new RegularShape(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Options | | fill | Fill | | | Fill style. | | points | number | | | Number of points for stars and regular polygons. In case of a polygon, the number of points is the number of sides. | | radius | number | | | Radius of a regular polygon. | | radius1 | number | | | Outer radius of a star. | | radius2 | number | | | Inner radius of a star. | | angle | number | | 0 | Shape's angle in radians. A value of 0 will have one of the shape's point facing up. | | displacement | Array. | | [0,0] | Displacement of the shape | | stroke | stroke | | | Stroke style. | | rotation | number | | 0 | Rotation in radians (positive rotation clockwise). | | rotateWithView | boolean | | false | Whether to rotate the shape with the view. | | scale | number | | 1 | Scale. Unless two dimensional scaling is required a better result may be obtained with appropriate settings for radius, radius1 and radius2. | opts Options fill Fill style. points Number of points for stars and regular polygons. In case of a polygon, the number of points is the number of sides. radius Radius of a regular polygon. radius1 Outer radius of a star. radius2 Inner radius of a star. angle Shape's angle in radians. A value of 0 will have one of the shape's point facing up. displacement Displacement of the shape stroke Stroke style. rotation Rotation in radians (positive rotation clockwise). rotateWithView Whether to rotate the shape with the view. scale Scale. Unless two dimensional scaling is required a better result may be obtained with appropriate settings for radius, radius1 and radius2. radius radius1 radius2 **Tutorials:** : Point shapes styles - Point shapes styles ### Classes **RegularShape** # Methods #### # getAnchor() -> {Array.} Get the anchor point in pixels. The anchor determines the center point for the symbolizer. Anchor. #### # getAngle() -> {number} Get the angle used in generating the shape. Shape's rotation in radians. #### # getDisplacement() -> {Array.} Get the displacement of the shape Shape's center displacement #### # getFill() -> {Fill} Get the fill style for the shape. Fill style. #### # getOpacity() -> {number} Get the symbolizer opacity. Opacity. #### # getPoints() -> {number} Get the number of points for generating the shape. Number of points for stars and regular polygons. #### # getRadius() -> {number} Get the (primary) radius for the shape. Radius. #### # getRadius2() -> {number|undefined} Get the secondary radius for the shape. Radius2. #### # getRotateWithView() -> {boolean} Determine whether the symbolizer rotates with the map. Rotate with map. #### # getRotation() -> {number} Get the symoblizer rotation. Rotation. #### # getScale() -> {number} Get the symbolizer scale. Scale. #### # getSize() -> {number} Get the size of the symbolizer (in pixels). Size. #### # getStroke() -> {Stroke} Get the stroke style for the shape. Stroke style. #### # setFill(fill) Set the fill style. | Name | Type | Description | | --- | --- | --- | | fill | Fill | | fill #### # setOpacity(opacity) Set the opacity. | Name | Type | Description | | --- | --- | --- | | opacity | number | Opacity. | opacity Opacity. #### # setRotateWithView(rotateWithView) Set whether to rotate the style with the view. | Name | Type | Description | | --- | --- | --- | | rotateWithView | boolean | Rotate with map. | rotateWithView Rotate with map. #### # setRotation(rotation) Set the rotation. | Name | Type | Description | | --- | --- | --- | | rotation | number | Rotation. | rotation Rotation. #### # setScale(scale) Set the scale. | Name | Type | Description | | --- | --- | --- | | scale | number | Scale. | scale Scale. ================================================================================ ## 45. RelativeHeightTool Class # RelativeHeightTool ## RelativeHeightTool Measurement tool to draw height. Learn more about our Relative Height Tool in our 3D mode tutorials. ### Classes **RelativeHeightTool** # Methods #### # activate() This method activate the tool and you can start to draw a polygon #### # cancel() This method cancel the current measure #### # changeTooltipsVisibility(visible) Change visibility for measurement tooltips | Name | Type | Description | | --- | --- | --- | | visible | boolean | boolean | visible boolean #### # clear() This method clears all measurements of this tool. #### # deactivate() This method deactivate the tool ================================================================================ ## 47. Stroke Class # Stroke ## Stroke(opts) Set stroke style for vector features. Note that the defaults given are the Canvas defaults, which will be used if option is not defined. The get functions return whatever was entered in the options; they will not return the default. Learn more about implementing stroke styles in our Polygon styles, Point styles, Point shapes styles, Feature styles, and Text styles tutorials #### # new Stroke(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Stroke layer options. | | color | object | | null | A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. | | width | number | | | Width | opts Stroke layer options. color A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. width Width **Tutorials:** : Polygon styles Point styles Point shapes styles Feature styles Text styles - Polygon styles - Point styles - Point shapes styles - Feature styles - Text styles ### Classes **Stroke** # Methods #### # getColor() -> {string} Get the stroke color. A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. #### # getWidth() -> {number} Get the stroke width. Width. #### # setColor(color) Set the color. | Name | Type | Description | | --- | --- | --- | | color | string | A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. | color A color definition "rgba(red, green, blue, alpha)", "rgb(red, green, blue)" and "#FFFFFF" format supported. #### # setWidth(width) Set the width. | Name | Type | Description | | --- | --- | --- | | width | number | Width. | width Width. ================================================================================ ## 48. Style Class # Style ## Style(opts) Container for vector feature rendering styles. Any changes made to the style or its children through set*() methods will not take effect until the feature or layer that uses the style is re-rendered. Learn more about implementing styles in our Polygon styles, Point styles, Point shapes styles, Feature styles, and Text styles tutorials. #### # new Style(opts) Initialization object | Name | Type | Attributes | Description | | --- | --- | --- | --- | | opts | object | | Tile layer options. | | fill | Fill | | Fill style. | | stroke | Stroke | | Stroke style | | image | Image | | Image style | | text | Text | | Text style | opts Tile layer options. fill Fill style. stroke Stroke style image Image style text Text style **Tutorials:** : Polygon styles Point styles Point shapes styles Feature styles Text styles - Polygon styles - Point styles - Point shapes styles - Feature styles - Text styles ### Classes **Style** # Methods #### # getFill() -> {Fill} Get the fill style. #### # getImage() -> {Image} Get the image style #### # getStroke() -> {Stroke} #### # getText() -> {Text} Get text style #### # setFill(fill) Set the fill style. | Name | Type | Description | | --- | --- | --- | | fill | Fill | | fill #### # setImage(image) Set the image style | Name | Type | Description | | --- | --- | --- | | image | Image | | image #### # setStroke(stroke) Set the stroke style | Name | Type | Description | | --- | --- | --- | | stroke | Stroke | | stroke #### # setText(text) Set text style | Name | Type | Description | | --- | --- | --- | | text | Text | | text ================================================================================ ## 49. Swipe Class # Swipe ## Swipe(opts) It is a control that adds a split screen to compare two map overlays. Layers can be added to left (top) or right (bottom) side of the map. Layers that are not added are displayed on both sides #### # new Swipe(opts) Constructor options | Name | Type | Attributes | Description | | --- | --- | --- | --- | | opts | object | | Control options | | layers | BaseLayer | | layer to swipe | | rightLayer | ol.layer | | layer to swipe on right side | | className | string | | control class name | | position | number | | position propertie of the swipe [0,1], default 0.5 | | orientation | string | | orientation properties (vertical|horizontal), default vertical | opts Control options layers layer to swipe rightLayer layer to swipe on right side className control class name position position propertie of the swipe [0,1], default 0.5 orientation orientation properties (vertical|horizontal), default vertical **Tutorials:** : control-swipe - control-swipe ### Classes **Swipe** ================================================================================ ## 50. Text Class # Text ## Text(opts) Set text style for vector features. Learn more about implementing text styles in our Feature styles and Text styles tutorials. #### # new Text(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Options | | font | string | | | Font style as CSS 'font' value, see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is '10px sans-serif' | | maxAngle | number | | Math.PI/4 | When placement is set to 'line', allow a maximum angle between adjacent characters. The expected value is in radians, and the default is 45° (Math.PI / 4). | | offsetX | number | | 0 | Horizontal text offset in pixels. A positive will shift the text right. | | offsetY | number | | 0 | Vertical text offset in pixels. A positive will shift the text down. | | overflow | boolean | | false | For polygon labels or when placement is set to 'line', allow text to exceed the width of the polygon at the label position or the length of the path that it follows. | | placement | string | | 'point' | Text placement. | | scale | number | | | Scale. | | rotateWithView | boolean | | false | Whether to rotate the text with the view. | | rotation | number | | 0 | Rotation in radians (positive rotation clockwise). | | text | string | | | Text content. | | textAlign | string | | | Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'. Default is 'center' for placement: 'point'. For placement: 'line', the default is to let the renderer choose a placement where maxAngle is not exceeded. | | textBaseline | string | | 'middle' | Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'. | | fill | Fill | | | Fill style. If none is provided, we'll use a dark fill-style (#333). | | stroke | Stroke | | | Stroke style. | | backgroundFill | Fill | | | Fill style for the text background when placement is 'point'. Default is no fill. | | backgroundStroke | Stroke | | | Stroke style for the text background when placement is 'point'. Default is no stroke. | | padding | Array. | | [0, 0, 0, 0] | Padding in pixels around the text for decluttering and background. The order of values in the array is [top, right, bottom, left]. | opts Options font Font style as CSS 'font' value, see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is '10px sans-serif' maxAngle When placement is set to 'line', allow a maximum angle between adjacent characters. The expected value is in radians, and the default is 45° (Math.PI / 4). placement 'line' Math.PI / 4 offsetX Horizontal text offset in pixels. A positive will shift the text right. offsetY Vertical text offset in pixels. A positive will shift the text down. overflow For polygon labels or when placement is set to 'line', allow text to exceed the width of the polygon at the label position or the length of the path that it follows. placement 'line' placement Text placement. scale Scale. rotateWithView Whether to rotate the text with the view. rotation Rotation in radians (positive rotation clockwise). text Text content. textAlign Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'. Default is 'center' for placement: 'point'. For placement: 'line', the default is to let the renderer choose a placement where maxAngle is not exceeded. placement: 'point' placement: 'line' maxAngle textBaseline Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'. fill Fill style. If none is provided, we'll use a dark fill-style (#333). stroke Stroke style. backgroundFill Fill style for the text background when placement is 'point'. Default is no fill. placement 'point' backgroundStroke Stroke style for the text background when placement is 'point'. Default is no stroke. placement 'point' padding Padding in pixels around the text for decluttering and background. The order of values in the array is [top, right, bottom, left]. [top, right, bottom, left] **Tutorials:** : Feature styles Text styles - Feature styles - Text styles ### Classes **Text** ================================================================================ ## 51. Toggle Class # Toggle ## Toggle(opts) A simple toggle control. The control can be created with an interaction to control its activation. #### # new Toggle(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | Button options. | | className | string | | | class of the control | | title | number | | | title of the control | | html | number | | | html to insert in the control | | active | boolean | | false | the control is created active, default false | | disable | boolean | | false | the control is created disabled, default false | | bar | Bar | | | a subbar associated with the control (drawn when active if control is nested in a Bar) | | onToggle | function | | | callback when control is clicked (or use change:active event) | opts Button options. className class of the control title title of the control html html to insert in the control active the control is created active, default false disable the control is created disabled, default false bar a subbar associated with the control (drawn when active if control is nested in a Bar) onToggle callback when control is clicked (or use change:active event) **Tutorials:** : Map Toggle - Map Toggle ### Classes **Toggle** ================================================================================ ## 52. Transform Class # Transform ## Transform() This class takes either lat/long/zoom or xyz coordinates and transforms the coordinates to the other type. #### # new Transform() Transforms Lat/Long/Zoom coordinates to X/Y/Z coordinates or X/Y/Z to Lat/Long/Zoom const transform = new Vexcel.Utils.Transform([34,-111,5]); const transform = new Vexcel.Utils.Transform([34,-111,5]); ### Classes **Transform** # Methods #### # static locationToTile(location, zoom) -> {Array.} Transforms location to tile coordinates | Name | Type | Description | | --- | --- | --- | | location | Location | Location object | | zoom | number | zoom level for tile coordinate | location Location object zoom zoom level for tile coordinate [x,y,z] tile coordinate #### # static tileToLocation(z, x, y) -> {Location} Convert tile coordinate to Location | Name | Type | Description | | --- | --- | --- | | z | number | zoom level | | x | number | x tile coordinate | | y | number | x tile coordinate | z zoom level x x tile coordinate y x tile coordinate ================================================================================ ## 53. UserService Class # UserService ## UserService() Service to get info for users to initialize the map properly Learn more about the User Service in our Init with username/password and start-maps tutorials. #### # new UserService() ### Classes **UserService** # Methods #### # getMaps(token, versionopt) -> {Array.} Retrieves maps available for a user. | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | token | string | | | The user's authentication token. | | version | string | null | | null | The expected map version. If omitted, all maps are returned. Should be a value from MapVersion | token The user's authentication token. version The expected map version. If omitted, all maps are returned. Should be a value from MapVersion - An array of map instances. #### # getUserInfo(username, password, mapVersionopt, applicationopt) -> {UserService~UserInfo} Retrieves user information based on the provided credentials. Additionally, it returns the list of maps associated with the user. | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | username | string | | | The username of the user. | | password | string | | | The user's password. | | mapVersion | string | null | | null | The map version to request. If not specified, all maps are returned. Should be a value from MapVersion | | application | string | | "map-control" | The application requesting access. | username The username of the user. password The user's password. mapVersion The map version to request. If not specified, all maps are returned. Should be a value from MapVersion application The application requesting access. - The user information. # Type Definitions #### # Map Object with the map data received by the api | Name | Type | Description | | --- | --- | --- | | id | string | identifier for map | | name | string | name for the map | | version | string | version for the map. Should be a value from MapVersion | id identifier for map name name for the map version version for the map. Should be a value from MapVersion #### # UserInfo Object with the user data received by the api | Name | Type | Description | | --- | --- | --- | | username | string | Triggered after the map is moved. | | token | string | key to initialize and authorize this user | | maps | Array. | list of maps allowed for this user | username Triggered after the map is moved. token key to initialize and authorize this user maps list of maps allowed for this user ================================================================================ ## 54. VectorLayer Class # VectorLayer ## VectorLayer(opts) Layer for Vector data that is rendered client-side. Learn more about Vector Layers in our Vector Layer tutorial. #### # new VectorLayer(opts) Initialization object | Name | Type | Attributes | Default | Description | | --- | --- | --- | --- | --- | | opts | object | | | WFS layer options | | name | string | | | Layer name | | order | number | | | The order for layer rendering. At rendering time, the layers will be ordered, first by order and then by position. When undefined, a order of 0 is assumed for layers that are added to the map's layers collection. | | visible | boolean | | true | Visibility | | opacity | number | | 1 | Opacity (0, 1). | | features | Array. | | | Feature list, the geometry of the features must be on geographic coordinates | | style | Array.
### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, initialConfig: { overlays: { visible: [], }, imageryLayers: { visible: [], }, callback: () => { const hello = new Vexcel.Control.Button({ html: '', title: "Hello world!", handleClick: () => { alert("hello World!"); }, }); const location = new Vexcel.Control.Button({ html: '', title: "Map location", handleClick: () => { alert(`Center: ${map.getLocation().toString()}`); }, }); const mainbar = new Vexcel.Control.Bar(); map.addControl(mainbar); mainbar.setPosition("top-right"); mainbar.addControl(hello); mainbar.addControl(location); const group = new Vexcel.Control.Bar({ toggleOne: true, group: true }); map.addControl(group); group.setPosition("bottom-right"); // Add selection tool (a toggle control with a select interaction) const north = new Vexcel.Control.Toggle({ html: "N", title: "North", active: true, onToggle(active) { if (active) { map .getImageryLayer() .changeOrientation(Vexcel.Constants.MapOrientation.N) .then((response) => { console.log(response.msg); }) .catch((error) => { console.log(error); alert(error); }); } }, }); const south = new Vexcel.Control.Toggle({ html: "S", title: "South", onToggle(active) { if (active) { map .getImageryLayer() .changeOrientation(Vexcel.Constants.MapOrientation.S) .then((response) => { console.log(response.msg); }) .catch((error) => { console.log(error); alert(error); }); } }, }); const east = new Vexcel.Control.Toggle({ html: "E", title: "East", onToggle(active) { if (active) { map .getImageryLayer() .changeOrientation(Vexcel.Constants.MapOrientation.E) .then((response) => { console.log(response.msg); }) .catch((error) => { console.log(error); alert(error); }); } }, }); const west = new Vexcel.Control.Toggle({ html: "W", title: "West", onToggle(active) { if (active) { map .getImageryLayer() .changeOrientation(Vexcel.Constants.MapOrientation.W) .then((response) => { console.log(response.msg); }) .catch((error) => { console.log(error); alert(error); }); } }, }); group.addControl(north); group.addControl(south); group.addControl(east); group.addControl(west); }, }, }); ================================================================================ ## 64. Tutorial control basics Tutorial # Basics This tutorial demonstrates how to implement and use basic map controls in your map application. These fundamental controls allow you to interact with the map by changing its view properties and retrieving information about the current state. You'll learn how to: - Set and get the current zoom level of the map - Set and get the center location of the map - Set and get the extent (visible area) of the map - Retrieve information about the currently visible imagery Those bits are specially useful to build an status panel or to use in conjunction to Vexcel API. #### Zoom control #### Center Controls #### Extent Controls #### Imagery Date #### Classes: - Extent - Location - Map - MapStatusView ### index.html

Zoom control

Center Controls

Extent Controls

Imagery Date

Date:
Collection:
### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, }); map.getMapStatusView().addEventListener(Vexcel.Events.MapEvents.MAP_STATUS, (e) => { const visibleCollection = e.mapStatus.visibleCollection; document.getElementById("date").innerHTML = visibleCollection.firstCaptureDate; document.getElementById("collection").innerHTML = visibleCollection.name; }); function setZoom() { const zoom = document.getElementById("zoomId").value; map.setZoom(zoom); } function getZoom() { alert(`Zoom: ${map.getZoom()}`); } function setLocation() { const latitude = document.getElementById("latitude").value; const longitude = document.getElementById("longitude").value; map.setLocation(new Vexcel.Geometry.Location(latitude, longitude)); } function getLocation() { alert(`Location: ${map.getLocation().toString()}`); } function setExtent() { const minX = parseFloat(document.getElementById("minX").value); const minY = parseFloat(document.getElementById("minY").value); const maxX = parseFloat(document.getElementById("maxX").value); const maxY = parseFloat(document.getElementById("maxY").value); const extent = new Vexcel.Geometry.Extent([minX, minY, maxX, maxY]); map.setViewExtent(extent); } function getExtent() { alert(`Zoom: ${JSON.stringify(map.getViewExtent())}`); } ================================================================================ ## 65. Tutorial control brightness contrast Tutorial # Brightness and Contrast Control This tutorial demonstrates how to implement brightness and contrast controls for your map application. These visual adjustments allow users to customize the appearance of imagery to improve visibility and highlight specific features. You'll learn how to: - Adjust the brightness of the map imagery using slider controls - Modify the contrast of the map imagery using slider controls - Reset brightness and contrast values to their defaults - Update the UI to reflect current brightness and contrast values These controls are particularly useful for enhancing visibility in areas with challenging lighting conditions or when analyzing specific terrain features. The brightness and contrast adjustments are applied in real-time to the map display. #### Classes: - Map ### index.html
100


100
 ### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, }); function updateBrightnessLabel(control) { document.getElementById("brightnessValue").innerText = control.value; } function updateContrastLabel(control) { document.getElementById("contrastValue").innerText = control.value; } function changeBrightness(control) { map.setBrightness(control.value); } function changeContrast(control) { map.setContrast(control.value); } function resetBrightness() { const rangeBrightness = document.getElementById("brightness"); rangeBrightness.value = 100; updateBrightnessLabel(rangeBrightness); changeBrightness(rangeBrightness); } function resetContrast() { const rangeContrast = document.getElementById("contrast"); rangeContrast.value = 100; updateContrastLabel(rangeContrast); changeContrast(rangeContrast); } ================================================================================ ## 66. Tutorial control button Tutorial # Map Button This tutorial demonstrates how to add custom button controls to your map application. Button controls provide an intuitive way for users to trigger specific actions or functions directly from the map interface. You'll learn how to: - Create a custom button control with HTML content - Add click event handlers to perform actions when the button is clicked Custom buttons are particularly useful for adding frequently used functions that users can access without navigating away from the map. They can be used for toggling map features, triggering searches, or displaying additional information. #### Classes: - Button - Map ### index.html
### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, initialConfig: { overlays: { visible: [], }, imageryLayers: { visible: [], }, callback: () => { const hello = new Vexcel.Control.Button({ html: '!', className: "button-hello", title: "Hello world!", handleClick: () => { alert("hello World!"); }, }); map.addControl(hello); }, }, }); ================================================================================ ## 67. Tutorial control layers Tutorial # Layer control This tutorial demonstrates how to implement a layer control (layer switcher) in your map application. The layer control provides a user interface for managing and toggling different map layers, allowing users to customize their map view according to their needs. You'll learn how to: - Enable the built-in layer switcher control - Allow users to toggle visibility of different map layers - Organize layers into categories for easier management - Provide a user-friendly interface for layer selection The layer control is essential for applications that use multiple data layers, allowing users to focus on specific information by showing only the layers relevant to their current task. This improves map readability and enhances the overall user experience. #### Classes: - Map ### index.html
### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, layerSwitcher: true, }); ================================================================================ ## 68. Tutorial control modes Tutorial # Map modes This tutorial demonstrates how to implement mode controls in your map application. Mode controls allow users to switch between different visualization modes, such as 2D and 3D views, providing different perspectives of the same geographic area. You'll learn how to: - Switch between 2D and 3D visualization modes - Implement mode-switching buttons in your user interface Mode controls enhance the user experience by offering different ways to visualize and interact with spatial data. The ability to switch between 2D and 3D views is particularly valuable for applications that require both overview analysis and immersive exploration of terrain features. #### Mode Controls #### Classes: - ImageryLayer - Map ### index.html

Mode Controls

 ### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, zoom: 19, center: [-110.935696, 32.216548], }); function changeMode(mode) { map .getImageryLayer() .changeMode(mode) .then((response) => { console.log(response.msg); if (response.layer) { console.log(`Change to mode ${mode} for layer ${response.layer.getName()}`); } }) .catch((error) => { console.log(error); alert(error); }); } ================================================================================ ## 69. Tutorial control orientation Tutorial # Map orientations This tutorial demonstrates how to implement orientation controls in your map application. Orientation controls allow users to change the viewing perspective of the map, providing different angles and directions from which to view the same geographic area. You'll learn how to: - Switch between different map orientations (Vertical, North, South, East, West) - Implement orientation-switching buttons in your user interface - Handle orientation change responses and errors - Combine orientation controls with mode controls for enhanced visualization Orientation controls are particularly useful for analyzing structures, terrain features, and spatial relationships from multiple perspectives. This capability enhances the user's understanding of the geographic context and improves the overall map exploration experience. #### Mode Controls #### Orientation Controls #### Classes: - ImageryLayer - Map ### index.html

Mode Controls

Orientation Controls

 ### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, zoom: 19, center: [-110.935696, 32.216548], initialConfig: { overlays: { visible: [], }, imageryLayers: { visible: [Vexcel.Constants.VexcelLayers.URBAN], }, callback: () => {}, }, }); function changeMode(mode) { map .getImageryLayer() .changeMode(mode) .then((response) => { console.log(response.msg); if (response.layer) { console.log(`Change to mode ${mode} for layer ${response.layer.getName()}`); } }) .catch((error) => { console.log(error); alert(error); }); } function changeOrientation(orientation) { map .getImageryLayer() .changeOrientation(orientation) .then((response) => { console.log(response.msg); }) .catch((error) => { console.log(error); alert(error); }); } ================================================================================ ## 70. Tutorial control swipe Tutorial # control-swipe Enable zoom control, this allow to zoom in/out ### index.html
### main.js const core = new Vexcel.Map({ target: "map", token: API_KEY, zoomControl: true, }); ================================================================================ ## 71. Tutorial control toggle Tutorial # Map Toggle This tutorial demonstrates how to implement toggle button controls in your map application. Toggle buttons provide an interactive way for users to switch between two states (on/off) and trigger different actions based on the current state. You'll learn how to: - Create a custom toggle button control with HTML content - Style the toggle button to provide visual feedback of its state - Implement event handlers that respond to state changes - Use the toggle state to control map features or functionality Toggle buttons are particularly useful for enabling/disabling map features, activating drawing tools, or switching between different modes of operation. The visual feedback helps users understand the current state of the control and the associated functionality. #### Classes: - Map - Toggle ### index.html
### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, initialConfig: { overlays: { visible: [], }, imageryLayers: { visible: [], }, callback: () => { const toggle = new Vexcel.Control.Toggle({ html: '', class: 'toggle-button', title: "Point", onToggle(active) { alert(`Button is ${active}`); }, }); map.addControl(toggle); }, }, }); ================================================================================ ## 72. Tutorial control vexcel collections find Tutorial # Vexcel find collection This tutorial demonstrates how to find and retrieve Vexcel collections based on geographic criteria in your map application. The CollectionManager provides methods to discover available imagery collections at specific locations or within map extents. You'll learn how to: - Find collections available at a specific map location - Find collections available within a map extent - Access collection information through the CollectionManager - Process and display collection data in your application These capabilities are particularly useful for applications that need to identify available imagery in different geographic areas, provide collection metadata to users, or dynamically load imagery based on the current map view. Understanding collection availability helps create more responsive and informative mapping applications. #### Classes: - CollectionManager - Map - MapStatusView ### index.html
### main.js const API_KEY = "YOUR_KEY"; const map = new Vexcel.Map({ target: "map", token: API_KEY, }); map.getMapStatusView().addEventListener(Vexcel.Events.MapEvents.MAP_STATUS, (e) => { const location = map.getLocation(); const extent = map.getExtent(); const centerProjects = map.getCollectionManager().findCollectionsByLocation(location); const extentProjects = map.getCollectionManager().findCollectionsByExtent(extent); console.log(centerProjects); console.log(extentProjects); }); ================================================================================ ## 73. Tutorial control vexcel image metadata Tutorial # Vexcel image metadata This tutorial demonstrates how to retrieve and display metadata for imagery in your map application. Image metadata provides valuable information about the imagery being displayed, including capture date, resolution, and other properties that can enhance your application's functionality. You'll learn how to: - Access the imagery layer's metadata through the API - Retrieve metadata for the center image in the current view - Display the metadata information in your application - Update metadata information when the map view changes Image metadata is particularly useful for applications that need to provide detailed information about the imagery being displayed, track changes in imagery over time, or make decisions based on image properties. This capability enhances the informational value of your mapping application and provides users with context about what they're viewing. Image Metadata #### Classes: - Image - ImageryLayer - Map ### index.html

Image Metadata


    


    
    
    



### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
 target: "map",
 token: API_KEY,
 zoom: 20,
 center: [-110.935696, 32.216548],
 mapId: 378,
 mode: "3D",
 orientation: "S",
});
map.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
 const metadata = map.getImageryLayer().getCenterImageMetadata();
  document.getElementById("metadata").textContent = metadata ? JSON.stringify(metadata, null, 6) : null;
});


================================================================================



## 74. Tutorial control vexcel infrared

Tutorial
# Vexcel Infrared
This tutorial demonstrates how to implement infrared visualization in your map application. Infrared imagery provides a different perspective of the landscape by showing heat signatures and vegetation health, which can reveal details not visible in standard imagery.
You'll learn how to:
- Enable and disable infrared visualization using checkbox controls
- Implement infrared toggle functionality in your user interface
- Understand the limitations of infrared visualization (2D mode only)
- Access the imagery layer's infrared capabilities through the API
Infrared visualization is particularly valuable for applications focused on environmental monitoring, agriculture, forestry, and disaster assessment. It helps users identify vegetation health, thermal anomalies, and other features that may not be apparent in standard visible-light imagery.
#### Classes:
- ImageryLayer
- Map
### index.html





    
    
    
    



    

    

            

                
                
            

        


    
    




### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
});

document.getElementById("infrared").onchange = function () {
  this.checked ? map.getImageryLayer().enableInfrared() : map.getImageryLayer().disableInfrared();
};



================================================================================



## 75. Tutorial control vexcel integration

Tutorial
# control-vexcel-integration
To learn how to use Vexcel layer
#### Mode Controls
#### Oriented Controls
#### High level Sorting
#### Sources
#### Visibility
#### Low level Sorting
#### Vexcel Layer Controls
#### Collections
#### Images (3d Mode)
### index.html





    
    
    
    


    

     


        
        Map version:
        MultiLayer:
        Aois:
    



    

        

            

                

                    
Mode Controls

                    
                    
                

                

                    
Oriented Controls

                    
                    
                    
                    
                

                

                    
High level Sorting


                    
                

            

            

                

                    
Sources

                    
    
                
    
                
    
                    
    Visibility
    
                    
      
                
      
                
      
                    
      Low level Sorting
      
                    
                
      
            
      
            
      Vexcel Layer Controls
      
            
            
        
      

        
      
            Zoom: 
            
      
                
      
                    
      Collections
      
                    
                    
        
                
        
                
        
                    
        Images (3d Mode)
        
                    
          
                
          
            
          
        
          
    
          

          

### main.js


    const API_KEY = "YOUR_KEY";
    const core = new Vexcel.Map({
      target: "map",
      token: API_KEY,

      center: [-82.36504, 36.31485],
    zoom: 19,
    enableVectorTiles: false,
    layerSwitcher: true,
    aois: true,
    initialConfig: {
      callback: () => {
        this.zoomLevel = core.getZoom();
        document.getElementById("zoom-level").textContent = this.zoomLevel;
        document.getElementById("map-version").textContent = core.getApiVersion();
        document.getElementById("multilayer").textContent = core.getOverlayManager().getVexcelBaseLayer() !== null ? "true": "false";
        document.getElementById("aois").textContent = core.projects ? "true": "false";
        layerManager = core.getOverlayManager();

      },
    });



        // Funciones para cambiar entre los tipos de ordenación
        function changeSortOrder(level) {
          const sortOrder = document.getElementById("sort-order").value;
          layerManager.setVexcelLayerSort(sortOrder, level);
        }

        // Función para alternar el infrarrojo
        function enableInfrared() {
          layerManager.enableInfraredMode();
        }

        function disableInfrared() {
          layerManager.disableInfraredMode();
        }

        // Función para alternar entre colecciones

        // Add a new collection
        function showCollection(collectionName, project) {
          layerManager.showCollection(project);
        }

        // Remove an existing collection
        function removeCollection() {
          layerManager.removeCollection();
        }


        function showImage(imageId, source) {
          core.changeImage(imageId, source);
        }

        function changeMode(mode) {
          core
            .changeMode(mode)
            .then((response) => {
              console.log(response.msg);
              if (response.layer) {
                console.log(`Change to mode ${mode} for layer ${response.layer.getName()}`);
              }
            })
            .catch((error) => {
              console.log(error);
              alert(error);
            });
        }

        function changeOrientation(orientation) {
          core
            .changeOrientation(orientation)
            .then((response) => {
              console.log(response.msg);
            })
            .catch((error) => {
              console.log(error);
              alert(error);
            });
        }


================================================================================



## 76. Tutorial control vexcel layer

Tutorial
# control-vexcel-layer
To learn how to use Vexcel layer
#### Vexcel Layer Controls
#### Layer Sorting
#### Available Sources
### index.html





    
    
    
    


    
          
    
          Vexcel Layer Controls
          
    
    
    
          Manage Collections
          
    
    
    

    
          Layer Sorting
          
    

    
          Sources
          
    
            
    
    
    

            

### main.js


    const API_KEY = "YOUR_KEY";
    const core = new Vexcel.Map({
      target: "map",
      token: API_KEY,
    });


        // Funciones para cambiar entre los tipos de ordenación
        function changeSortOrder() {
          const sortOrder = document.getElementById("sort-order").value;
          overlayManager.setVexcelLayerSort(sortOrder);
        }

        // Función para alternar el infrarrojo
        function enableInfrared() {
          overlayManager.enableInfraredMode();
        }

        function disableInfrared() {
          layerManager.disableInfraredMode();
        }

        // Función para alternar entre colecciones

        // Add a new collection
        function showCollection() {
          const collectionName = document.getElementById("collection-name").value;
          if (!collectionName) {
            alert("Please enter a collection name.");
            return;
          }

          layerManager.showCollection(collectionName);

        }

        // Remove an existing collection
        function removeCollection() {
          const collectionName = document.getElementById("collection-name").value;
          if (!collectionName) {
            alert("Please enter a collection name.");
            return;
          }

          layerManager.showCollection(null);

        }


================================================================================



## 77. Tutorial control vexcel show collection

Tutorial
# Vexcel show collection
This tutorial demonstrates how to implement a collection selector for Vexcel imagery in your map application. Vexcel collections represent different imagery datasets captured at various times, with different sensors, or under specific conditions (like post-disaster imagery).
You'll learn how to:
- Retrieve available imagery collections from the Vexcel platform
- Create a user interface (dropdown menu) to display available collections
- Implement functionality to switch between different collections
- Maintain synchronization between the UI and the currently displayed collection
This functionality is essential for applications that need to provide users with access to different temporal or thematic datasets. For example, it allows users to compare pre and post-disaster imagery, view seasonal changes, or access specialized collections like oblique or infrared imagery. The ability to switch between collections gives your users more flexibility in analyzing and interpreting geographic data.
#### Collection Selector
#### Classes:
- ImageryLayer
- Map
- MapStatusView
### index.html





    
    
    
    


    
            

    

    
    
    

            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  zoom: 17,
  center: [-110.935696, 32.216548],
});

map.getMapStatusView().addEventListener(Vexcel.Events.MapEvents.MAP_STATUS, (e) => {
  this.addCollectionsToSelect(
    e.mapStatus.availableLayerCollections.flatMap((program) => program.collections),
    e.mapStatus.visibleCollection.name
  );
});

function addCollectionsToSelect(collections, selectedValue) {
  const select = document.getElementById("select-collection");
  Array.from(select.options).map((opt) => opt.remove());
  for (let i = 0; i < collections.length; i++) {
    const option = new Option(collections[i].name, collections[i].id);
    if (collections[i].name === selectedValue) {
      option.selected = true;
    }
    select.options[select.options.length] = option;
  }
}

function showCollection() {
  const e = document.getElementById("select-collection");
  map.getImageryLayer().selectCollection(e.value);
}


================================================================================



## 78. Tutorial control zoom

Tutorial
# Zoom control
This tutorial demonstrates how to implement zoom controls in your map application. Zoom controls provide a user-friendly interface for adjusting the map's zoom level, allowing users to easily navigate between overview and detailed views.
You'll learn how to:
- Enable the built-in zoom control buttons
- Allow users to zoom in and out with a familiar interface
- Improve map navigation with standardized controls
- Enhance user experience with intuitive zoom functionality
Zoom controls are essential for any interactive map application, providing users with a simple way to adjust the level of detail shown. This basic navigation feature improves usability and helps users quickly focus on areas of interest at their preferred scale.
#### Classes:
- Map
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  zoomControl: true,
});
      

================================================================================



## 79. Tutorial control

Tutorial
# Controls
Component implementation examples:
- Basic controls
- Map mode control
- Map Orientation control
- Layer control
- Zoom control
- Bar control
- Button control
- Toggle control
- Vexcel get image metadata
- Vexcel layer find collections
- Vexcel layer show collection
- Vexcel layer infrared
- Brightness and Contrast control

================================================================================



## 80. Tutorial geometries features click

Tutorial
# Feature click
This tutorial demonstrates how to implement click event handling for map features in your application. Feature click events allow users to interact with geometric objects on the map, enabling interactive data exploration and information display.
You'll learn how to:
- Create different types of geometric features (points, lines, and polygons)
- Add click event listeners to map features
- Display information when features are clicked using InfoBox
- Organize features in vector layers for better management
Feature click handling is essential for creating interactive maps that respond to user input. This capability allows you to build applications where users can select features to view additional information, trigger actions, or modify data based on geographic context.
#### Classes:
- Feature
- InfoBox
- Line
- Location
- Map
- OverlayManager
- Point
- Polygon
- VectorLayer
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,

  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const infobox = new Vexcel.InfoBox.InfoBox();
      map.addInfoBox(infobox);
      const point = new Vexcel.Feature(
        new Vexcel.Geometry.Point(
          new Vexcel.Geometry.Location(33.34902669028525, -86.09930716682985)
        )
      );

      const line = new Vexcel.Feature(
        new Vexcel.Geometry.Line([
          new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
          new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
          new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
        ])
      );

      const polygon = new Vexcel.Feature(
        new Vexcel.Geometry.Polygon([
          [
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
          ],
        ])
      );
      point.addEventListener(Vexcel.Events.FeatureEvents.FEATURE_CLICK, (e) => {
        infobox.show(e.location, "I'm a point");
      });

      line.addEventListener(Vexcel.Events.FeatureEvents.FEATURE_CLICK, (e) => {
        infobox.show(e.location, "I'm a line");
      });

      polygon.addEventListener(
        Vexcel.Events.FeatureEvents.FEATURE_CLICK,
        (e) => {
          infobox.show(e.location, "I'm a polygon");
        }
      );
      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [polygon, point, line],
      });

      map.getOverlayManager().addLayer(vectorLayer);
    },
  },
});




================================================================================



## 81. Tutorial geometries features hover

Tutorial
# Feature hover
This tutorial demonstrates how to implement hover event handling for map features in your application. Feature hover events allow users to receive visual feedback when interacting with geometric objects on the map, enhancing the user experience and improving interface responsiveness.
You'll learn how to:
- Create different types of geometric features (points, lines, and polygons)
- Define normal and highlight styles for visual feedback
- Add hover event listeners to map features
- Change feature styles dynamically when users hover over them
Feature hover handling is essential for creating intuitive, interactive maps that provide immediate visual feedback. This capability allows you to build more engaging applications where users can easily identify interactive elements and understand the results of their interactions in real-time.
#### Classes:
- Feature
- Line
- Location
- Map
- OverlayManager
- Point
- Polygon
- Style
- VectorLayer
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,

  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const highlightStyle = new Vexcel.Style.Style({
        fill: new Vexcel.Style.Fill({
          color: "rgba(255,255,255,0.7)",
        }),
        stroke: new Vexcel.Style.Stroke({
          color: "#33cc36",
          width: 2,
        }),
        image: new Vexcel.Style.Circle({
          radius: 5,
          fill: new Vexcel.Style.Fill({
            color: "rgba(255,255,255,0.7)",
          }),
          stroke: new Vexcel.Style.Stroke({
            color: "#33cc36",
            width: 2,
          }),
        }),
      });
      const style = new Vexcel.Style.Style({
        fill: new Vexcel.Style.Fill({
          color: "rgba(255,255,255,0.7)",
        }),
        stroke: new Vexcel.Style.Stroke({
          color: "#3399CC",
          width: 1,
        }),
        image: new Vexcel.Style.Circle({
          radius: 5,
          fill: new Vexcel.Style.Fill({
            color: "rgba(255,255,255,0.7)",
          }),
          stroke: new Vexcel.Style.Stroke({
            color: "#3399CC",
            width: 1,
          }),
        }),
      });
      const point = new Vexcel.Feature(
        new Vexcel.Geometry.Point(
          new Vexcel.Geometry.Location(33.34902669028525, -86.09930716682985)
        )
      );

      const line = new Vexcel.Feature(
        new Vexcel.Geometry.Line([
          new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
          new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
          new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
        ])
      );

      const polygon = new Vexcel.Feature(
        new Vexcel.Geometry.Polygon([
          [
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
          ],
        ])
      );
      function handleHover(e) {
        e.feature.setStyle(e.hover ? highlightStyle : style);
      }
      point.addEventListener(
        Vexcel.Events.FeatureEvents.FEATURE_HOVER,
        handleHover
      );
      line.addEventListener(
        Vexcel.Events.FeatureEvents.FEATURE_HOVER,
        handleHover
      );
      polygon.addEventListener(
        Vexcel.Events.FeatureEvents.FEATURE_HOVER,
        handleHover
      );
      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [polygon, point, line],
        style: [style]
      });

      map.getOverlayManager().addLayer(vectorLayer);
    },
  },
});





================================================================================



## 82. Tutorial geometries features styles

Tutorial
# Feature styles
This tutorial demonstrates how to customize the visual appearance of map features in your application. Feature styling allows you to control the look of geometric objects on the map, enabling you to create visually appealing and informative visualizations.
You'll learn how to:
- Create custom styles for different types of features (points, lines, and polygons)
- Apply fill and stroke styles to control colors and line widths
- Configure circle styles for point features
- Add and style text labels for features
Feature styling is essential for creating effective maps that communicate information clearly. This capability allows you to highlight important features, differentiate between feature types, and create maps that align with your application's design language.
#### Classes:
- Circle
- Fill
- Map
- OverlayManager
- Stroke
- Style
- Text
- VectorLayer
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      function styleFunction(feature, resolution) {
        return new Vexcel.Style.Style({
          fill: new Vexcel.Style.Fill({ color: "rgba(255, 0, 0, 0.4)" }),
          stroke: new Vexcel.Style.Stroke({ color: "rgba(255, 0, 0, 1)", width: 2 }),
          image: new Vexcel.Style.Circle({
            radius: 10,
            fill: new Vexcel.Style.Fill({ color: "rgba(255, 0, 0, 0.4)" }),
            stroke: new Vexcel.Style.Stroke({ color: "rgba(255, 0, 0, 1)", width: 1 }),
          }),
          text: new Vexcel.Style.Text({
            text: feature.get("title"),
            fill: new Vexcel.Style.Fill({
              color: "black",
            }),
            stroke: new Vexcel.Style.Stroke({ color: "white", width: 1 }),
          }),
        });
      }
      const vectorLayer = new Vexcel.Layers.VectorLayer({
        url: "YOUR_VECTOR_DATA_URL",
        style: styleFunction,
      });

      map.getOverlayManager().addLayer(vectorLayer);
    },
  },
});



================================================================================



## 83. Tutorial geometries geojson reader

Tutorial
# GeoJSON reader
This tutorial demonstrates how to work with GeoJSON data in your mapping application. GeoJSON is a standard format for representing geographic data structures using JavaScript Object Notation (JSON), making it an essential tool for exchanging geospatial information between systems.
You'll learn how to:
- Create a GeoJSON reader to parse geographic data
- Read individual GeoJSON features with different geometry types
- Process GeoJSON feature collections containing multiple features
- Add GeoJSON-based features to a vector layer for display on the map
GeoJSON support is fundamental for modern mapping applications, allowing you to easily integrate with external data sources, web services, and geospatial APIs. This capability enables your application to consume and visualize geographic data from a wide variety of sources in a standardized format.
#### Classes:
- Feature
- GeoJSON
- Map
- OverlayManager
- VectorLayer
### index.html





    
    
    
    



            
    
            

    
    
    

            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();

      const geojsonReader = new Vexcel.Geometry.Reader.GeoJSON();

      const geojsonObject = {
        type: "Feature",
        geometry: {
          type: "MultiPolygon",
          coordinates: [
            [
              [
                [-84.60516654182985, 32.35226631308284],
                [-82.95721732307985, 32.259409074686886],
                [-83.85809622932985, 31.024839696908263],
                [-84.60516654182985, 32.35226631308284],
              ],
            ],
            [
              [
                [-83.22088919807985, 30.68531002230933],
                [-82.38592826057985, 32.017535629504685],
                [-81.68280326057985, 30.552946697977536],
                [-83.22088919807985, 30.68531002230933],
              ],
            ],
          ],
        },
        properties: null,
      };

      const feature = geojsonReader.readFeature(geojsonObject);
      const featureCollection = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {},
            geometry: {
              type: "LineString",
              coordinates: [
                [-111.62109375, 36.59788913307022],
                [-104.853515625, 43.83452678223682],
                [-100.0634765625, 35.460669951495305],
                [-91.318359375, 42.71473218539458],
              ],
            },
          },
          {
            type: "Feature",
            properties: {},
            geometry: {
              type: "Point",
              coordinates: [-100.70068359374999, 42.48830197960227],
            },
          },
        ],
      };
      const features = geojsonReader.readFeatures(featureCollection);
      features.push(feature);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features,
      });

      overlayManager.addLayer(vectorLayer);
    },
  },
});



================================================================================



## 84. Tutorial geometries line

Tutorial
# Line
This tutorial demonstrates how to create and work with line features in your mapping application. Line features are essential for representing linear geographic elements such as roads, rivers, boundaries, and paths on a map.
You'll learn how to:
- Create a line geometry using geographic coordinates
- Convert a line geometry into a map feature
- Add line features to a vector layer
- Display line features on the map
Line features are fundamental building blocks for geographic visualization, allowing you to represent connections between locations and illustrate linear paths. Understanding how to create and manage line features is essential for developing effective mapping applications.
#### Classes:
- Feature
- Line
- Location
- Map
- OverlayManager
- VectorLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const layerManager = map.getOverlayManager();

      const lineGeometry = new Vexcel.Geometry.Line([
        new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
        new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
        new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
      ]);

      const line = new Vexcel.Feature(lineGeometry);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [line],
      });

      layerManager.addLayer(vectorLayer);
    },
  },
});



================================================================================



## 85. Tutorial geometries multipolygon

Tutorial
# MultiPolygon
This tutorial demonstrates how to create and work with multipolygon features in your mapping application. Multipolygon features are essential for representing complex geographic areas that consist of multiple separate polygons, such as archipelagos, administrative regions with exclaves, or any disconnected areas that belong to the same entity.
You'll learn how to:
- Create multipolygon geometries using geographic coordinates
- Define multiple separate polygon areas within a single multipolygon
- Convert multipolygon geometries into map features
- Add multipolygon features to a vector layer for display on the map
Multipolygon features are advanced building blocks for geographic visualization, allowing you to represent complex spatial relationships and disconnected areas as a single entity. Understanding how to create and manage multipolygon features is essential for developing sophisticated mapping applications that can accurately represent complex real-world geographic entities.
#### Classes:
- Feature
- Location
- Map
- MultiPolygon
- OverlayManager
- VectorLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const layerManager = map.getOverlayManager();

      const multipolygonGeometry = new Vexcel.Geometry.MultiPolygon([
        [
          [
            new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
            new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375),
            new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625),
            new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
          ],
          [
            new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
            new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875),
            new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875),
            new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
          ],
        ],
      ]);

      const multipolygon = new Vexcel.Feature(multipolygonGeometry);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [multipolygon],
      });

      layerManager.addLayer(vectorLayer);
    },
  },
});




================================================================================



## 86. Tutorial geometries point shapes styles

Tutorial
# Point shapes styles
This tutorial demonstrates how to create and style point features with various geometric shapes in your mapping application. Point shape styling allows you to represent different types of features with distinctive symbols, enhancing the visual communication of your maps.
You'll learn how to:
- Create different geometric shapes for point features (squares, rectangles, triangles, stars, crosses)
- Configure shape parameters like radius, angle, and rotation
- Create composite shapes using multiple style definitions
- Apply fill and stroke styles to shape symbols
- Position and scale shapes for optimal display
Advanced point styling is essential for creating informative maps that effectively communicate different feature types through visual symbolization. This capability allows you to create custom map symbols that align with cartographic conventions or your application's specific needs.
#### Classes:
- Feature
- Fill
- Location
- Map
- OverlayManager
- Point
- RegularShape
- Stroke
- Style
- VectorLayer
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const stroke = new Vexcel.Style.Stroke({ color: "rgb(38,255,0)", width: 1 });
      const fill = new Vexcel.Style.Fill({ color: "rgba(38,255,0,0.4)" });

      const squarePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375)
      );

      const rectanglePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375)
      );
      const trianglePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625)
      );
      const startShapePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875)
      );
      const crossShapePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(31.952162238024975, -85.78125)
      );

      const xShapePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(32.47269502206151, -85.78125)
      );
      const stackedShapePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(32.47269502206151, -86.41845703124999)
      );

      const squarePointFeature = new Vexcel.Feature(squarePoint);
      squarePointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            points: 4,
            radius: 10,
            angle: Math.PI / 4,
          }),
        })
      );
      const rectanglePointFeature = new Vexcel.Feature(rectanglePoint);
      rectanglePointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            radius: 10 / Math.SQRT2,
            radius2: 10,
            points: 4,
            angle: 0,
            scale: [1, 0.5],
          }),
        })
      );
      const trianglePointFeature = new Vexcel.Feature(trianglePoint);
      trianglePointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            points: 3,
            radius: 10,
            rotation: Math.PI / 4,
            angle: 0,
          }),
        })
      );
      const startPointFeature = new Vexcel.Feature(startShapePoint);
      startPointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            points: 5,
            radius: 10,
            radius2: 4,
            angle: 0,
          }),
        })
      );
      const crossPointFeature = new Vexcel.Feature(crossShapePoint);
      crossPointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            points: 4,
            radius: 10,
            radius2: 0,
            angle: 0,
          }),
        })
      );
      const xPointFeature = new Vexcel.Feature(xShapePoint);
      xPointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            points: 4,
            radius: 10,
            radius2: 0,
            angle: Math.PI / 4,
          }),
        })
      );

      const stackedPointFeature = new Vexcel.Feature(stackedShapePoint);
      stackedPointFeature.setStyle([
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            points: 4,
            radius: 5,
            angle: Math.PI / 4,
            displacement: [0, 10],
          }),
        }),
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            points: 4,
            radius: 10,
            angle: Math.PI / 4,
          }),
        }),
      ]);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [
          squarePointFeature,
          rectanglePointFeature,
          trianglePointFeature,
          startPointFeature,
          crossPointFeature,
          xPointFeature,
          stackedPointFeature,
        ],
      });
      map.getOverlayManager().addLayer(vectorLayer);
    },
  },
});




================================================================================



## 87. Tutorial geometries point styles

Tutorial
# Point styles
This tutorial demonstrates how to apply different styling options to point features in your mapping application. Point styling allows you to customize the visual appearance of point markers, enabling you to create more informative and visually appealing maps.
You'll learn how to:
- Create basic point features with default styling
- Apply circle styles with custom radius and fill colors
- Use image icons as point markers
- Create geometric shapes for point representation
Effective point styling is essential for creating maps that clearly communicate information to users. By customizing the appearance of point features, you can differentiate between different types of locations, highlight important points, and create a more intuitive user experience.
#### Classes:
- Circle
- Feature
- Fill
- Icon
- Location
- Map
- OverlayManager
- Point
- RegularShape
- Stroke
- Style
- VectorLayer
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const stroke = new Vexcel.Style.Stroke({ color: "rgb(38,255,0)", width: 1 });
      const fill = new Vexcel.Style.Fill({ color: "rgba(38,255,0,0.4)" });

      const defaultPoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375)
      );

      const circlePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375)
      );
      const iconPoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625)
      );
      const regularShapePoint = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875)
      );

      const defaultPointFeature = new Vexcel.Feature(defaultPoint);
      const circlePointFeature = new Vexcel.Feature(circlePoint);
      circlePointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.Circle({
            radius: 5,
            fill: new Vexcel.Style.Fill({
              color: "orange",
            }),
          }),
        })
      );
      const imagePointFeature = new Vexcel.Feature(iconPoint);
      imagePointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.Icon({
            src: "YOUR_ICON_URL_HERE",
          }),
        })
      );
      const regularPointFeature = new Vexcel.Feature(regularShapePoint);
      regularPointFeature.setStyle(
        new Vexcel.Style.Style({
          image: new Vexcel.Style.RegularShape({
            fill,
            stroke,
            points: 4,
            radius: 10,
            angle: Math.PI / 4,
          }),
        })
      );
      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [
          defaultPointFeature,
          circlePointFeature,
          imagePointFeature,
          regularPointFeature,
        ],
      });

      map.getOverlayManager().addLayer(vectorLayer);
    },
  },
});



================================================================================



## 88. Tutorial geometries point

Tutorial
# Point
This tutorial demonstrates how to create and work with point features in your mapping application. Point features are essential for representing discrete locations on a map, such as landmarks, cities, events, or any geographic entity that can be represented by a single coordinate.
You'll learn how to:
- Create a point geometry using geographic coordinates
- Convert a point geometry into a map feature
- Add point features to a vector layer
- Display point features on the map
Point features are the most fundamental building blocks for geographic visualization, allowing you to mark specific locations of interest. Understanding how to create and manage point features is essential for developing effective mapping applications that can highlight important locations and serve as the basis for more complex interactions.
#### Classes:
- Feature
- Location
- Map
- OverlayManager
- Point
- VectorLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();

      const location = new Vexcel.Geometry.Location(
        33.34902669028525,
        -86.09930716682985
      );
      const pointGeometry = new Vexcel.Geometry.Point(location);
      const point = new Vexcel.Feature(pointGeometry);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [point],
      });

      overlayManager.addLayer(vectorLayer);
    },
  },
});



================================================================================



## 89. Tutorial geometries polygon styles

Tutorial
# Polygon styles
This tutorial demonstrates how to apply custom styles to polygon features in your mapping application. Polygon styling allows you to control the visual appearance of area features on the map, enabling you to create visually distinctive and informative representations of geographic regions.
You'll learn how to:
- Create custom styles with fill and stroke properties for polygon features
- Apply transparency and color settings to polygon fills
- Configure stroke styles for polygon boundaries
- Apply consistent styling to multiple geometry types (polygons, polygons with holes, and multipolygons)
- Add styled features to a vector layer for display on the map
Effective polygon styling is essential for creating maps that clearly communicate spatial information. By customizing the appearance of polygon features, you can highlight different areas, indicate different categories of regions, and create more intuitive and visually appealing maps that effectively convey geographic information.
#### Classes:
- Location
- Line
- Feature
- Fill
- Map
- MultiPolygon
- OverlayManager
- Polygon
- Stroke
- Style
- VectorLayer
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();
      const customStyle = new Vexcel.Style.Style({
        fill: new Vexcel.Style.Fill({ color: "rgba(23,227,91,0.6)"}),
        stroke: new Vexcel.Style.Stroke({
          color: "#ec1c1c",
          width: 2,
        }),
      });

      const lineGeometry = new Vexcel.Geometry.Line([
        new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
        new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
        new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
      ]);

      const ring = [
        new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
        new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
        new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
        new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
        new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
      ];
      const ring2 = [
        new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
        new Vexcel.Geometry.Location(31.55981453201843, -85.166015625),
        new Vexcel.Geometry.Location(32.861132322810946, -85.166015625),
        new Vexcel.Geometry.Location(32.861132322810946, -87.0556640625),
        new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
      ];
      const hole = [
        new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
        new Vexcel.Geometry.Location(31.952162238024975, -85.78125),
        new Vexcel.Geometry.Location(32.47269502206151, -85.78125),
        new Vexcel.Geometry.Location(32.47269502206151, -86.41845703124999),
        new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
      ];

      const polygonGeom = new Vexcel.Geometry.Polygon([ring]);
      const polygonWithHoleGeom = new Vexcel.Geometry.Polygon([ring2, hole]);
      const multipolygonGeometry = new Vexcel.Geometry.MultiPolygon([
        [
          [
            new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
            new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375),
            new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625),
            new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
          ],
          [
            new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
            new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875),
            new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875),
            new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
          ],
        ],
      ]);


      const polygon = new Vexcel.Feature(polygonGeom);
      const polygonWithHole = new Vexcel.Feature(polygonWithHoleGeom);
      const line = new Vexcel.Feature(lineGeometry);
      const multipolygon = new Vexcel.Feature(multipolygonGeometry);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [polygon, polygonWithHole, line, multipolygon],
        style: [customStyle],
      });

      overlayManager.addLayer(vectorLayer);
    },
  },
});



================================================================================



## 90. Tutorial geometries polygon

Tutorial
# Polygon
This tutorial demonstrates how to create and work with polygon features in your mapping application. Polygon features are essential for representing enclosed areas and regions on a map, such as boundaries, territories, lakes, buildings, and other geographic areas.
You'll learn how to:
- Create polygon geometries using geographic coordinates
- Define complex polygons with holes (interior rings)
- Convert polygon geometries into map features
- Add polygon features to a vector layer for display on the map
Polygon features are fundamental building blocks for geographic visualization, allowing you to represent areas and regions with precise boundaries. Understanding how to create and manage polygon features, including those with holes, is essential for developing effective mapping applications that accurately represent real-world geographic entities.
#### Classes:
- Feature
- Location
- Map
- OverlayManager
- Polygon
- VectorLayer
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();

      const ring = [
        new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
        new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
        new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
        new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
        new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
      ];
      const ring2 = [
        new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
        new Vexcel.Geometry.Location(31.55981453201843, -85.166015625),
        new Vexcel.Geometry.Location(32.861132322810946, -85.166015625),
        new Vexcel.Geometry.Location(32.861132322810946, -87.0556640625),
        new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
      ];
      const hole = [
        new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
        new Vexcel.Geometry.Location(31.952162238024975, -85.78125),
        new Vexcel.Geometry.Location(32.47269502206151, -85.78125),
        new Vexcel.Geometry.Location(32.47269502206151, -86.41845703124999),
        new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
      ];

      const polygonGeom = new Vexcel.Geometry.Polygon([ring]);
      const polygonWithHoleGeom = new Vexcel.Geometry.Polygon([ring2, hole]);

      const polygon = new Vexcel.Feature(polygonGeom);
      const polygonWithHole = new Vexcel.Feature(polygonWithHoleGeom);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [polygon, polygonWithHole],
      });

      overlayManager.addLayer(vectorLayer);
    },
  },
});




================================================================================



## 91. Tutorial geometries text styles

Tutorial
# Text styles
This tutorial demonstrates how to add and style text labels for map features in your application. Text styling allows you to display descriptive labels on your map features, enhancing the information content and readability of your maps.
You'll learn how to:
- Add text labels to point features
- Customize text appearance with different colors and sizes
- Apply background fills and strokes to text labels
- Position and format text for optimal readability
Text styling is essential for creating informative maps that effectively communicate geographic information. By adding clear, well-styled labels to your features, you can provide context, identification, and additional data directly on the map, improving user understanding and interaction.
#### Classes:
- Feature
- Fill
- Location
- Map
- OverlayManager
- Point
- Stroke
- Style
- Text
- VectorLayer
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,

  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const stroke = new Vexcel.Style.Stroke({ color: "red", width: 1 });
      const fill = new Vexcel.Style.Fill({ color: "green" });

      const point = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375)
      );

      const point1 = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375)
      );
      const point2 = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625)
      );
      const point3 = new Vexcel.Geometry.Point(
        new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875)
      );

      const pointFeature = new Vexcel.Feature(point);
      pointFeature.setStyle(
        new Vexcel.Style.Style({
          text: new Vexcel.Style.Text({
            text: "Point",
            fill: new Vexcel.Style.Fill({
              color: "white",
            }),
            backgroundFill: fill,
            backgroundStroke: stroke,
          }),
        })
      );
      const point1Feature = new Vexcel.Feature(point1);
      point1Feature.setStyle(
        new Vexcel.Style.Style({
          text: new Vexcel.Style.Text({
            text: "Point1",
            fill: new Vexcel.Style.Fill({
              color: "white",
            }),
            backgroundFill: fill,
            backgroundStroke: stroke,
          }),
        })
      );
      const point2Feature = new Vexcel.Feature(point2);
      point2Feature.setStyle(
        new Vexcel.Style.Style({
          text: new Vexcel.Style.Text({
            text: "Point2",
            fill: new Vexcel.Style.Fill({
              color: "white",
            }),
            size: 18,
            backgroundFill: fill,
            backgroundStroke: stroke,
          }),
        })
      );
      const point3Feature = new Vexcel.Feature(point3);
      point3Feature.setStyle(
        new Vexcel.Style.Style({
          text: new Vexcel.Style.Text({
            text: "Point3",
            fill: new Vexcel.Style.Fill({
              color: "white",
            }),
            backgroundFill: fill,
            backgroundStroke: stroke,
          }),
        })
      );
      const vectorLayer = new Vexcel.Layers.VectorLayer({
        features: [pointFeature, point1Feature, point2Feature, point3Feature],
      });

      map.getOverlayManager().addLayer(vectorLayer);
    },
  },
});



================================================================================



## 92. Tutorial geometries wkt reader

Tutorial
# WKT reader
This tutorial demonstrates how to work with WKT (Well-Known Text) data in your mapping application. WKT is a text markup language for representing vector geometry objects, providing a compact and human-readable way to exchange geospatial data between systems.
You'll learn how to:
- Create a WKT reader to parse geographic data
- Read WKT strings representing different geometry types (points, lines, polygons, multipolygons)
- Convert WKT strings into map features
- Add WKT-based features to a vector layer for display on the map
WKT support is essential for interoperability in GIS applications, allowing you to easily import and export geographic data in a standardized text format. This capability enables your application to integrate with various geospatial databases, services, and legacy systems that use the WKT format for spatial data representation.
#### Classes:
- Feature
- Map
- OverlayManager
- VectorLayer
- WKT
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();

      const wktReader = new Vexcel.Geometry.Reader.WKT();

      const point = wktReader.readFeature(
        "POINT(-86.09930716682985 33.34902669028525)"
      );
      const line = wktReader.readFeature(
        "LINESTRING(-87.30780326057985 34.7146642939135,-85.61590872932985 35.755566221057066,-82.29803763557985 34.76883099824442,-81.59491263557985 33.23882960499948,-81.33124076057985 32.593249091770176)"
      );
      const polygon = wktReader.readFeature(
        "POLYGON((-87.61542044807985 33.678781209962565,-88.64813529182985 32.796652901276744,-88.77997122932985 31.71896672113441,-87.06610404182985 31.325631783254476,-86.89032279182985 33.09168386473546,-87.61542044807985 33.678781209962565))"
      );
      const multiPolygon = wktReader.readFeature(
        "Multipolygon(((-84.60516654182985 32.35226631308284,-82.95721732307985 32.259409074686886,-83.85809622932985 31.024839696908263,-84.60516654182985 32.35226631308284)),((-83.22088919807985 30.68531002230933,-82.38592826057985 32.017535629504685,-81.68280326057985 30.552946697977536,-83.22088919807985 30.68531002230933)))"
      );

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [point, line, polygon, multiPolygon],
      });

      overlayManager.addLayer(vectorLayer);
    },
  },
});



================================================================================



## 93. Tutorial geometries

Tutorial
# Geometries
Geometry implementation examples:
- Point feature
- Line feature
- Polygon feature
- MultiPolygon feature
- WKT reader
- GeoJSON reader
- Feature click
- Feature hover

================================================================================



## 94. Tutorial infobox click

Tutorial
# InfoBox on click
This tutorial demonstrates how to implement an interactive InfoBox that displays information when users click
            on the map. InfoBoxes are popup windows that provide a way to show additional details, context, or data
            about specific locations on your map.
You'll learn how to:
- Create and initialize an InfoBox component
- Add click event listeners to the map
- Display coordinate information at clicked locations
- Customize InfoBox content with dynamic data
InfoBox functionality is essential for creating interactive maps that respond to user input. This capability
            allows you to provide additional information about map locations on demand, enhancing the user experience
            and making your maps more informative and engaging.
#### Classes:
- InfoBox
- Location
- Map
### index.html





    
    
    
    


    
            
    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      infobox = new Vexcel.InfoBox.InfoBox();
      map.addInfoBox(infobox);
    },
  },
});

map.addListener(Vexcel.Events.MapEvents.CLICK, (e) => {
  const content = `This is the coordinates ${e.location.latitude},${e.location.longitude}`;
  infobox.show(e.location, content);
});



================================================================================



## 95. Tutorial infobox feature

Tutorial
# InfoBox feature
This tutorial demonstrates how to display InfoBox popups when users click on map features. Feature-based
            InfoBoxes allow you to show detailed information about specific geographic elements, enabling interactive
            data exploration and property visualization.
You'll learn how to:
- Create different types of features (points, lines, polygons) with custom properties
- Add feature click event listeners to detect user interactions
- Extract and format feature properties for display
- Determine optimal InfoBox placement based on feature geometry type
- Create and display InfoBox popups with feature-specific content
Feature-based InfoBoxes are essential for creating interactive maps that provide context-sensitive
            information. This capability allows users to explore and understand the properties and attributes of
            geographic features, making your maps more informative and engaging for data visualization and spatial
            analysis.
#### Classes:
- Feature
- InfoBox
- Line
- Location
- Map
- OverlayManager
- Point
- Polygon
- VectorLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    callback: () => {
      const point = new Vexcel.Feature(
        new Vexcel.Geometry.Point(
          new Vexcel.Geometry.Location(33.34902669028525, -86.09930716682985)
        )
      );

      const line = new Vexcel.Feature(
        new Vexcel.Geometry.Line([
          new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
          new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
          new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
        ])
      );

      const polygon = new Vexcel.Feature(
        new Vexcel.Geometry.Polygon([
          [
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
          ],
        ])
      );
      const properties = {
        title: 'Title',
        address:  'address'
      }

      point.setProperties(properties);
      polygon.setProperties(properties);
      line.setProperties(properties);

      const geoJSONvectorLayer = new Vexcel.Layers.VectorLayer({
        features: [point, line, polygon],
      });

      map.getOverlayManager().addLayer(geoJSONvectorLayer);
    },
  },
});

map.addListener(Vexcel.Events.MapEvents.FEATURES_CLICK, (e) => {
  if (e.features && e.features.length) {
    e.features.map((feat) => {
      const properties = feat.getProperties();
      let content = `
              `;
      if (properties.title) {
        content += `
            • ${properties.title}
              • `;
      }
      if (properties.address) {
        content += `
            • Address: ${properties.address}
              • `;
      }

      content += `
            `;
      let location = e.location;
      if (
        feat.getGeometry().getType() === "Polygon" ||
        feat.getGeometry().getType() === "LineString"
      ) {
        location = feat.getGeometry().getCenterLocation();
      } else if (feat.getGeometry().getType() === "Point") {
        location = feat.getGeometry().getLocation();
      }

      const infobox = new Vexcel.InfoBox.InfoBox({
        location,
        content,
      });

      map.addInfoBox(infobox);
    });
  }
});




            

================================================================================



## 96. Tutorial infobox fixed

Tutorial
# InfoBox fixed
This tutorial demonstrates how to create and display fixed InfoBoxes at predetermined locations on your map. Fixed InfoBoxes are popup windows that show information about specific locations without requiring user interaction, making them ideal for highlighting important points of interest or providing context about specific map features.
You'll learn how to:
- Create an InfoBox with a predefined geographic location
- Configure InfoBox content with custom text or HTML
- Add fixed InfoBoxes to the map during initialization
- Integrate InfoBoxes with different map view modes (2D/3D)
Fixed InfoBoxes are valuable for creating informative maps that guide users' attention to important locations. This capability allows you to provide explanatory information about key features, landmarks, or regions directly on the map, enhancing the user experience with contextual information that's immediately visible.
#### Mode Controls
#### Classes:
- ImageryLayer
- InfoBox
- Location
- Map
### index.html





    
    
    
    


    
            
    
            
        
            Mode Controls
            
        
        
    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  zoom: 19,
  center: [-97.5146484375, 35.48751102385376],
  initialConfig: {
    callback: () => {
      const infobox = new Vexcel.InfoBox.InfoBox({
        location: new Vexcel.Geometry.Location(
          35.48751102385376,
          -97.5146484375
        ),
        content: "This is a InfoBox in Oklahoma City",
      });

      map.addInfoBox(infobox);
    },
  },
});

function changeMode(mode) {
  map
    .getImageryLayer()
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(
          `Change to mode ${mode} for layer ${response.layer.getName()}`
        );
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}




================================================================================



## 97. Tutorial infobox 

Tutorial
# InfoBox
InfoBox implementation examples:
- Fixed location
- Click location
- Click feature

================================================================================



## 98. Tutorial layers arcgis

Tutorial
# ArcGIS Feature
This tutorial demonstrates how to integrate ArcGIS services into your mapping application. ArcGIS layers allow you to display data from ArcGIS Feature Services, providing access to a vast ecosystem of geospatial data and services maintained by organizations worldwide.
You'll learn how to:
- Create an ArcGIS layer that connects to an external Feature Service
- Configure layer properties such as visibility and layer selection
- Add the ArcGIS layer to your map's overlay manager
- Display dynamic data from ArcGIS servers on your map
ArcGIS integration is essential for applications that need to leverage existing geospatial data services. This capability allows you to combine proprietary data with public datasets, access specialized thematic layers, and build on the extensive GIS resources available through the ArcGIS ecosystem.
#### Classes:
- ArcGISLayer
- Map
- OverlayManager
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  zoom: 5,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();
      const layer = new Vexcel.Layers.ARCGISLayer({
        url:
          "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NDFD_Precipitation_v1/FeatureServer",
        layer: "0",
        visible: true,
      });

      overlayManager.addLayer(layer);
    },
  },
});


================================================================================



## 99. Tutorial layers bing

Tutorial
# layers-bing
This tutorial demonstrates how to integrate Bing Maps services into your mapping application. Bing layers allow you to display high-quality aerial imagery, road maps, and hybrid views from Microsoft's Bing Maps platform, providing additional basemap options for your applications.
You'll learn how to:
- Create a Bing Maps layer with your API key
- Configure imagery types (aerial, road, hybrid)
- Set layer visibility properties
- Add the Bing layer to your map's overlay manager
Bing Maps integration is valuable for applications that require alternative basemap imagery or specific Microsoft mapping services. This capability allows you to leverage Bing's global coverage, regular updates, and specialized imagery types to enhance your mapping applications with high-quality base layers.
#### Classes:
- BingLayer
- Map
- OverlayManager
### index.html





    
    
    
    



    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const BING_KEY = "BING_KEY";
const IMAGERY_SET = "IMAGERY_SET" // e.g., "AerialWithLabels";

const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const layerManager = map.getOverlayManager();
      const layer = new Vexcel.Layers.BingLayer({
        key: BING_KEY,
        imagerySet: IMAGERY_SET,
        visible: true,
      });

      layerManager.addLayer(layer);
    },
  },
});


================================================================================



## 100. Tutorial layers group

Tutorial
# Group Layer
This tutorial demonstrates how to organize and manage multiple map layers using group layers in your mapping application. Group layers allow you to combine different layer types into a single logical unit, simplifying layer management and enabling collective operations on multiple layers simultaneously.
You'll learn how to:
- Create individual layers of different types (WFS, WMS)
- Combine multiple layers into a single group layer
- Configure group layer properties like visibility and name
- Add the group layer to your map's overlay manager
- Manage multiple layers as a single unit
Group layers are essential for creating well-organized maps with complex layer structures. This capability allows you to create hierarchical layer organizations, toggle visibility of multiple layers at once, and manage related layers as cohesive units, improving both the user experience and the maintainability of your mapping application.
#### Classes:
- GroupLayer
- Map
- OverlayManager
- WFSLayer
- WMSLayer
### index.html





    
    
    
    
>


    
            
    

    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();
      const wfsLayer = new Vexcel.Layers.WFSLayer({
        visible: true,
        url: "https://ahocevar.com/geoserver/wfs?",
        layer: "usa:states",
        format: "application/json",
      });

      const wmsLayer = new Vexcel.Layers.WMSLayer({
        visible: true,
        url: "https://servicios.idee.es/wms-inspire/mdt",
        layers: "EL.GridCoverage",
        tilted: true,
      });

      const groupLayer = new Vexcel.Layers.GroupLayer({
        name: "Group layer",
        visible: true,
        layers: [wfsLayer, wmsLayer],
      });

      overlayManager.addLayer(groupLayer);
    },
  },
});


================================================================================



## 101. Tutorial layers vector tiles

Tutorial
# Vector Tiles
This tutorial demonstrates how to integrate vector tile layers into your mapping application. Vector tiles are compact, efficient map data formats that deliver vector geometries divided into tiles, enabling high-performance rendering of complex maps with reduced bandwidth requirements.
You'll learn how to:
- Create vector tile layers from external tile services
- Configure style URLs to customize the visual appearance of vector tiles
- Set up authentication using API tokens for protected tile services
- Add multiple vector tile layers to your map's overlay manager
- Work with different vector tile providers (ArcGIS, custom services)
Vector tile layers are essential for creating high-performance, visually appealing maps that can be styled dynamically. This capability allows you to display complex geographic data with excellent performance, customize the appearance of base maps, and create responsive mapping applications that work well across different devices and network conditions.
#### Classes:
- Map
- OverlayManager
- VectorTileLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map= new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      // layer with styles
      const vectorTile = new Vexcel.Layers.VectorTile({
        url:
          "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf",
        name: "Base Maps",
        styleUrl:
          "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/styles/",
      });

      // layer with token
      const vexcelTile = new Vexcel.Layers.VectorTile({
        url: "https://preview.api.gic.org/property/buildings/{z}/{x}/{y}",
        name: "Tampa",
        token: API_KEY,

      });

      map.getOverlayManager().addLayer(vectorTile);
      map.getOverlayManager().addLayer(vexcelTile);
    },
  },
});


================================================================================



## 102. Tutorial layers vector

Tutorial
# Vector Layer
This tutorial demonstrates how to create and work with vector layers in your mapping application. Vector layers allow you to display and manage geographic features such as points, lines, and polygons, providing the foundation for visualizing spatial data on your maps.
You'll learn how to:
- Create different types of geometries (points, lines, polygons, polygons with holes, multipolygons)
- Convert geometries into map features
- Add multiple features to a vector layer
- Load vector data from external GeoJSON files
- Add vector layers to the map's overlay manager
Vector layers are essential building blocks for interactive mapping applications, allowing you to represent real-world geographic entities and create custom visualizations. This capability enables you to display your own spatial data, create interactive features, and build maps that effectively communicate geographic information.
#### Classes:
- Feature
- Line
- Location
- Map
- MultiPolygon
- OverlayManager
- Point
- Polygon
- VectorLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      // Create layer from features
      const location = new Vexcel.Geometry.Location(
        33.34902669028525,
        -86.09930716682985
      );
      const pointGeometry = new Vexcel.Geometry.Point(location);
      const lineGeometry = new Vexcel.Geometry.Line([
        new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
        new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
        new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
      ]);

      const ring = [
        new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
        new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
        new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
        new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
        new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
      ];
      const ring2 = [
        new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
        new Vexcel.Geometry.Location(31.55981453201843, -85.166015625),
        new Vexcel.Geometry.Location(32.861132322810946, -85.166015625),
        new Vexcel.Geometry.Location(32.861132322810946, -87.0556640625),
        new Vexcel.Geometry.Location(31.55981453201843, -87.0556640625),
      ];
      const hole = [
        new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
        new Vexcel.Geometry.Location(31.952162238024975, -85.78125),
        new Vexcel.Geometry.Location(32.47269502206151, -85.78125),
        new Vexcel.Geometry.Location(32.47269502206151, -86.41845703124999),
        new Vexcel.Geometry.Location(31.952162238024975, -86.41845703124999),
      ];

      const polygonGeom = new Vexcel.Geometry.Polygon([ring]);
      const polygonWithHoleGeom = new Vexcel.Geometry.Polygon([ring2, hole]);
      const multipolygonGeometry = new Vexcel.Geometry.MultiPolygon([
        [
          [
            new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
            new Vexcel.Geometry.Location(35.15584570226544, -117.39990234375),
            new Vexcel.Geometry.Location(35.02999636902566, -115.631103515625),
            new Vexcel.Geometry.Location(35.585851593232356, -116.136474609375),
          ],
          [
            new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
            new Vexcel.Geometry.Location(35.08395557927643, -114.686279296875),
            new Vexcel.Geometry.Location(35.746512259918504, -113.97216796875),
            new Vexcel.Geometry.Location(35.737595151747826, -115.224609375),
          ],
        ],
      ]);

      const point = new Vexcel.Feature(pointGeometry);
      const polygon = new Vexcel.Feature(polygonGeom);
      const polygonWithHole = new Vexcel.Feature(polygonWithHoleGeom);
      const line = new Vexcel.Feature(lineGeometry);
      const multipolygon = new Vexcel.Feature(multipolygonGeometry);

      const vectorLayer = new Vexcel.Layers.VectorLayer({
        features: [point, polygon, polygonWithHole, line, multipolygon],
      });
      map.getOverlayManager().addLayer(vectorLayer);

      // Create layer from local geoJSON
      const geoJSONLayer = new Vexcel.Layers.VectorLayer({
        url: "data/vector-sample.geojson",
      });

      map.getOverlayManager().addLayer(geoJSONLayer);
    },
  },
});


================================================================================



## 103. Tutorial layers wfs

Tutorial
# WFS Layer
This tutorial demonstrates how to integrate Web Feature Service (WFS) layers into your mapping application. WFS layers allow you to request and display vector feature data from standard OGC-compliant web services, enabling access to a wide range of geospatial data sources.
You'll learn how to:
- Create a WFS layer that connects to an external feature service
- Configure layer properties such as visibility and format
- Specify the feature type (layer) to request from the WFS server
- Add the WFS layer to your map's overlay manager
WFS integration is essential for applications that need to access and display vector data from external servers. This capability allows you to incorporate dynamic feature data from various sources, display detailed geographic information, and build interactive maps that leverage standardized geospatial web services.
#### Classes:
- Map
- OverlayManager
- WFSLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();
      const layer = new Vexcel.Layers.WFSLayer({
        visible: true,
        url: "https://ahocevar.com/geoserver/wfs?",
        layer: "usa:states",
        format: "application/json",
      });

      overlayManager.addLayer(layer);
    },
  },
});


================================================================================



## 104. Tutorial layers wms

Tutorial
# WMS Tile
This tutorial demonstrates how to integrate Web Map Service (WMS) layers into your mapping application. WMS layers allow you to display georeferenced map images from standard OGC-compliant web services, providing access to a wide variety of pre-rendered map imagery from servers around the world.
You'll learn how to:
- Create a WMS layer that connects to an external map service
- Configure layer properties such as visibility and layer selection
- Specify which layers to request from the WMS server
- Enable tilted view support for 3D visualization
- Add the WMS layer to your map's overlay manager
WMS integration is essential for applications that need to incorporate standardized map imagery from external sources. This capability allows you to access authoritative map data from government agencies, research institutions, and other organizations, enhancing your maps with professionally rendered cartography and specialized thematic layers.
#### Classes:
- Map
- OverlayManager
- WMSLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();

      const layer = new Vexcel.Layers.WMSLayer({
        visible: true,
        url: "https://www.ign.es/wms-inspire/mapa-raster?service=WMS",
        layers: "fondo",
        tilted: true,
      });

      overlayManager.addLayer(layer);
    },
  },
});


================================================================================



## 105. Tutorial layers wmts

Tutorial
# WMTS Tile
This tutorial demonstrates how to integrate Web Map Tile Service (WMTS) layers into your mapping application. WMTS layers allow you to display pre-rendered, cached map tiles from standard OGC-compliant web services, providing efficient access to map imagery with improved performance compared to traditional WMS services.
You'll learn how to:
- Create a WMTS layer that connects to an external tile service
- Configure layer properties such as visibility and format
- Specify the tile matrix set for proper projection alignment
- Set up matrix identifiers for different zoom levels
- Add the WMTS layer to your map's overlay manager
WMTS integration is essential for applications that need high-performance map rendering. This capability allows you to access pre-cached map tiles that load quickly, reduce server load, and provide a smoother user experience, especially for applications that require fast map navigation and display of complex base maps.
#### Classes:
- Map
- OverlayManager
- WMTSLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();
      /** Value get from getCapabilities service */
      const matrixIds =
        '[{"Identifier":"0","ScaleDenominator":559082263.9508929,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":1,"MatrixHeight":1},{"Identifier":"1","ScaleDenominator":279541131.97544646,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":2,"MatrixHeight":2},{"Identifier":"2","ScaleDenominator":139770565.98772323,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":4,"MatrixHeight":4},{"Identifier":"3","ScaleDenominator":69885282.99386144,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":8,"MatrixHeight":8},{"Identifier":"4","ScaleDenominator":34942641.496930785,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":16,"MatrixHeight":16},{"Identifier":"5","ScaleDenominator":17471320.748465393,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":32,"MatrixHeight":32},{"Identifier":"6","ScaleDenominator":8735660.37423268,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":64,"MatrixHeight":64},{"Identifier":"7","ScaleDenominator":4367830.187116321,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":128,"MatrixHeight":128},{"Identifier":"8","ScaleDenominator":2183915.093558175,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":256,"MatrixHeight":256},{"Identifier":"9","ScaleDenominator":1091957.5467790859,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":512,"MatrixHeight":512},{"Identifier":"10","ScaleDenominator":545978.7733895429,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":1024,"MatrixHeight":1024},{"Identifier":"11","ScaleDenominator":272989.3866947718,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":2048,"MatrixHeight":2048},{"Identifier":"12","ScaleDenominator":136494.69334738574,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":4096,"MatrixHeight":4096},{"Identifier":"13","ScaleDenominator":68247.34667369287,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":8192,"MatrixHeight":8192},{"Identifier":"14","ScaleDenominator":34123.67333684646,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":16384,"MatrixHeight":16384},{"Identifier":"15","ScaleDenominator":17061.836668423217,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":32768,"MatrixHeight":32768},{"Identifier":"16","ScaleDenominator":8530.918334211608,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":65536,"MatrixHeight":65536},{"Identifier":"17","ScaleDenominator":4265.459167105786,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":131072,"MatrixHeight":131072},{"Identifier":"18","ScaleDenominator":2132.729583552893,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":262144,"MatrixHeight":262144},{"Identifier":"19","ScaleDenominator":1066.3647917764465,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":524288,"MatrixHeight":524288},{"Identifier":"20","ScaleDenominator":533.1823958882233,"TopLeftCorner":[-20037508.34,20037508],"TileWidth":256,"TileHeight":256,"MatrixWidth":1048576,"MatrixHeight":1048576}]';

      const layer = new Vexcel.Layers.WMTSLayer({
        visible: true,
        url: "https://servicios.idee.es/wmts/mdt?service=WMTS",
        matrixSet: "GoogleMapsCompatible",
        layer: "Relieve",
        matrixIds,
        format: "image/png",
      });

      overlayManager.addLayer(layer);
    },
  },
});


================================================================================



## 106. Tutorial layers xyz

Tutorial
# XYZ Tile
This tutorial demonstrates how to integrate XYZ tile layers into your mapping application. XYZ layers allow you to display map tiles from various providers using a standardized URL pattern with x, y coordinates and zoom level (z) parameters, providing a flexible way to incorporate different basemaps and overlays.
You'll learn how to:
- Create an XYZ layer that connects to an external tile service
- Configure layer properties such as visibility and opacity
- Specify the URL template with proper coordinate placeholders
- Add the XYZ layer to your map's overlay manager
XYZ layer integration is essential for applications that need to incorporate various tile-based map services. This capability allows you to use tiles from a wide range of providers, including OpenStreetMap, ArcGIS, Google Maps, and many others, enabling you to select the most appropriate basemap for your specific application needs.
#### Classes:
- Map
- OverlayManager
- XYZLayer
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
    callback: () => {
      const overlayManager = map.getOverlayManager();

      const layer = new Vexcel.Layers.XYZLayer({
        visible: true,
        opacity: 0.85,
        url:
          "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
      });

      overlayManager.addLayer(layer);
    },
  },
});


================================================================================



## 107. Tutorial layers

Tutorial
# Layers
Layer implementation examples:
- XYZ Layer
- WMS Layer
- WMTS Layer
- Bing Layer
- Vector Layer
- Vector Tiles Layer
- WFS Layer
- ArcGIS Layer
- Group Layer

================================================================================



## 108. Tutorial measures 3d geometries

Tutorial
# 3D mode
This tutorial demonstrates how to implement and use 3D measurement tools in your mapping application. 3D measurements allow users to calculate distances, areas, and heights in three-dimensional space, providing more accurate spatial analysis in environments with elevation changes or vertical structures.
You'll learn how to:
- Switch between 2D and 3D viewing modes
- Change map orientation for optimal measurement perspectives
- Use various measurement tools (point, line, polygon, rectangle, circle)
- Measure heights and relative heights of 3D objects
- Monitor 3D data availability status
- Handle measurement events to capture and process measurement data
3D measurement capabilities are essential for advanced spatial analysis applications such as urban planning, construction, telecommunications, and environmental assessment. This functionality enables users to make precise measurements that account for terrain elevation and building heights, resulting in more accurate distance, area, and volumetric calculations.
#### 3d Status
#### Mode Controls
#### Orientation Controls
#### Measurement tools
#### Classes:
- Map
- Measure
- MeasurementManager
- ImageryLayer
### index.html





    
    
    
    



    
            

    
            
        
            
            
            Availability status
            
            
            
                Off
            
            
        
            
        
            
            
            Mode Controls
            
            
            
        
            
        
            
            
            Orientation Controls
            
            
            
            
            
            
        
            
        
            
            
            Measurement tools
            
            
            
            
            
            
        
            
    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  zoom: 19,
  center: [-110.935696, 32.216548],
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [Vexcel.Constants.VexcelLayers.URBAN],
    },
    callback: () => {},
  },
});
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Finish: ${JSON.stringify(
        evt.measure.toGeoJSON()
    )}`
  );
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Change: ${JSON.stringify(
      evt.measure.getMeasurementInfo()
    )}`
  );
});
// event triggered after 3d status change
map.addEventListener(Vexcel.Events.MapEvents.STATUS_3D_MEASURES, (evt) => {
  console.log(
    `3D Measure availability status:${evt.status} inside:${evt.inside}`
  );

  if (evt.status === Vexcel.Constants.Status3D.STOP) {
    document.getElementById("status-3d").className = "badge";
    document.getElementById("status-3d").textContent = "NO DATA";
  }

  if (evt.status === Vexcel.Constants.Status3D.DOWNLOADING) {
    document.getElementById("status-3d").className = "badge download";
    document.getElementById("status-3d").textContent = "DOWNLOADING";
  }

  if (evt.status === Vexcel.Constants.Status3D.FINISHED && evt.inside) {
    document.getElementById("status-3d").className = "badge available";
    document.getElementById("status-3d").textContent = "AVAILABLE";
  }

  if (evt.status === Vexcel.Constants.Status3D.FINISHED && !evt.inside) {
    document.getElementById("status-3d").className = "badge";
    document.getElementById("status-3d").textContent = "NO DATA";
  }
});
function changeMode(mode) {
  map
    .getImageryLayer()
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(
          `Change to mode ${mode} for layer ${response.layer.getName()}`
        );
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}

function changeOrientation(orientation) {
  map
    .getImageryLayer()
    .changeOrientation(orientation)
    .then((response) => {
      console.log(response.msg);
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}
document.getElementById("point").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});



================================================================================



## 109. Tutorial measures change units

Tutorial
# Change units
This tutorial demonstrates how to customize measurement units in your mapping application. Measurement unit customization allows users to view and interpret spatial measurements in their preferred units of measure, enhancing usability for diverse user bases with different regional or professional preferences.
You'll learn how to:
- Switch between metric and imperial measurement systems
- Customize specific units for different measurement types (area, length, slope)
- Apply unit changes programmatically using the MeasurementManager
- Handle measurement events to capture and process measurement data
- Create an intuitive user interface for unit selection
Measurement unit customization is essential for creating user-friendly mapping applications that cater to international audiences and specialized industries. This capability allows users to work with familiar units of measure, reducing cognitive load and improving the accuracy of spatial analysis and decision-making based on measurement results.
#### Measurement tools
#### Measure system
Select unit automatically for each measure in one of this systems Metric/Imperial
#### Measure units
Fix unit for measure type
#### Area units
#### Length units
#### Slope units
#### Classes:
- Map
- Measure
- MeasurementManager
### index.html





    
    
    
    



    
            

        
            
            
            
                
            Measurement tools
            
                
                
                
                
                
            
            
            
            
            
            Measure system
            
            
            Select unit automatically for each measure in one of this systems Metric/Imperial
            
            
            
            
            
            
                
            Area units
            
                
            
            
            
            
                
            Length units
            
                
            
            

            
            
                
            Slope units
            
                
            
            
        
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [Vexcel.Constants.VexcelLayers.URBAN],
    },
    callback: () => {},
  },
});

document.getElementById("measure-system").addEventListener("change", (e) => {
  map.getMeasurementManager().changeMeasureUnits(e.target.value);
});

document.getElementById("area-units").addEventListener("change", (e) => {
  map.getMeasurementManager().changeAreaUnits(e.target.value);
});

document.getElementById("length-units").addEventListener("change", (e) => {
  map.getMeasurementManager().changeLengthUnits(e.target.value);
});

document.getElementById("slope-units").addEventListener("change", (e) => {
  map.getMeasurementManager().changeSlopeUnits(e.target.value);
});

document.getElementById("point").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Finish: ${JSON.stringify(
        evt.measure.toGeoJSON()
    )}`
  );
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Change: ${JSON.stringify(
      evt.measure.getMeasurementInfo()
    )}`
  );
});


================================================================================



## 110. Tutorial measures edit geometries

Tutorial
# Edit
This tutorial demonstrates how to create, edit, and manage measurement geometries in your mapping application. Measurement editing allows users to modify existing measurements, refine spatial analyses, and clear unwanted measurements from the map.
You'll learn how to:
- Create different types of measurement geometries (points, lines, polygons, rectangles, circles)
- Toggle edit mode to modify existing measurements
- Clear all measurements from the map
- Handle measurement events to capture data at different stages
- Process measurement information in GeoJSON format
Measurement editing capabilities are essential for interactive mapping applications that require precise spatial analysis. This functionality allows users to refine their measurements, correct errors, and update analyses as needed, providing a more flexible and user-friendly measurement experience.
#### Classes:
- Map
- Measure
- MeasurementManager
### index.html





    
    
    
    



    
            
    
            
        
            
            
            
            
            
            
        
            
         
            
            
            
        
            
    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
});
document.getElementById("point").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});

document.getElementById("edit").addEventListener('click', function () {
  map.getMeasurementManager().toggleEdit();
});

document.getElementById("clear").addEventListener('click', function () {
  map.getMeasurementManager().clear();
});
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Finish: ${JSON.stringify(
        evt.measure.toGeoJSON()
    )}`
  );
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Change: ${JSON.stringify(
      evt.measure.getMeasurementInfo()
    )}`
  );
});



================================================================================



## 111. Tutorial measures geometries

Tutorial
# 2D mode
This tutorial demonstrates how to implement and use basic measurement tools in your mapping application. Geometric measurements allow users to calculate distances, areas, and other spatial properties directly on the map, providing essential tools for spatial analysis and data interpretation.
You'll learn how to:
- Create different types of measurement geometries (points, lines, polygons, rectangles, circles)
- Activate various measurement tools programmatically
- Handle measurement events to capture data at different stages
- Process measurement information in GeoJSON format
- Track measurement changes in real-time
Measurement capabilities are fundamental for interactive mapping applications that require spatial analysis. This functionality enables users to quantify geographic features, calculate distances between locations, measure areas of interest, and make informed decisions based on accurate spatial measurements.
#### Classes:
- Map
- Measure
- MeasurementManager
### index.html





    
    
    
    



    
            
    
            
        
            
            
            
            
            
            
        
            
    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
});

document.getElementById("point").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});
document
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Finish: ${JSON.stringify(
        evt.measure.toGeoJSON()
    )}`
  );
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Change: ${JSON.stringify(
      evt.measure.getMeasurementInfo()
    )}`
  );
});




================================================================================



## 112. Tutorial measures simple tooltip

Tutorial
# Custom Tooltips
This tutorial demonstrates how to create custom tooltips for measurement data in your mapping application. Measurement tooltips allow you to display elevation and relative height information directly on the map, enhancing the visual feedback and improving the user experience when working with measurement tools.
You'll learn how to:
- Listen for measurement events to capture data changes
- Create point features at measurement locations
- Style text elements to display measurement values
- Conditionally format tooltip content based on measurement types
- Add custom tooltips to the map using vector layers
- Work with 3D measurement data including elevation and relative height
Custom measurement tooltips are valuable for creating more informative and interactive mapping applications. This capability allows users to see measurement results directly on the map without needing to look elsewhere in the interface, making spatial analysis more intuitive and efficient.
#### 3d Status
#### Mode Controls
#### Orientation Controls
#### Measurement tools
#### Classes:
- Feature
- Fill
- ImageryLayer
- Location
- Map
- Measure
- MeasurementManager
- OverlayManager
- Point
- Stroke
- Style
- Text
- VectorLayer
### index.html





    
    
    
    



    
            

    
            
        
            
            
            Availability status
            
            
            
                Off
            
            
        
            
        
            
            
            Mode Controls
            
            
            
        
            
        
            
            
            Orientation Controls
            
            
            
            
            
            
        
            
        
            
            
            Measurement tools
            
            
            
        
            
    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  zoom: 19,
  center: [-110.935696, 32.216548],
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [Vexcel.Constants.VexcelLayers.URBAN],
    },
    callback: () => {},
  },
});

// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Finish: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Change: ${JSON.stringify(
      evt.measure.getMeasurementInfo()
    )}`
  );
  // Point created to show a custom tooltip with the location from the feature
  const point = new Vexcel.Geometry.Point(
    new Vexcel.Geometry.Location(
      evt.measure.getMeasurementInfo().location.value[1],
      evt.measure.getMeasurementInfo().location.value[0]
    )
  );
  const pointFeature = new Vexcel.Feature(point);

  // In this case we have the Point and the Relative Height Tool. If relative elevation has a value, we paint it. Otherwise we paint the elevation.
  const pointText = evt.measure.getMeasurementInfo().relativeElevation
    ? `Relative Elevation ${
        evt.measure.getMeasurementInfo().relativeElevation.valuePretty
      }${evt.measure.getMeasurementInfo().relativeElevation.unit}`
    : `Elevation ${evt.measure.getMeasurementInfo().elevation.valuePretty}${
        evt.measure.getMeasurementInfo().elevation.unit
      }`;

  // Make use of the Style to show the custom text.
  pointFeature.setStyle(
    new Vexcel.Style.Style({
      text: new Vexcel.Style.Text({
        text: pointText,
        fill: new Vexcel.Style.Fill({
          color: "white",
        }),
        offsetY: 25,
        scale: 2,
        stroke: new Vexcel.Style.Stroke({
          color: "black",
        }),
      }),
    })
  );

  // A new layer is created in order to show the text
  const vectorLayer = new Vexcel.Layers.VectorLayer({
    visible: true,
    features: [pointFeature],
  });
  map.getOverlayManager().addLayer(vectorLayer);
});
// event triggered after 3d status change
map.addEventListener(Vexcel.Events.MapEvents.STATUS_3D_MEASURES, (evt) => {
  console.log(
    `3D Measure availability status:${evt.status} inside:${evt.inside}`
  );

  if (evt.status === Vexcel.Constants.Status3D.STOP) {
    document.getElementById("status-3d").className = "badge";
    document.getElementById("status-3d").textContent = "NO DATA";
  }

  if (evt.status === Vexcel.Constants.Status3D.DOWNLOADING) {
    document.getElementById("status-3d").className = "badge download";
    document.getElementById("status-3d").textContent = "DOWNLOADING";
  }

  if (evt.status === Vexcel.Constants.Status3D.FINISHED && evt.inside) {
    document.getElementById("status-3d").className = "badge available";
    document.getElementById("status-3d").textContent = "AVAILABLE";
  }

  if (evt.status === Vexcel.Constants.Status3D.FINISHED && !evt.inside) {
    document.getElementById("status-3d").className = "badge";
    document.getElementById("status-3d").textContent = "NO DATA";
  }
});
function changeMode(mode) {
  map
    .getImageryLayer()
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(
          `Change to mode ${mode} for layer ${response.layer.getName()}`
        );
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}

function changeOrientation(orientation) {
  map
    .getImageryLayer()
    .changeOrientation(orientation)
    .then((response) => {
      console.log(response.msg);
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}
document.getElementById("point").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("relativeHeight").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.RELATIVE_HEIGHT);
});




================================================================================



## 113. Tutorial measures tooltips

Tutorial
# Tooltips
This tutorial demonstrates how to configure and customize built-in measurement tooltips in your mapping application. Measurement tooltips provide immediate visual feedback about distances, areas, and slopes directly on the map, enhancing the user experience and improving spatial analysis capabilities.
You'll learn how to:
- Enable and disable all measurement tooltips
- Selectively control which measurement properties (length, area, slope) are displayed
- Configure tooltip visibility through an intuitive user interface
- Work with different measurement tools (point, line, polygon, rectangle, circle)
- Handle measurement events to capture and process measurement data
Configurable measurement tooltips are essential for creating user-friendly mapping applications that can be adapted to different use cases. This capability allows you to provide just the right amount of information to users, reducing clutter while ensuring that relevant measurement data is clearly visible during spatial analysis tasks.
#### Mode Controls
#### Orientation Controls
#### Tooltips
#### Measurement tools
#### Classes:
- Map
- Measure
- MeasurementManager
- ImageryLayer
### index.html





    
    
    
    



    
            

    
            
            
            Mode Controls
            
            
            
        
            
        
            
            
            Orientation Controls
            
            
            
            
            
            
        
            
        
            
            
            Tooltips
            
            
            
                
                
            
            
            
            
                
                
            
            
            
            
                
                
            
            
            
            
                
                
            
            
        
            
        
            
            
            Measurement tools
            
            
            
            
            
            
        
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  zoom: 19,
  center: [-110.935696, 32.216548],
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [Vexcel.Constants.VexcelLayers.URBAN],
    },
    callback: () => {},
  },
});
document.getElementById("tooltip-visibility").onchange = function () {
  if (this.checked) {
    map.getMeasurementManager().enableTooltips();
  } else {
    map.getMeasurementManager().disableTooltips();
  }
};
document.getElementById("tooltip-length-visibility").onchange = function () {
    if (this.checked) {
        map.getMeasurementManager().enableLengthTooltips();
    } else {
        map.getMeasurementManager().disableLengthTooltips();
    }
};
document.getElementById("tooltip-area-visibility").onchange = function () {
    if (this.checked) {
        map.getMeasurementManager().enableAreaTooltips();
    } else {
        map.getMeasurementManager().disableAreaTooltips();
    }
};
document.getElementById("tooltip-slope-visibility").onchange = function () {
    if (this.checked) {
        map.getMeasurementManager().enableSlopeTooltips();
    } else {
        map.getMeasurementManager().disableSlopeTooltips();
    }
};
// event to receive the measure after it's created
map.addEventListener(Vexcel.Events.MapEvents.START_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Start: ${JSON.stringify(evt.measure.toGeoJSON())}`
  );
});
// event to receive the measure after it's finished
map.addEventListener(Vexcel.Events.MapEvents.FINISH_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Finish: ${JSON.stringify(
        evt.measure.toGeoJSON()
    )}`
  );
});
// event to receive the measure after change
map.addEventListener(Vexcel.Events.MapEvents.CHANGE_MEASURE, (evt) => {
  console.log(
    `MeasurementInfo Change: ${JSON.stringify(
      evt.measure.getMeasurementInfo()
    )}`
  );
});
function changeMode(mode) {
  map
    .getImageryLayer()
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(
          `Change to mode ${mode} for layer ${response.layer.getName()}`
        );
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}

function changeOrientation(orientation) {
  map
    .getImageryLayer()
    .changeOrientation(orientation)
    .then((response) => {
      console.log(response.msg);
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}
document.getElementById("point").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POINT);
});
document.getElementById("line").addEventListener("click", () => {
  map.getMeasurementManager().activate(Vexcel.Constants.MeasurementTools.LINE);
});
document.getElementById("polygon").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.POLYGON);
});
document.getElementById("rectangle").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.RECTANGLE);
});
document.getElementById("circle").addEventListener("click", () => {
  map
    .getMeasurementManager()
    .activate(Vexcel.Constants.MeasurementTools.CIRCLE);
});




================================================================================



## 114. Tutorial measures

Tutorial
# Measures
Measurement examples:
- 2D Measurements
- 3D Measurements
- Change units
- Edit Measurements
- Measurement Tooltips
- Custom Tooltips

================================================================================



## 115. Tutorial start 3d mode

Tutorial
# Init in 3D mode
This tutorial demonstrates how to initialize and configure a Vexcel map in 3D mode, enabling an immersive three-dimensional visualization of geographic data. The 3D mode leverages Vexcel's high-resolution oblique imagery to create detailed, perspective views of landscapes and urban environments.
You'll learn how to:
- Initialize a map specifically in 3D mode
- Set the initial orientation for the 3D view (North, South, East, or West)
- Handle scenarios where 3D imagery might not be available for certain locations
- Understand the configuration options specific to 3D visualization
3D mode provides significant advantages for applications requiring detailed visual analysis, such as urban planning, emergency response, infrastructure inspection, and property assessment. The perspective view allows users to see building heights, terrain elevation, and other vertical elements that aren't visible in traditional 2D maps.
This capability is particularly valuable when combined with Vexcel's high-resolution oblique imagery, which captures buildings and structures from multiple angles, providing comprehensive visual information about the built environment.
#### Classes:
- Map
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const username = USERNAME;
const password = *********;

Vexcel.Services.UserService.getUserInfo(username, password)
  .then((response) => {
    const map = new Vexcel.Map({
      target: "map",
      token: response.token,
      center: [-110.935696, 32.216548],
      mode: "3D",
      orientation: "W",
      //If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
    });
    map.addListener(Vexcel.Events.MapEvents.NO_3D_IMAGES, () => {
      console.log("No images available");
    });
  })
  .catch((e) => {
    console.error(e.message);
    alert(`Login not valid status: ${e.message}`);
  });



================================================================================



## 116. Tutorial start basic

Tutorial
# Init with username/password
This tutorial demonstrates the fundamental process of initializing a Vexcel map using username and password authentication. This is the most basic and common way to authenticate with the Vexcel API and is essential for accessing Vexcel's imagery services.
You'll learn how to:
- Authenticate with the Vexcel platform using username and password credentials
- Retrieve an authentication token from the Vexcel API
- Initialize a map with the authentication token
- Implement proper error handling for authentication failures
Authentication is a critical first step in any application using the Vexcel Map API, as it ensures secure access to Vexcel's imagery services and enforces proper usage according to your subscription level. This tutorial provides the foundation for all other Vexcel Map API functionality, as a valid authentication token is required for most API operations.
Once authenticated, the map will automatically display the default imagery layers associated with your account, and you'll be ready to implement additional functionality as needed.
#### Classes:
- Map
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const username = USERNAME;
const password = *********;

Vexcel.Services.UserService.getUserInfo(username, password)
  .then((response) => {
    const map = new Vexcel.Map({
      target: "map",
      token: response.token,
      //If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
    });
  })
  .catch((e) => {
    console.error(e.message);
    alert(`Login not valid status: ${e.message}`);
  });



================================================================================



## 117. Tutorial start constrained zoom

Tutorial
# Init with constrained zoom levels
This tutorial demonstrates how to initialize a Vexcel map with constrained zoom levels. Zoom level constraints allow you to control the minimum and maximum zoom levels that users can access, ensuring appropriate detail levels for your specific application needs.
You'll learn how to:
- Set maximum zoom level constraints to prevent users from zooming in too closely
- Set minimum zoom level constraints to prevent users from zooming out too far
- Configure both constraints simultaneously for complete zoom control
- Understand when and why to implement zoom constraints in your applications
Zoom level constraints are valuable for applications that need to control the user experience, maintain performance, or ensure appropriate context. By limiting zoom ranges, you can prevent users from accessing detail levels that might be unnecessary, unavailable, or inappropriate for your specific use case, while also ensuring they maintain sufficient context by not zooming out too far.
#### Classes:
- Map
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const username = USERNAME;
const password = *********;

Vexcel.Services.UserService.getUserInfo(username, password)
  .then((response) => {
    const map = new Vexcel.Map({
      target: "map",
      token: response.token,
      center: [-81.6329, 30.26239],
      maxZoom: 16,
      minZoom: 5,
      //If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
    });
  })
  .catch((e) => {
    console.error(e.message);
    alert(`Login not valid status: ${e.message}`);
  });



================================================================================



## 118. Tutorial start image 3d mode

Tutorial
# Init with image 3D mode
This tutorial demonstrates how to initialize and configure a Vexcel map in 3D mode with a specific image, enabling precise control over which oblique imagery is displayed. This capability allows you to target exact images for visualization, ensuring consistent views and enabling detailed analysis of specific captures.
You'll learn how to:
- Initialize a map specifically in 3D mode with a designated image
- Specify exact image identifiers for consistent visualization
- Set the initial orientation for the 3D view (North, South, East, or West)
- Configure map properties like zoom level and map ID for optimal viewing
Image-specific 3D mode provides significant advantages for applications requiring analysis of particular captures, such as temporal comparisons, damage assessment, construction monitoring, and property inspection. By targeting specific images, you can ensure users see exactly the imagery you intend, creating consistent experiences and enabling precise documentation of conditions at specific points in time.
#### Classes:
- Map
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const username = USERNAME;
const password = *********;

Vexcel.Services.UserService.getUserInfo(username, password)
  .then((response) => {
    const map = new Vexcel.Map({
      target: "map",
      token: response.token,
      zoom: 20,
      center: [-110.935696, 32.216548],
      mapId: 378,
      mode: "3D",
      image: "2024~us-az-tanqueverde-2024~images~N_20240215_180444_70_2D2BA17B2795A92_rgb",
      orientation: "N",
    });
    map.addListener(Vexcel.Events.MapEvents.NO_3D_IMAGES, () => {
      console.log("No images available");
    });
  })
  .catch((e) => {
    console.error(e.message);
    alert(`Login not valid status: ${e.message}`);
  });



================================================================================



## 119. Tutorial start multiple maps

Tutorial
# Init with multiple maps
This tutorial demonstrates how to initialize a Vexcel map application that allows users to switch between multiple available maps. This functionality is essential for applications that need to provide access to different geographic datasets or map configurations based on user preferences or requirements.
You'll learn how to:
- Retrieve a list of available maps from the Vexcel API
- Populate a dropdown menu with map options
- Initialize the map with a selected map ID
- Implement map switching functionality
- Handle the cleanup and recreation of map instances
Multiple map support is valuable for applications that serve diverse user needs or provide access to different geographic regions or data types. This capability allows users to seamlessly switch between different maps without reloading the application, creating a more flexible and responsive user experience.
### Map Select
#### Classes:
- Map
### index.html





    
    
    
    


    
            
    
    
    


            

### main.js



const username = USERNAME;
const password = *********;

let userInfo;
Vexcel.Services.UserService.getUserInfo(username, password, Vexcel.Constants.MapVersion.V2)
  .then((response) => {
    const select = document.getElementById("select-maps");
    Array.from(select.options).map((opt) => opt.remove());
    for (let i = 0; i < response.maps.length; i++) {
      select.options[select.options.length] = new Option(response.maps[i].name, response.maps[i].id);
    }
    userInfo = response;
    console.log(`userInfo: ${JSON.stringify(userInfo)}`);
    initMap(response.token, response.maps[0].id);
  })
  .catch((e) => {
    console.error(e.message);
    alert(`Login not valid status: ${e.message}`);
  });

function initMap(token, mapId) {
  const map = new Vexcel.Map({
    target: "map",
    token,
    mapId,
  });
}

function changeMaps() {
  const e = document.getElementById("select-maps");

  // remove previous map
  const map = document.getElementById("map");
  while (map.firstChild) {
    map.removeChild(map.firstChild);
  }
  initMap(userInfo.token, e.value);
}


================================================================================



## 120. Tutorial start no layers

Tutorial
# Init empty map
This tutorial demonstrates how to initialize a Vexcel map without any pre-loaded layers, giving you complete control over which imagery layers are displayed. This approach allows you to create a clean starting point and selectively enable only the specific layers your application needs.
You'll learn how to:
- Initialize a map with empty layer configurations
- Configure the initialConfig property to disable default layers
- Programmatically enable specific imagery layers on demand
- Create user interface controls for toggling layer visibility
Layer control is essential for applications that require fine-grained management of map content, optimized performance, or customized visualization. By starting with no layers and selectively enabling only what's needed, you can create more efficient maps, reduce initial load times, and provide users with a cleaner, more focused experience tailored to specific use cases.
#### Classes:
- ImageryLayer
- Map
### index.html





    
    
    
    



    
            
    
            
        
            
            
            
        
            
    
            
    
            
        
            
            
            
        
            
    
            
    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [],
    },
  }
  // If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});

document.getElementById("urban").onchange = function () {
  const imageryManager = map.getImageryLayer();
  this.checked
    ? imageryLayer.showVexcelSources([Vexcel.Constants.VexcelLayers.URBAN])
    : imageryLayer.hideVexcelSources([Vexcel.Constants.VexcelLayers.URBAN]);
};

document.getElementById("graysky").onchange = function () {
  const imageryManager = map.getImageryLayer();
  this.checked
    ? imageryLayer.showVexcelSources([Vexcel.Constants.VexcelLayers.GRAYSKY])
    : imageryLayer.hideVexcelSources([Vexcel.Constants.VexcelLayers.GRAYSKY]);
};


================================================================================



## 121. Tutorial start restricted extent

Tutorial
# Init map with a restricted extent
This tutorial demonstrates how to initialize a Vexcel map with a restricted geographic extent. Restricted extents allow you to limit the area that users can view on the map, ensuring they stay within a defined region of interest and preventing navigation to irrelevant areas.
You'll learn how to:
- Define a geographic bounding box using coordinate arrays
- Configure the restrictedExtent property when initializing a map
- Understand how extent restrictions affect map navigation
- Implement geographic constraints for focused map applications
Restricted extents are valuable for applications that need to focus user attention on specific geographic areas. This capability allows you to create more focused mapping experiences, prevent users from navigating to areas without relevant data, and optimize performance by limiting the viewable region to areas where you have detailed information to display.
#### Classes:
- Map
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const extent = [-77.82225565753471,34.21940988306059,-77.82012739676574,34.22009132765611];
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  restrictedExtent: extent,
  //If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});


================================================================================



## 122. Tutorial start token

Tutorial
# Init with token
This tutorial demonstrates how to initialize a Vexcel map using a pre-existing authentication token. This approach is ideal for applications where you already have a valid token from a previous authentication process or a token management system.
You'll learn how to:
- Initialize a map directly with an authentication token
- Configure the basic map properties
- Understand token-based authentication workflow
- Implement a streamlined map initialization process
Direct token authentication is valuable for applications that separate the authentication process from map initialization, such as single-page applications with centralized auth management, server-rendered applications that pass tokens to the client, or applications that store tokens securely for reuse. This approach simplifies the map initialization code and allows for more flexible authentication architectures.
#### Classes:
- Map
### index.html





    
    
    
    


    
            

    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  //If no map ID is informed, the used map will be the first map assigned to the user ordered alphabetically
});


================================================================================



## 123. Tutorial start

Tutorial
# Initialization
You can initialize your map in multiple ways.
- Initialize the map with a token
- Initialize the map with a username/password
- Initialize the map with constrained zoom levels
- Initialize an empty map
- Initialize the map with map id
- Initialize the map in 3D mode
- Initialize the map in 3D image mode
- Initialize the map with a restricted extent

================================================================================



## 124. Tutorial styles

Tutorial
# Vector styles
Custom style examples:
- Polygon styles
- Point styles
- Point shapes
- Text styles
- Feature styles

================================================================================



## 125. Tutorial third party bing

Tutorial
# third-party-bing
This tutorial demonstrates how to integrate and synchronize Microsoft Bing Maps with the Vexcel Map API. This integration allows you to leverage both mapping platforms simultaneously, providing complementary features and enabling seamless transitions between different map providers.
You'll learn how to:
- Initialize both Vexcel Map and Bing Maps in the same application
- Synchronize map views between the two platforms (location, zoom level)
- Set up event listeners to maintain coordination between maps
- Toggle visibility between different map providers
- Change view modes (2D/3D) while maintaining synchronization
Third-party map integration is valuable for applications that need to combine the strengths of multiple mapping platforms. This capability allows you to offer users alternative visualization options, leverage specialized features from different providers, and create more flexible and powerful mapping experiences.
#### Vexcel Visibility
#### Mode Controls
#### Classes:
- Location
- Map
### index.html





    
    
    
    


     
            
        
            
        
    
            
    
            
        
            Vexcel Visibility
            
        
        
    
            
    
            
        
            Mode Controls
            
        
        
    
            
    
    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const BING_API_KEY = "YOUR_KEY_BING";
function loadMap() {
  map = new Vexcel.Map({
    target: "vexcel",
    token: API_KEY,
  });
  bingmap = new Microsoft.Maps.Map(document.getElementById("bing"), {
    credentials: BING_API_KEY,
  });
  // subscribe to move events
  map.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
    const location = map.getLocation();
    bingmap.setView({
      center: new Microsoft.Maps.Location(
        location.latitude,
        location.longitude
      ),
      zoom: map.getZoom(),
    });
  });
  Microsoft.Maps.Events.addHandler(bingmap, "viewchangeend", () => {
    const lat = bingmap.getCenter().latitude;
    const lng = bingmap.getCenter().longitude;
    map.setLocation(new Vexcel.Geometry.Location(lat, lng));
    map.setZoom(bingmap.getZoom());
  });
}
function showVexcelMap() {
  document.getElementById("vexcel").style.visibility = "visible";
  document.getElementById("bing").style.visibility = "hidden";
}
function hideVexcelMap() {
  document.getElementById("vexcel").style.visibility = "hidden";
  document.getElementById("bing").style.visibility = "visible";
}
function changeMode(mode) {
  map
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(
          `Change to mode ${mode} for layer ${response.layer.getName()}`
        );
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}


================================================================================



## 126. Tutorial third party cesium

Tutorial
# Cesium
This tutorial demonstrates how to integrate and synchronize Cesium 3D globe with the Vexcel Map API. This integration allows you to leverage both mapping platforms simultaneously, providing advanced 3D visualization capabilities alongside Vexcel's high-resolution imagery.
You'll learn how to:
- Initialize both Vexcel Map and Cesium 3D globe in the same application
- Load 3D tileset data from Vexcel's API into Cesium
- Synchronize map views between the two platforms
- Implement smooth transitions between 2D and 3D viewing modes
- Toggle visibility between different map providers
- Convert between different coordinate systems
Cesium 3D globe integration is valuable for applications that require advanced terrain visualization and 3D modeling capabilities. This capability allows you to combine Vexcel's high-quality imagery with Cesium's powerful 3D rendering engine, creating immersive geospatial experiences that seamlessly transition between 2D and 3D views.
#### Choose Viewing Style
#### ⚠️ How to run locally without errors
To ensure CesiumJS and Vexcel maps work correctly, you must serve the project through a local web server.
            If you open index.html directly in the browser (using file://), you’ll encounter errors such as blob:null or importScripts failed.

index.html


file://


blob:null


importScripts failed

Follow these steps:
- Install Node.js if you haven’t already.
- Open a terminal in the folder where your index.html is located.

index.html

- Run the following command:
                npx http-server

npx http-server


npx http-server

- Open your browser at http://localhost:8080
You can also use the Live Server extension in Visual Studio Code as an alternative.
#### Classes:
- Extent
- ImageryLayer
- Location
- Map
### index.html





    
    
    
    
    
    
    
    
    
    
    

    


    
            

      
            
        
            
        
    
            

    
            

    
            
        
            How to initialize cesium map and sync with map control
            
    
            
    
            
        
            Choose Viewing Style
            
        
        
        
    
            
  


     
            
        
        
    
            
    
            
      
            Choose Viewing Style
            
      
      
      
    
            
    
    


            

### main.js


const API_KEY = "YOUR_KEY";
let isOrtho = false;

// Cesium viewer
let viewer;
let startFoV;
let endFoV;
let startTime;
let endTime;
let duration;

loadMap();

async function loadMap() {
  vexcel = new Vexcel.Map({
    target: "vexcel",
    token: API_KEY,
  });

  // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
  viewer = new Cesium.Viewer("cesiumContainer", {
    requestRenderMode: true,
    animation: false,
    timeline: false,
    baseLayerPicker: false,
    infoBox: false,
    selectionIndicator: false,
    fullscreenButton: false,
    homeButton: false,
    sceneModePicker: false,
    geocoder: false,
    baseLayer: new Cesium.ImageryLayer(
      new Cesium.OpenStreetMapImageryProvider({
        url: "https://tile.openstreetmap.org/",
      })
    ),
  });

  // Load model
  try {
    const tileset = await Cesium.Cesium3DTileset.fromUrl(
        'https://api.vexcelgroup.com/v2/3d/tileset?token=' + API_KEY,
      );

    viewer.scene.primitives.add(tileset);
    viewer.camera.setView({
      destination: new Cesium.Cartesian3.fromDegrees(-117.178316, 32.6809, 500),
    });
  } catch (error) {
    console.error(`Error creating tileset: ${error}`);
  }

  // subscribe to move events
  vexcel.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
    if (document.getElementById("vexcel").style.visibility === "visible") {
      const extent = vexcel.getViewExtent();
      const rectangle = Cesium.Rectangle.fromDegrees(extent.edges[0], extent.edges[1], extent.edges[2], extent.edges[3]
      );
      if (isOrtho) {
        viewer.camera.setView({destination: rectangle});
      } else {
        // get coordinates
        const location = extent.getCenter();
        const center = new Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude, 0);

        const imageMetadata = vexcel.getImageryLayer().getCenterImageMetadata();

        const cameraPosition = utmToLatLonHeight(
          imageMetadata.cameraPosX,
          imageMetadata.cameraPosY,
          imageMetadata.cameraZ,
          imageMetadata.utmZone
        );

        // Rectangle width in meters
        const firstLine = Cesium.Cartesian3.fromRadians(rectangle.west, (rectangle.north + rectangle.south) / 2);
        const secondLine = Cesium.Cartesian3.fromRadians(rectangle.east, (rectangle.north + rectangle.south) / 2);
        const imageDist = Cesium.Cartesian3.distance(firstLine, secondLine);

        const cameraCartesian = Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude, cameraPosition.height);
        const dist = Cesium.Cartesian3.distance(center, cameraCartesian, new Cesium.Cartesian3());

        const direction = Cesium.Cartesian3.subtract(center, cameraCartesian, new Cesium.Cartesian3());
        Cesium.Cartesian3.normalize(direction, direction);

        const headingPitch = getHeadingAndPitch(cameraPosition.latitude, cameraPosition.longitude, cameraPosition.height, location.latitude, location.longitude, 0);

        const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

        viewer.camera.lookAtTransform(transform, new Cesium.HeadingPitchRange(headingPitch.heading, headingPitch.pitch, dist));

        viewer.camera.frustum.fov = Math.atan(imageDist / 2.0 / dist) * 2.0;

        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); // reset to free moving
      }
    }
  });
}

function toRadians(degrees) {
  return degrees * (Math.PI / 180);
}

function toDegrees(radians) {
  return radians * (180 / Math.PI);
}

function getHeadingAndPitch(lat1, lon1, h1, lat2, lon2, h2) {
  // Convert latitude and longitude to radians
  const φ1 = toRadians(lat1);
  const φ2 = toRadians(lat2);
  const λ1 = toRadians(lon1);
  const λ2 = toRadians(lon2);

  // Calculate differences
  const deltaLambda = λ2 - λ1;
  const deltaHeight = h2 - h1;

  // Calculate heading (azimuth)
  const x = Math.sin(deltaLambda) * Math.cos(φ2);
  const y = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(deltaLambda);
  let heading = Math.atan2(x, y);
  heading = toRadians((toDegrees(heading) + 360) % 360); // Convert to degrees and normalize

  // Calculate horizontal distance using haversine formula
  const a = Math.sin((φ2 - φ1) / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin(deltaLambda / 2) ** 2;
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const R = 6371000; // Earth radius in meters
  const horizontalDistance = R * c;

  // Calculate pitch (elevation angle)
  const pitch = Math.atan2(deltaHeight, horizontalDistance);

  return { heading, pitch };
}

function utmToLatLonHeight(x, y, z, utmZone) {
  // Parse the UTM zone
  const zoneNumber = parseInt(utmZone.slice(0, -1), 10);
  const northernHemisphere = utmZone.slice(-1).toUpperCase() === "N";

  // Define the UTM projection string
  const utmProjString = `+proj=utm +zone=${zoneNumber} +ellps=WGS84 ${northernHemisphere ? "" : "+south"}`;
  const wgs84ProjString = "EPSG:4326"; // Standard lat/lon format

  // Perform the coordinate transformation
  const [lon, lat] = proj4(utmProjString, wgs84ProjString, [x, y]);

  // Return the result as an object
  return {
    latitude: lat,
    longitude: lon,
    height: z, // UTM z is preserved as height
  };
}

function showVexcelMap() {
  document.getElementById("vexcel").style.visibility = "visible";
  document.getElementById("cesiumContainer").style.visibility = "hidden";
}

function showCesiumMap() {
  document.getElementById("vexcel").style.visibility = "hidden";
  document.getElementById("cesiumContainer").style.visibility = "visible";

  vexcel
    .changeMode("2D")
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(`Change to mode ${mode} for layer ${response.layer.getName()}`);
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}

function apply2DMode() {
  const mode = "2D";

  const cesiumRectangle = viewer.camera.computeViewRectangle(Cesium.Ellipsoid.WGS84);

  const west = Cesium.Math.toDegrees(cesiumRectangle.west);
  const south = Cesium.Math.toDegrees(cesiumRectangle.south);
  const east = Cesium.Math.toDegrees(cesiumRectangle.east);
  const north = Cesium.Math.toDegrees(cesiumRectangle.north);

  vexcel.setViewExtent(new Vexcel.Geometry.Extent([west, south, east, north]));

  isOrtho = true;

  vexcel
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(`Change to mode ${mode} for layer ${response.layer.getName()}`);
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });

  showVexcelMap();
}

function animateTo3DViewAndSwitchToVexcel() {
  // get coordinates
  const extent = vexcel.getViewExtent();

  const rectangle = Cesium.Rectangle.fromDegrees(extent.edges[0], extent.edges[1], extent.edges[2], extent.edges[3]);
  const endLocation = extent.getCenter();

  const startLocation = getPosition(viewer);
  const startCenter = new Cesium.Cartesian3.fromDegrees(startLocation.longitude, startLocation.latitude, startLocation.height);

  // ToDo: Get elevation using DTM
  const endCenter = new Cesium.Cartesian3.fromDegrees(endLocation.longitude, endLocation.latitude, 0);

  const imageMetadata = vexcel.getImageryLayer().getCenterImageMetadata();

  const cameraPosition = utmToLatLonHeight(imageMetadata.cameraPosX, imageMetadata.cameraPosY, imageMetadata.cameraZ, imageMetadata.utmZone);

  // Rectangle width in meters
  const west = Cesium.Cartesian3.fromRadians(rectangle.west, (rectangle.north + rectangle.south) / 2);
  const east = Cesium.Cartesian3.fromRadians(rectangle.east, (rectangle.north + rectangle.south) / 2);
  const imageDist = Cesium.Cartesian3.distance(west, east);

  const startDist = Cesium.Cartesian3.distance(startCenter, viewer.camera.position, new Cesium.Cartesian3());

  const cameraCartesian = Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude, cameraPosition.height);
  const endDist = Cesium.Cartesian3.distance(endCenter, cameraCartesian, new Cesium.Cartesian3());

  const viewFov = Math.atan(imageDist / 2.0 / endDist) * 2.0;
  startFoV = viewer.camera.frustum.fov;
  endFoV = viewFov;
  startTime = performance.now(); // animation start time
  duration = 5;
  endTime = startTime + duration * 1000;

  const headingPitch = getHeadingAndPitch(cameraPosition.latitude, cameraPosition.longitude, cameraPosition.height, endLocation.latitude, endLocation.longitude, 0);

  const startHeading = viewer.camera.heading;
  const startPitch = viewer.camera.pitch;
  let endHeading = headingPitch.heading;
  const endPitch = headingPitch.pitch;
  if (endHeading - startHeading < -Math.PI) {
    endHeading += 2 * Math.PI;
  } else if (endHeading - startHeading > Math.PI) {
    endHeading -= 2 * Math.PI;
  }

  viewer.clock.onTick.addEventListener(function cameraAnimation() {
    const currentTime = performance.now();
    let t = (currentTime - startTime) / (endTime - startTime);
    // Clamp t between 0 and 1 to ensure it's in the valid range
    t = Math.max(0, Math.min(1, t));

    // Apply quadratic_in_out easing function
    if (t < 0.5) {
      t = 2 * t * t; // Ease in
    } else {
      t = -1 + (4 - 2 * t) * t; // Ease out
    }

    // interpolate
    if (t >= 1) {
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); // reset to free moving
      viewer.clock.onTick.removeEventListener(cameraAnimation);
      showVexcelMap();
    } else if (t > 0) {
      viewer.camera.frustum.fov = (endFoV - startFoV) * t + startFoV;

      const currentHeading = (endHeading - startHeading) * t + startHeading;
      const currentPitch = (endPitch - startPitch) * t + startPitch;
      const currentDist = (endDist - startDist) * t + startDist;
      const currentLat = (endLocation.latitude - startLocation.latitude) * t + startLocation.latitude;
      const currentLon = (endLocation.longitude - startLocation.longitude) * t + startLocation.longitude;
      const currentHeight = (0 - startLocation.height) * t + startLocation.height;
      const currentCenter = new Cesium.Cartesian3.fromDegrees(currentLon, currentLat, currentHeight);
      const transform = Cesium.Transforms.eastNorthUpToFixedFrame(currentCenter);

      viewer.camera.lookAtTransform(transform, new Cesium.HeadingPitchRange(currentHeading, currentPitch, currentDist));
    }
  });
}

function apply3DMode(toCesium) {
  const mode = "3D";

  isOrtho = false;

  vexcel
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(`Change to mode ${mode} for layer ${response.layer.getName()}`);
      }

      if (toCesium) {
        setTimeout(animateTo3DViewAndSwitchToVexcel, 1500);
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}

function changeMode(mode) {
  const cesiumRectangle = viewer.camera.computeViewRectangle(Cesium.Ellipsoid.WGS84);

  const west = Cesium.Math.toDegrees(cesiumRectangle.west);
  const south = Cesium.Math.toDegrees(cesiumRectangle.south);
  const east = Cesium.Math.toDegrees(cesiumRectangle.east);
  const north = Cesium.Math.toDegrees(cesiumRectangle.north);

  vexcel.setViewExtent(new Vexcel.Geometry.Extent([west, south, east, north]));

  const height = viewer.camera.positionCartographic.height;

  const location = getPosition(viewer);
  const lng = location.longitude;
  const lat = location.latitude;

  if (document.getElementById("vexcel").style.visibility !== "visible") {
    if (mode === "2D") {
      // cesium animation here
      viewer.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(lng, lat, height),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: -Cesium.Math.PI_OVER_TWO,
          roll: 0,
        },
        duration: 2.0,
        maximumHeight: height,
        easingFunction: Cesium.EasingFunction.QUADRACTIC_IN_OUT,
        complete: apply2DMode,
      });
    } else {
      apply3DMode(true);
    }
  } else if (mode === "2D") {
    apply2DMode();
  } else {
    apply3DMode(false);
  }
}

function getPosition(view) {
  // credit to Pri Santos on stack overflow
  if (view.scene.mode === 3) {
    const windowPosition = new Cesium.Cartesian2(view.container.clientWidth / 2, view.container.clientHeight / 2);
    const pickRay = view.scene.camera.getPickRay(windowPosition);
    const pickPosition = view.scene.globe.pick(pickRay, view.scene);
    const pickPositionCartographic = view.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);

    return {
      longitude: pickPositionCartographic.longitude * (180 / Math.PI),
      latitude: pickPositionCartographic.latitude * (180 / Math.PI),
      height: pickPositionCartographic.height,
    };
  }
  if (view.scene.mode === 2) {
    const camPos = view.camera.positionCartographic;

    return {
      longitude: camPos.longitude * (180 / Math.PI),
      latitude: camPos.latitude * (180 / Math.PI),
      height: 0,
    };
  }
  return null;
}



================================================================================



## 127. Tutorial third party google sbs

Tutorial
# Google side by side
This tutorial demonstrates how to integrate and synchronize Google Maps with the Vexcel Map API in a side-by-side layout. This integration allows you to display both mapping platforms simultaneously in a vertical arrangement, providing users with a direct comparison between the two map views.
You'll learn how to:
- Initialize both Vexcel Map and Google Maps in the same application
- Configure a vertical layout for displaying maps one above the other
- Synchronize map views between the two platforms (location, zoom level)
- Set up event listeners to maintain coordination between maps
- Change view modes (2D/3D) while maintaining synchronization
Side-by-side map integration is valuable for applications that need to provide visual comparisons between different mapping platforms. This capability allows users to directly compare features, imagery, and data representation between Google Maps and Vexcel Map, making it easier to understand differences in coverage, detail, and visualization approaches.
#### Mode Controls
#### Classes:
- Location
- Map
### index.html





    
    
    
    


     
            
        
            
        
            
    
            
    
            
        
            Mode Controls
            
        
        
    
            
    
    
    


            

### main.js


const API_KEY = "YOUR_KEY";
function loadMap() {
  map = new Vexcel.Map({
    target: "vexcel",
    token: API_KEY,
  });
  const myOptions = {
    rotateControl: false,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: false,
    fullscreenControl: false,
    tilt: 0,
    zoom: 1,
  };
  googleMap = new google.maps.Map(document.getElementById("google"), myOptions);
  googleMap.addListener("dragend", () => {
    const center = [googleMap.getCenter().lng(), googleMap.getCenter().lat()];
    map.setCenter(center);
  });
  googleMap.addListener("zoom_changed", () => {
    map.setZoom(googleMap.getZoom());
  });
  // subscribe to move events
  map.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
    const location = map.getLocation();
    googleMap.setCenter({ lat: location.latitude, lng: location.longitude });
    googleMap.setZoom(map.getZoom());
  });
}
function changeMode(mode) {
  map
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(
          `Change to mode ${mode} for layer ${response.layer.getName()}`
        );
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}


================================================================================



## 128. Tutorial third party google

Tutorial
# Google
This tutorial demonstrates how to integrate and synchronize Google Maps with the Vexcel Map API. This integration allows you to leverage both mapping platforms simultaneously, providing complementary features and enabling seamless transitions between different map providers.
You'll learn how to:
- Initialize both Vexcel Map and Google Maps in the same application
- Synchronize map views between the two platforms (location, zoom level)
- Set up event listeners to maintain coordination between maps
- Toggle visibility between different map providers
- Change view modes (2D/3D) while maintaining synchronization
Google map integration is valuable for applications that need to combine the strengths of multiple mapping platforms. This capability allows you to offer users alternative visualization options, leverage specialized features from different providers, and create more flexible and powerful mapping experiences.
#### Vexcel Visibility
#### Mode Controls
#### Classes:
- Location
- Map
### index.html





    
    
    
    


     
            
        
            
        
    
            
    
            
        
            Vexcel Visibility
            
        
        
    
            
    
            
        
            Mode Controls
            
        
        
    
            
    
    
    


            

### main.js


const API_KEY = "YOUR_KEY";
function loadMap() {
  map = new Vexcel.Map({
    target: "vexcel",
    token: API_KEY,
  });
  const myOptions = {
    rotateControl: false,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: false,
    fullscreenControl: false,
    tilt: 0,
    zoom: 1,
  };
  googleMap = new google.maps.Map(document.getElementById("google"), myOptions);
  googleMap.addListener("dragend", () => {
    const center = [googleMap.getCenter().lng(), googleMap.getCenter().lat()];
    map.setCenter(center);
  });
  googleMap.addListener("zoom_changed", () => {
    map.setZoom(googleMap.getZoom());
  });
  // subscribe to move events
  map.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
    const location = map.getLocation();
    googleMap.setCenter({ lat: location.latitude, lng: location.longitude });
    googleMap.setZoom(map.getZoom());
  });
}
function showVexcelMap() {
  document.getElementById("vexcel").style.visibility = "visible";
  document.getElementById("google").style.visibility = "hidden";
}
function hideVexcelMap() {
  document.getElementById("vexcel").style.visibility = "hidden";
  document.getElementById("google").style.visibility = "visible";
}
function changeMode(mode) {
  map
    .changeMode(mode)
    .then((response) => {
      console.log(response.msg);
      if (response.layer) {
        console.log(
          `Change to mode ${mode} for layer ${response.layer.getName()}`
        );
      }
    })
    .catch((error) => {
      console.log(error);
      alert(error);
    });
}


================================================================================



## 129. Tutorial third party leaflet

Tutorial
# third-party-leaflet
How to initialize a Leaflet map and sync with Vexcel map control
#### Vexcel Visibility
#### Mode Controls
### index.html





    
    
    
    
    
    
    
        
            
            
            
            
        
            
        
            
            
            Vexcel Visibility
            
            
            
        
            
        
            
            
            Mode Controls
            
            
            
        
            
        
        
        
        
    
        

            

### main.js

 
const API_KEY = "YOUR_KEY";

function loadMap() {
    core = new Vexcel.Map({
        target: "vexcel",
        token: API_KEY,
    });

    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '© OpenStreetMap contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 21, attribution: osmAttrib }),
        leafletMap = new L.Map('leafletMap', {
            center: new L.LatLng(latitude, longitude),
            zoom: zoom,
        }),
        drawnItems = L.featureGroup().addTo(leafletMap);
    L.control.layers({ 'osm': osm.addTo(leafletMap) }, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(leafletMap);

    // subscribe to move events
    leafletMap.on('zoomend', function () {
        core.setZoom(leafletMap.getZoom());
    });

    leafletMap.on('moveend', function () {
        const leafLocation = leafletMap.getCenter();
        const location = core.getLocation();
        const point = [location.latitude, location.longitude];
        const leafletPoint = [leafLocation.lat, leafLocation.lng];
        //Use this function to avoid conflicts with syncing while in 3D mode due to geotransformations
        if (!isCenterEquals(point, leafletPoint)) {
            core.setCenter([leafLocation.lng, leafLocation.lat]);
        }
    });

    core.addEventListener(Vexcel.Events.MapEvents.MOVE_END, () => {
        const location = core.getLocation();
        googleMap.setCenter({ lat: location.latitude, lng: location.longitude });
        googleMap.setZoom(core.getZoom());
    });
}

function isCenterEquals(center1, center2) {
    //Epsilon can be adjusted to match your required threshold
    const epsilon = 1e-3
    return (
        Math.abs(center1[0] - center2[0]) < epsilon &&
        Math.abs(center1[1] - center2[1]) < epsilon
    );
}

function showVexcelMap() {
    document.getElementById("vexcel").style.visibility = "visible";
    document.getElementById("leaflet").style.visibility = "hidden";
}

function hideVexcelMap() {
    document.getElementById("vexcel").style.visibility = "hidden";
    document.getElementById("leaflet").style.visibility = "visible";
}

function changeMode(mode) {
    core
        .changeMode(mode)
        .then((response) => {
            console.log(response.msg);
            if (response.layer) {
                console.log(
                    `Change to mode ${mode} for layer ${response.layer.getName()}`
                );
            }
        })
        .catch((error) => {
            console.log(error);
            alert(error);
        });
}
        

================================================================================



## 130. Tutorial third party

Tutorial
# Third party
Third party integration examples:
- Google
- Google side by side
- Cesium

================================================================================



## 131. Tutorial utils transform

Tutorial
# Transform
This tutorial demonstrates how to use the Transform utility for converting between different coordinate systems in your mapping application. Coordinate transformation is essential for integrating with various mapping standards, tile services, and geospatial data formats that use different coordinate representations.
You'll learn how to:
- Convert between tile coordinates (z,x,y) and geographic coordinates (latitude, longitude)
- Transform map locations to their corresponding tile coordinates at specific zoom levels
- Apply coordinate transformations to navigate the map programmatically
- Implement interactive coordinate conversion tools in your application
Coordinate transformation capabilities are fundamental for applications that need to work with multiple coordinate systems, integrate with external tile services, or perform custom map navigation. This functionality enables seamless integration between different mapping standards and provides the foundation for advanced geospatial operations.
#### Transform ZXY tile coordinates to latitude/longitude/zoom location coordinates
#### Transform latitude,longitude,zoom location coordinates to ZXY tile coordinates
#### Classes:
- Location
- Map
- Transform
### index.html





    
    
    
    


    
            
    
            
                
            Transform ZXY tile coordinates to latitude/longitude/zoom location coordinates
            
                
                
                
            
                
            
                
            Result:
            
                
            
            
            
            
            
            
                
            Transform latitude,longitude,zoom location coordinates to ZXY tile coordinates
            
                
                
                
                

            
                
            Result:
            
                
            
            
    
    


            

### main.js


const API_KEY = "YOUR_KEY";
const map = new Vexcel.Map({
  target: "map",
  token: API_KEY,

  initialConfig: {
    overlays: {
      visible: [],
    },
    imageryLayers: {
      visible: [Vexcel.Constants.VexcelLayers.URBAN],
    },
    callback: () => {},
  },
});

document.getElementById("transformTileButton").addEventListener("click", () => {
  const tileCoords = document.getElementById("tileCoords").value.split(",");
  const  location = Vexcel.Utils.Transform.tileToLocation(
    tileCoords[0],
    tileCoords[1],
    tileCoords[2]
  );
  document.getElementById("transformTileResult").value = `${location.latitude},${location.longitude}`;
  map.setLocation(location);
  map.setZoom(tileCoords[0]);
});

document
  .getElementById("transformLocationButton")
  .addEventListener("click", () => {
    const locationString = document
      .getElementById("locationCoords")
      .value.split(",");
    const location = new Vexcel.Geometry.Location(
      locationString[0],
      locationString[1]
    );
    const zoom = document.getElementById("zoom").value;
    map.setLocation(
      new Vexcel.Geometry.Location(locationString[0], locationString[1])
    );
    map.setZoom(zoom);
    const coords = Vexcel.Utils.Transform.locationToTile(location, zoom);
    document.getElementById("transformLocationResult").value = coords;
  });



================================================================================



## 132. Tutorial utils

Tutorial
# Utils
Here are utils to help with using the map and locations.
- Transform coordinates

================================================================================



## 133. Tutorial vector

Tutorial
# vector
Vector data examples:
*Geometries
- Point feature
- Line feature
- Polygon feature
- MultiPolygon feature
*Styles
- Polygon styles
- Point styles
*Measures
- Measures 2D
- Measures 3D
- Measures 3D availability
- Measures Tooltips
- Edit Measures
- Custom Tooltip

================================================================================



## 134. Tutorial walk basic map

Tutorial
# Setup
This document will walk you through getting a basic map set up and displaying inside a div.
### Create Map Div
Getting started with Vexcel API is easy. 

        Simply start by adding a div element to an HTML5 document. This div element will contain our map, so we will give it an id of 'map'. We have to add a fixed height for the map element.
#### Index.html




    
        
    
    
        
            
    
 
            

### Add Vexcel Map API Reference
Add Vexcel Map API Reference using a script tag. This url will ensure that you are accessing the most recently released functionality. If you prefer to use a specific version, replace 'latest' in the url with your chosen version (e.g. '2.0.1'). Also you need to add a reference to css styles.


    
    


Your HTML document should now look like this:
#### Index.html




    
        
        
    
    
        
            
    
    
 
            

### Login and Load Map
You can login either with an API token or with a username and password. In this walkthrough, we will assume that you have already recieved a token.

        Using a script tag or a separate Javascript file, loading Vexcel Map imagery into your div tag takes minimal effort.


const API_KEY = "YOUR_KEY";
const vexcelMap = new Vexcel.Map({
    target: 'vexcelMap',
    token: API_KEY,

});


Embedding this script into a script tag looks like this.
#### Index.html




    
        
        
    
    
        
            
    
    
    
 
            

### Customize Your Map
Now that you've gained access to Vexcel Map API and have designated a div to hold available imagery, the options are limitless! Add a control bar with zoom buttons and orientation controls; overlay custom points, polygons, and lines; programmatically toggle between 2D and 3D imagery; and more.

================================================================================



## 135. Tutorial walk

Tutorial
# Getting Started
Get to know our API by following through our step-by-step getting started walkthrough.