documentation(EJ2-000): source update from ej2-maps-docs
This commit is contained in:
essentialjs2
Родитель
363df79ab2
Коммит
c19770debf
|
|
@ -40,9 +40,9 @@ maps.appendTo('#element');
|
|||
|
||||
## Annotation customization
|
||||
|
||||
**Changing the z-index**
|
||||
### Changing the z-index
|
||||
|
||||
The stack order of an annotation element can be changed using the [`zIndex`](../api/maps/annotationModel/#zindex) property in the [`annotation`](../api/maps/annotationModel) property.
|
||||
The stack order of an annotation element can be changed using the [`zIndex`](../api/maps/annotationModel/#zindex) property in the [`annotation`](../api/maps/annotationModel).
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="annotationZOrder" %}
|
||||
|
||||
|
|
@ -50,9 +50,9 @@ The stack order of an annotation element can be changed using the [`zIndex`](..
|
|||
|
||||
<!-- markdownlint-disable MD036 -->
|
||||
|
||||
**Positioning an Annotation**
|
||||
### Positioning an Annotation
|
||||
|
||||
Annotations can be placed anywhere in the Maps by specifying pixel or percentage values to the [`x`](../api/maps/annotationModel/#x) and [`y`](../api/maps/annotationModel/#y) properties in the [`annotation`](../api/maps/annotationModel) property.
|
||||
Annotations can be placed anywhere in the Maps by specifying pixel or percentage values to the [`x`](../api/maps/annotationModel/#x) and [`y`](../api/maps/annotationModel/#y) properties in the [`annotation`](../api/maps/annotationModel).
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="annotationPosition" %}
|
||||
|
||||
|
|
@ -60,9 +60,9 @@ Annotations can be placed anywhere in the Maps by specifying pixel or percentage
|
|||
|
||||
<!-- markdownlint-disable MD036 -->
|
||||
|
||||
**Alignment of an Annotation**
|
||||
### Alignment of an Annotation
|
||||
|
||||
Annotations can be aligned using the [`horizontalAlignment`](../api/maps/annotationModel/#horizontalalignment) and [`verticalAlignment`](../api/maps/annotationModel/#verticalalignment) properties in the [`annotation`](../api/maps/annotationModel) property. The possible values can be **"Center"**, **"Far"**, **"Near"** and **"None"**.
|
||||
Annotations can be aligned using the [`horizontalAlignment`](../api/maps/annotationModel/#horizontalalignment) and [`verticalAlignment`](../api/maps/annotationModel/#verticalalignment) properties in the [`annotation`](../api/maps/annotationModel). The possible values can be **Center**, **Far**, **Near** and **None**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="annotationAlignment" %}
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ Annotations can be aligned using the [`horizontalAlignment`](../api/maps/annotat
|
|||
|
||||
## Multiple Annotation
|
||||
|
||||
Multiple annotations can be added to the Maps using the [`annotations`](../api/maps/annotationModel) property and customization for the annotations can be done with this property.
|
||||
Multiple annotations can be added to the Maps using the [`annotations`](../api/maps/annotationModel) and customization for the annotations can be done with this property.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="annotation-multiple" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# Bubble
|
||||
|
||||
Bubbles in the Maps control represent the underlying data values of the Maps. It can be scattered throughout the Maps shapes that contain values in the data source. Bubbles are enabled by setting the [`visible`](../api/maps/bubbleSettingsModel/#visible) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) property to **true**.
|
||||
Bubbles in the Maps control represent the underlying data values of the Maps. It can be scattered throughout the Maps shapes that contain values in the data source. Bubbles are enabled by setting the [`visible`](../api/maps/bubbleSettingsModel/#visible) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) to **true**.
|
||||
|
||||
To add bubbles to the Maps, bind the data source to the [`dataSource`](../api/maps/bubbleSettingsModel/#datasource) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) property and set the field name, that contains the numerical data, in the data source to the [`valuePath`](../api/maps/bubbleSettingsModel/#valuepath) property. The following example demonstrates how to enable bubbles for the World map with the data source.
|
||||
To add bubbles to the Maps, bind the data source to the [`dataSource`](../api/maps/bubbleSettingsModel/#datasource) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) and set the field name, that contains the numerical data, in the data source to the [`valuePath`](../api/maps/bubbleSettingsModel/#valuepath) property.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble" %}
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ The following types of shapes are available to render the bubbles in Maps.
|
|||
* Circle
|
||||
* Square
|
||||
|
||||
By default, bubbles are rendered in the **"Circle"** type. To change the type of the bubble, set the [`bubbleType`](../api/maps/bubbleSettingsModel/#bubbletype) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) property as **"Square"** to render the square shape bubbles.
|
||||
By default, bubbles are rendered in the **Circle** type. To change the type of the bubble, set the [`bubbleType`](../api/maps/bubbleSettingsModel/#bubbletype) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) as **Square** to render the square shape bubbles.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble-shape" %}
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ By default, bubbles are rendered in the **"Circle"** type. To change the type of
|
|||
|
||||
## Customization
|
||||
|
||||
The following properties are available in [`bubbleSettings`](../api/maps/bubbleSettingsModel) property to customize the bubbles of the Maps component.
|
||||
The following properties are available in [`bubbleSettings`](../api/maps/bubbleSettingsModel) to customize the bubbles of the Maps component.
|
||||
|
||||
* [`border`](../api/maps/bubbleSettingsModel/#border) – To customize the color, width and opacity of the border of the bubbles in Maps.
|
||||
* [`fill`](../api/maps/bubbleSettingsModel/#fill) – To apply the color for bubbles in Maps.
|
||||
|
|
@ -39,7 +39,7 @@ The following properties are available in [`bubbleSettings`](../api/maps/bubbleS
|
|||
|
||||
## Setting color to the bubbles from the data source
|
||||
|
||||
The color for each bubble in the Maps can be set using the [`colorValuePath`](../api/maps/bubbleSettingsModel/#colorvaluepath) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) property. The value for the [`colorValuePath`](../api/maps/bubbleSettingsModel/#colorvaluepath) property is the field name from the data source of the [`bubbleSettings`](../api/maps/bubbleSettingsModel) property which contains the color values.
|
||||
The color for each bubble in the Maps can be set using the [`colorValuePath`](../api/maps/bubbleSettingsModel/#colorvaluepath) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel). The value for the [`colorValuePath`](../api/maps/bubbleSettingsModel/#colorvaluepath) property is the field name from the data source of the [`bubbleSettings`](../api/maps/bubbleSettingsModel) which contains the color values.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble-colorvaluepath" %}
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ The size of the bubbles is calculated from the values got from the [`valuePath`]
|
|||
|
||||
## Multiple bubble groups
|
||||
|
||||
Multiple groups of bubbles can be added to the Maps using the [`bubbleSettings`](../api/maps/bubbleSettingsModel) property in which the properties of bubbles are added as an array. The customization for the bubbles can be done with the [`bubbleSettings`](../api/maps/bubbleSettingsModel) property. In the following example, the gender-wise population ratio is demonstrated with two different bubble groups.
|
||||
Multiple groups of bubbles can be added to the Maps using the [`bubbleSettings`](../api/maps/bubbleSettingsModel) in which the properties of bubbles are added as an array. The customization for the bubbles can be done with the [`bubbleSettings`](../api/maps/bubbleSettingsModel). In the following example, the gender-wise population ratio is demonstrated with two different bubble groups.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubbleGroup" %}
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ Multiple groups of bubbles can be added to the Maps using the [`bubbleSettings`]
|
|||
|
||||
## Enable tooltip for bubble
|
||||
|
||||
The tooltip for the bubbles can be enabled by setting the [`visible`](../api/maps/tooltipSettingsModel/#visible) property of the [`tooltipSettings`](../api/maps/tooltipSettingsModel) property as **true**. The content for the tooltip can be set using the [`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) property in the [`tooltipSettings`](../api/maps/tooltipSettingsModel) of the [`bubbleSettings`](../api/maps/bubbleSettingsModel) property where the value for the [`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) property is the field name from the data source of the [`bubbleSettings`](../api/maps/bubbleSettingsModel) property. Also added any HTML element as the template in tooltip using the [`template`](../api/maps/tooltipSettingsModel/#template) property.
|
||||
The tooltip for the bubbles can be enabled by setting the [`visible`](../api/maps/tooltipSettingsModel/#visible) property of the [`tooltipSettings`](../api/maps/tooltipSettingsModel) as **true**. The content for the tooltip can be set using the [`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) property in the [`tooltipSettings`](../api/maps/tooltipSettingsModel) of the [`bubbleSettings`](../api/maps/bubbleSettingsModel) where the value for the [`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) property is the field name from the data source of the [`bubbleSettings`](../api/maps/bubbleSettingsModel). Also added any HTML element as the template in tooltip using the [`template`](../api/maps/tooltipSettingsModel/#template) property.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble-tooltip" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
# ColorMapping
|
||||
|
||||
Color mapping is used to customize the shape colors based on the given values. It has three types: range color mapping, equal color mapping and desaturation color mapping. To add color mapping to the shapes of the Maps, bind the data source to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel) property and set the field name which contains the color value in the data source to the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property.
|
||||
Color mapping is used to customize the shape colors based on the given values. It has three types: range color mapping, equal color mapping and desaturation color mapping. To add color mapping to the shapes of the Maps, bind the data source to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel) and set the field name which contains the color value in the data source to the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property.
|
||||
|
||||
## Range color mapping
|
||||
|
||||
Range color mapping applies the color to the shapes of the Maps which matches the numeric values in the data source within the given color mapping ranges. The [`from`](../api/maps/colorMappingSettingsModel/#from) and [`to`](../api/maps/colorMappingSettingsModel/#to) properties in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) property are used to specify the color mapping ranges in the Maps. The following example shows how to apply range color mapping to the shapes with the data source **"Population_Density"** which illustrates the population density of some countries.
|
||||
Range color mapping applies the color to the shapes of the Maps which matches the numeric values in the data source within the given color mapping ranges. The [`from`](../api/maps/colorMappingSettingsModel/#from) and [`to`](../api/maps/colorMappingSettingsModel/#to) properties in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) are used to specify the color mapping ranges in the Maps.
|
||||
|
||||
```typescript
|
||||
export var Population_Density = [
|
||||
|
|
@ -34,7 +34,7 @@ export var Population_Density = [
|
|||
];
|
||||
```
|
||||
|
||||
Bind the **"Population_Density"** data to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) property and set the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel/) property as **"density"**. The range values can be set using the [`from`](../api/maps/colorMappingSettingsModel/#from) and [`to`](../api/maps/colorMappingSettingsModel/#to) properties of [`colorMapping`](../api/maps/colorMappingSettingsModel/) property.
|
||||
Bind the **Population_Density** data to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) and set the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel/) as **density**. The range values can be set using the [`from`](../api/maps/colorMappingSettingsModel/#from) and [`to`](../api/maps/colorMappingSettingsModel/#to) properties of [`colorMapping`](../api/maps/colorMappingSettingsModel/).
|
||||
|
||||
{% tab template="maps/default-map", es5Template="excludecolor" %}
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ Bind the **"Population_Density"** data to the [`dataSource`](../api/maps/layerSe
|
|||
|
||||
## Equal color mapping
|
||||
|
||||
Equal color mapping applies the color to the shapes of the Maps when the [`value`](../api/maps/colorMappingSettingsModel/#value) property of [`colorMapping`](../api/maps/colorMappingSettingsModel/) matches with the values provided in the data source. The following example shows how to apply equal color mapping to the shapes with the data source **"unCountries"** which illustrates the permanent and non-permanent countries in the UN security council.
|
||||
Equal color mapping applies the color to the shapes of the Maps when the [`value`](../api/maps/colorMappingSettingsModel/#value) property of [`colorMapping`](../api/maps/colorMappingSettingsModel/) matches with the values provided in the data source. The following example shows how to apply equal color mapping to the shapes with the data source **unCountries** which illustrates the permanent and non-permanent countries in the UN security council.
|
||||
|
||||
```typescript
|
||||
export var unCountries: object[] = [
|
||||
|
|
@ -64,7 +64,7 @@ export var unCountries: object[] = [
|
|||
];
|
||||
```
|
||||
|
||||
Bind the **"unCountries"** data to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) and set the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel/) property as **"Membership"**. Set the [`value`](../api/maps/colorMappingSettingsModel/#value) property in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) property to **"Permanent"** and **"Non-Permanent"** in the different set of color mapping properties. If the corresponding value of the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property matches with the corresponding field name in the data source, then the given color will be applied.
|
||||
Bind the **unCountries** data to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) and set the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel/) as **Membership**. Set the [`value`](../api/maps/colorMappingSettingsModel/#value) property in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) to **Permanent** and **Non-Permanent** in the different set of color mapping properties. If the corresponding value of the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property matches with the corresponding field name in the data source, then the given color will be applied.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="equal" %}
|
||||
|
||||
|
|
@ -72,9 +72,9 @@ Bind the **"unCountries"** data to the [`dataSource`](../api/maps/layerSettingsM
|
|||
|
||||
## Desaturation color mapping
|
||||
|
||||
Desaturation color mapping applies the color to the shapes of the Maps, similar to the range color mapping. The opacity will be applied in this color mapping based on the [`minOpacity`](../api/maps/colorMappingSettingsModel/#minopacity) and [`maxOpacity`](../api/maps/colorMappingSettingsModel/#maxopacity) properties in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) property.
|
||||
Desaturation color mapping applies the color to the shapes of the Maps, similar to the range color mapping. The opacity will be applied in this color mapping based on the [`minOpacity`](../api/maps/colorMappingSettingsModel/#minopacity) and [`maxOpacity`](../api/maps/colorMappingSettingsModel/#maxopacity) properties in the [`colorMapping`](../api/maps/colorMappingSettingsModel/).
|
||||
|
||||
The following example shows how to apply desaturation color mapping to the shapes with the data source **"Population_Density"** that is available in the [Range color mapping](#range-color-mapping) section. Bind the **"Population_Density"** data to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) property and set the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel/) property as **"density"**. The range values can be set using the [`from`](../api/maps/colorMappingSettingsModel/#from) and [`to`](../api/maps/colorMappingSettingsModel/#to) properties of [`colorMapping`](../api/maps/colorMappingSettingsModel/) property.
|
||||
The following example shows how to apply desaturation color mapping to the shapes with the data source **Population_Density** that is available in the [Range color mapping](#range-color-mapping) section. Bind the **Population_Density** data to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) and set the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel/) as **density**. The range values can be set using the [`from`](../api/maps/colorMappingSettingsModel/#from) and [`to`](../api/maps/colorMappingSettingsModel/#to) properties of [`colorMapping`](../api/maps/colorMappingSettingsModel/).
|
||||
|
||||
{% tab template="maps/default-map", es5Template="desaturation" %}
|
||||
|
||||
|
|
@ -84,7 +84,7 @@ The following example shows how to apply desaturation color mapping to the shape
|
|||
|
||||
Multiple colors can be added to the color mapping which can be used as gradient effect to a specific shape based on the ranges in the data source. By using the [`color`](../api/maps/colorMappingSettingsModel/#color) property of [`colorMapping`](../api/maps/colorMappingSettingsModel/), any number of colors can be set to the shapes as a gradient.
|
||||
|
||||
The following example demonstrates how to use multiple colors in color mapping with the data source **"Population_Density"** that is available in the [Range color mapping](#range-color-mapping) section. Bind the **"Population_Density"** data to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) property and set the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel/) property as **"density"**. The range values can be set using the [`from`](../api/maps/colorMappingSettingsModel/#from) and [`to`](../api/maps/colorMappingSettingsModel/#to) properties of [`colorMapping`](../api/maps/colorMappingSettingsModel/) property.
|
||||
The following example demonstrates how to use multiple colors in color mapping with the data source **Population_Density** that is available in the [Range color mapping](#range-color-mapping) section. Bind the **Population_Density** data to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) and set the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel/) as **density**. The range values can be set using the [`from`](../api/maps/colorMappingSettingsModel/#from) and [`to`](../api/maps/colorMappingSettingsModel/#to) properties of [`colorMapping`](../api/maps/colorMappingSettingsModel/).
|
||||
|
||||
{% tab template="maps/default-map", es5Template="multiplecolors" %}
|
||||
|
||||
|
|
@ -92,9 +92,9 @@ The following example demonstrates how to use multiple colors in color mapping w
|
|||
|
||||
## Color for items excluded from color mapping
|
||||
|
||||
Color mapping can be applied to the shapes in the Maps which does not match color mapping criteria such as range or equal values using the [`color`](../api/maps/colorMappingSettingsModel/#color) property of [`colorMapping`](../api/maps/colorMappingSettingsModel/) property.
|
||||
Color mapping can be applied to the shapes in the Maps which does not match color mapping criteria such as range or equal values using the [`color`](../api/maps/colorMappingSettingsModel/#color) property of [`colorMapping`](../api/maps/colorMappingSettingsModel/).
|
||||
|
||||
The following example shows how to set the color for items excluded from the color mapping with the data source **"Population_Density"** that is available in the [Range color mapping](#range-color-mapping) section. In the following example, color mapping is added for the ranges from 0 to 200. If there are any records in the data source that are outside of this range, the color mapping will not be applied. To apply the color for these excluded items, set the [`color`](../api/maps/colorMappingSettingsModel/#color) property alone in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) property.
|
||||
The following example shows how to set the color for items excluded from the color mapping with the data source **Population_Density** that is available in the [Range color mapping](#range-color-mapping) section. In the following example, color mapping is added for the ranges from 0 to 200. If there are any records in the data source that are outside of this range, the color mapping will not be applied. To apply the color for these excluded items, set the [`color`](../api/maps/colorMappingSettingsModel/#color) property alone in the [`colorMapping`](../api/maps/colorMappingSettingsModel/).
|
||||
|
||||
{% tab template="maps/default-map", es5Template="excludescolor" %}
|
||||
|
||||
|
|
@ -102,7 +102,7 @@ The following example shows how to set the color for items excluded from the col
|
|||
|
||||
## Color mapping for bubbles
|
||||
|
||||
The color mapping types such as range color mapping, equal color mapping and desaturation color mapping are applicable for bubbles in the Maps. To add color mapping for bubbles of the Maps, bind the data source to the [`dataSource`](../api/maps/bubbleSettingsModel/#datasource) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) property and set the field name which contains the color value in the data source to the [`colorValuePath`](../api/maps/bubbleSettingsModel/#colorvaluepath) property. Multiple colors for a single set of bubbles and color for excluded items from [`colorMapping`](../api/maps/colorMappingSettingsModel/) are also applicable for bubbles.
|
||||
The color mapping types such as range color mapping, equal color mapping and desaturation color mapping are applicable for bubbles in the Maps. To add color mapping for bubbles of the Maps, bind the data source to the [`dataSource`](../api/maps/bubbleSettingsModel/#datasource) property of [`bubbleSettings`](../api/maps/bubbleSettingsModel) and set the field name which contains the color value in the data source to the [`colorValuePath`](../api/maps/bubbleSettingsModel/#colorvaluepath) property. Multiple colors for a single set of bubbles and color for excluded items from [`colorMapping`](../api/maps/colorMappingSettingsModel/) are also applicable for bubbles.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="colormapping-bubble" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@ map.appendTo('#element');
|
|||
|
||||
## Maps title
|
||||
|
||||
The title for the Maps can be set using the [`titleSettings`](../api/maps/titleSettingsModel) property. It can be customized using the following properties.
|
||||
The title for the Maps can be set using the [`titleSettings`](../api/maps/titleSettingsModel). It can be customized using the following properties.
|
||||
|
||||
* [`alignment`](../api/maps/titleSettingsModel/#alignment) - To customize the alignment for the text in the title for the Maps. The possible values are "**Center**", "**Near**" and "**Far**".
|
||||
* [`alignment`](../api/maps/titleSettingsModel/#alignment) - To customize the alignment for the text in the title for the Maps. The possible values are **Center**, **Near** and **Far**.
|
||||
* [`description`](../api/maps/titleSettingsModel/#description) - To set the description of the title in Maps.
|
||||
* [`text`](../api/maps/titleSettingsModel/#text) - To set the text for the title in Maps.
|
||||
* [`textStyle`](../api/maps/titleSettingsModel/#textstyle) - To customize the text of the title in Maps.
|
||||
|
|
@ -90,7 +90,7 @@ The Maps control supports following themes.
|
|||
* HighContrastLight
|
||||
* Tailwind
|
||||
|
||||
By default, the Maps are rendered by the **"Material"** theme. The theme of the Maps component is changed using the [`theme`](../api/maps/#theme) property.
|
||||
By default, the Maps are rendered by the **Material** theme. The theme of the Maps component is changed using the [`theme`](../api/maps/#theme) property.
|
||||
|
||||
{% tab template="maps/map-theme", sourceFiles="index.ts,index.html",es5Template="theme" %}
|
||||
|
||||
|
|
@ -158,7 +158,7 @@ map.appendTo('#element');
|
|||
|
||||
## Customizing Maps area
|
||||
|
||||
By default, the background color of the shape maps is set as white. To modify the background color of the Maps area, the [`background`](../api/maps/mapsAreaSettingsModel/#background) property in the [`mapsArea`](../api/maps/mapsAreaSettingsModel) is used. The border of the Maps area can be customized using the [`border`](../api/maps/mapsAreaSettingsModel/#border) property in the [`mapsArea`](../api/maps/mapsAreaSettingsModel) property.
|
||||
By default, the background color of the shape maps is set as **white**. To modify the background color of the Maps area, the [`background`](../api/maps/mapsAreaSettingsModel/#background) property in the [`mapsArea`](../api/maps/mapsAreaSettingsModel) is used. The border of the Maps area can be customized using the [`border`](../api/maps/mapsAreaSettingsModel/#border) property in the [`mapsArea`](../api/maps/mapsAreaSettingsModel).
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="map-area" %}
|
||||
|
||||
|
|
@ -189,7 +189,7 @@ map.appendTo('#element');
|
|||
|
||||
## Customizing the shapes
|
||||
|
||||
The following properties are available in [`shapeSettings`](../api/maps/shapeSettingsModel) property to customize the shapes of the Maps component.
|
||||
The following properties are available in [`shapeSettings`](../api/maps/shapeSettingsModel) to customize the shapes of the Maps component.
|
||||
|
||||
* [`fill`](../api/maps/shapeSettingsModel/#fill) - To apply the color to the shapes.
|
||||
* [`autofill`](../api/maps/shapeSettingsModel/#autofill) - To apply the palette colors to the shapes if it is set as true.
|
||||
|
|
@ -225,7 +225,7 @@ map.appendTo('#element');
|
|||
|
||||
## Setting color to the shapes from the data source
|
||||
|
||||
The color for each shape in the Maps can be set using the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel) property. The value for the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property is the field name from the data source of the [`shapeSettings`](../api/maps/shapeSettingsModel) property which contains the color values.
|
||||
The color for each shape in the Maps can be set using the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property of [`shapeSettings`](../api/maps/shapeSettingsModel). The value for the [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property is the field name from the data source of the [`shapeSettings`](../api/maps/shapeSettingsModel) which contains the color values.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="shape-color" %}
|
||||
|
||||
|
|
@ -257,7 +257,7 @@ map.appendTo('#element');
|
|||
|
||||
## Applying border to individual shapes
|
||||
|
||||
The border of each shape in the Maps can be customized using the [`borderColorValuePath`](../api/maps/shapeSettingsModel/#bordercolorvaluepath) and [`borderWidthValuePath`](../api/maps/shapeSettingsModel/#borderwidthvaluepath) properties to modify the color and the width of the border respectively. The field name in the data source of the layer which contains the color and the width values must be set in the [`borderColorValuePath`](../api/maps/shapeSettingsModel/#bordercolorvaluepath) and [`borderWidthValuePath`](../api/maps/shapeSettingsModel/#borderwidthvaluepath) properties respectively. If the values of [`borderWidthValuePath`](../api/maps/shapeSettingsModel/#borderwidthvaluepath) and [`borderColorValuePath`](../api/maps/shapeSettingsModel/#bordercolorvaluepath) do not match with the field name from the data source, then the color and width of the border will be applied to the shapes using the [`border`](../api/maps/shapeSettingsModel/#border) property in the [`shapeSettings`](../api/maps/shapeSettingsModel) property.
|
||||
The border of each shape in the Maps can be customized using the [`borderColorValuePath`](../api/maps/shapeSettingsModel/#bordercolorvaluepath) and [`borderWidthValuePath`](../api/maps/shapeSettingsModel/#borderwidthvaluepath) properties to modify the color and the width of the border respectively. The field name in the data source of the layer which contains the color and the width values must be set in the [`borderColorValuePath`](../api/maps/shapeSettingsModel/#bordercolorvaluepath) and [`borderWidthValuePath`](../api/maps/shapeSettingsModel/#borderwidthvaluepath) properties respectively. If the values of [`borderWidthValuePath`](../api/maps/shapeSettingsModel/#borderwidthvaluepath) and [`borderColorValuePath`](../api/maps/shapeSettingsModel/#bordercolorvaluepath) do not match with the field name from the data source, then the color and width of the border will be applied to the shapes using the [`border`](../api/maps/shapeSettingsModel/#border) property in the [`shapeSettings`](../api/maps/shapeSettingsModel).
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="shape-border" %}
|
||||
|
||||
|
|
@ -304,7 +304,7 @@ The Maps control supports the following projection types:
|
|||
* Winkel3
|
||||
* AitOff
|
||||
|
||||
By default, the Maps are rendered by the "**Mercator**" projection type in which the Maps are rendered based on the coordinates. So, the Maps is not stretched. To change the type of projection in the Maps, the [`projectionType`](../api/maps/projectionType/) property is used.
|
||||
By default, the Maps are rendered by the **Mercator** projection type in which the Maps are rendered based on the coordinates. So, the Maps is not stretched. To change the type of projection in the Maps, the [`projectionType`](../api/maps/projectionType/) property is used.
|
||||
|
||||
{% tab template="maps/projection", sourceFiles="index.ts,index.html" , es5Template="projection" %}
|
||||
|
||||
|
|
@ -349,4 +349,4 @@ document.getElementById('projectiontype').onchange = function(){
|
|||
}
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
{% endtab %}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: " Data Labels in EJ2 Maps control | Syncfusion "
|
||||
title: "Data Labels in EJ2 Maps control | Syncfusion"
|
||||
|
||||
component: "Maps"
|
||||
|
||||
|
|
@ -8,11 +8,11 @@ description: "Learn here all about Data Labels of Syncfusion EJ2 Maps control an
|
|||
|
||||
# Data labels in EJ2 Maps control
|
||||
|
||||
Data labels provide information to users about the shapes of the Maps control. It can be enabled by setting the [`visible`](../api/maps/dataLabelSettingsModel/#visible) property of the [`dataLabelSettings`](../api/maps/dataLabelSettingsModel/) property to "**true**".
|
||||
Data labels provide information to users about the shapes of the Maps control. It can be enabled by setting the [`visible`](../api/maps/dataLabelSettingsModel/#visible) property of the [`dataLabelSettings`](../api/maps/dataLabelSettingsModel/) to **true**.
|
||||
|
||||
## Adding data labels
|
||||
|
||||
To display data labels in the Maps, the [`labelPath`](../api/maps/dataLabelSettingsModel/#labelpath) property of [`dataLabelSettings`](../api/maps/dataLabelSettingsModel/) property must be used. The value of the [`labelPath`](../api/maps/dataLabelSettingsModel/#labelpath) property can be taken from the field name in the shape data or data source. In the following example, the value of the [`labelPath`](../api/maps/dataLabelSettingsModel/#labelpath) property is the field name in the shape data of the Maps layer.
|
||||
To display data labels in the Maps, the [`labelPath`](../api/maps/dataLabelSettingsModel/#labelpath) of [`dataLabelSettings`](../api/maps/dataLabelSettingsModel/) must be used. The value of the [`labelPath`](../api/maps/dataLabelSettingsModel/#labelpath) property can be taken from the field name in the shape data or data source. In the following example, the value of the [`labelPath`](../api/maps/dataLabelSettingsModel/#labelpath) property is the field name in the shape data of the Maps layer.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="dataLabel" %}
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ In the following example, the value of [`labelPath`](../api/maps/dataLabelSettin
|
|||
|
||||
## Customization
|
||||
|
||||
The following properties are available in the [`dataLabelSettings`](../api/maps/dataLabelSettingsModel/) property to customize the data label of the Maps control.
|
||||
The following properties are available in the [`dataLabelSettings`](../api/maps/dataLabelSettingsModel/) to customize the data label of the Maps control.
|
||||
|
||||
* [`border`](../api/maps/dataLabelSettingsModel/#border) - To customize the color, width and opacity for the border of the data labels in Maps.
|
||||
* [`fill`](../api/maps/dataLabelSettingsModel/#fill) - To apply the color of the data labels in Maps.
|
||||
|
|
@ -63,9 +63,9 @@ The Maps component provides an option to handle the labels when a label intersec
|
|||
|
||||
## Adding data label as a template
|
||||
|
||||
The data label can be added as a template in the Maps component. The [`template`](../api/maps/dataLabelSettingsModel/#template) property of [`dataLabelSettings`](../api/maps/dataLabelSettingsModel) property is used to set the data label as a template. Any text or HTML element can be added as the template in data labels.
|
||||
The data label can be added as a template in the Maps component. The [`template`](../api/maps/dataLabelSettingsModel/#template) property of [`dataLabelSettings`](../api/maps/dataLabelSettingsModel) is used to set the data label as a template. Any text or HTML element can be added as the template in data labels.
|
||||
|
||||
> Note: The customization properties of data label, [`smartLabelMode`](../api/maps/dataLabelSettingsModel/#smartlabelmode) and [`intersectionAction`](../api/maps/dataLabelSettingsModel/#intersectionaction) properties are not applicable to [`template`](../api/maps/dataLabelSettingsModel/#template) property. The styles can be applied to the label template using the CSS styles of the template element.
|
||||
>The customization properties of data label, [`smartLabelMode`](../api/maps/dataLabelSettingsModel/#smartlabelmode) and [`intersectionAction`](../api/maps/dataLabelSettingsModel/#intersectionaction) properties are not applicable to [`template`](../api/maps/dataLabelSettingsModel/#template) property. The styles can be applied to the label template using the CSS styles of the template element.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="labelTemplate" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -235,6 +235,4 @@ in [`tooltipSettings`](../api/maps/tooltipSettingsModel/) object.
|
|||
|
||||
{% tab template="maps/default-map", es5Template="tooltips" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
N> You can refer to our [JavaScript Maps](https://www.syncfusion.com/javascript-ui-controls/js-maps) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Map example](https://ej2.syncfusion.com/demos/#/material/maps/default.html) to know how to render and configure the map.
|
||||
{% endtab %}
|
||||
|
|
@ -8,8 +8,6 @@ description: "Learn here all about Events of Syncfusion EJ2 Maps control and mor
|
|||
|
||||
# Events in EJ2 Maps
|
||||
|
||||
This section explains the list of events that will be triggered for appropriate actions in Maps.
|
||||
|
||||
## animationComplete
|
||||
|
||||
When the animation in the component is completed, the [`animationComplete`](../api/maps/#animationcomplete) event will be triggered. To know more about the arguments of this event, refer [here](../api/maps/iAnimationCompleteEventArgs/)
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ Maps component using [`format`](../api/maps/mapsModel/#format) property in the [
|
|||
|
||||
## Numeric Format
|
||||
|
||||
The numeric formats such as currency, percentage and so on can be displayed in the tooltip and data labels of the Maps using the [`format`](../api/maps/mapsModel/#format) property in the [`Maps`](../api/maps/mapsModel). In the below example, the tooltip is globalized to **"German"** culture. When setting the [`useGroupingSeparator`](../api/maps/mapsModel/#usegroupingseparator) property as "**true**", the numeric text in the Maps separates with the comma separator.
|
||||
The numeric formats such as currency, percentage and so on can be displayed in the tooltip and data labels of the Maps using the [`format`](../api/maps/mapsModel/#format) property in the [`Maps`](../api/maps/mapsModel). In the below example, the tooltip is globalized to **German** culture. When setting the [`useGroupingSeparator`](../api/maps/mapsModel/#usegroupingseparator) property as **true**, the numeric text in the Maps separates with the comma separator.
|
||||
|
||||
```typescript
|
||||
import { Maps, MapsTooltip } from '@syncfusion/ej2-maps';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ The Maps component is rendered through [`layers`](../api/maps/#layers) and any n
|
|||
|
||||
## Multilayer
|
||||
|
||||
The Multilayer support allows loading multiple shapefiles and map providers in a single container, enabling Maps to display more information. The shape layer or map providers are the main layers of the Maps. Multiple layers can be added as **SubLayer** over the main layers using the [`type`](../api/maps/layerSettingsModel/#type) property in the [`layers`](../api/maps/layerSettingsModel/#type) property.
|
||||
The Multilayer support allows loading multiple shapefiles and map providers in a single container, enabling Maps to display more information. The shape layer or map providers are the main layers of the Maps. Multiple layers can be added as **SubLayer** over the main layers using the [`type`](../api/maps/layerSettingsModel/#type) property in the [`layers`](../api/maps/layerSettingsModel/#type).
|
||||
|
||||
## SubLayer
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ In this example, the United States map shape is used as shape data by utilizing
|
|||
|
||||
## Displaying layer in the view
|
||||
|
||||
Multiple shape files and map providers can be loaded simultaneously in Maps. The [`baseLayerIndex`](../api/maps/mapsModel/#baselayerindex) property is used to determine which layer on the user interface should be displayed. This property is used for the Maps drill-down feature, so when the [`baseLayerIndex`](../api/maps/mapsModel/#baselayerindex) value is changed, the corresponding shape is loaded. In this example, two layers can be loaded with the World map and the United States map. Based on the given [`baseLayerIndex`](../api/maps/mapsModel/#baselayerindex) value the corresponding shape will be loaded in the user interface. If the [`baseLayerIndex`](../api/maps/mapsModel/#baselayerindex) value is set to 0, then the world map will be loaded.
|
||||
Multiple shape files and map providers can be loaded simultaneously in Maps. The [`baseLayerIndex`](../api/maps/mapsModel/#baselayerindex) property is used to determine which layer on the user interface should be displayed. This property is used for the Maps drill-down feature, so when the [`baseLayerIndex`](../api/maps/mapsModel/#baselayerindex) value is changed, the corresponding shape is loaded. In this example, two layers can be loaded with the World map and the United States map. Based on the given [`baseLayerIndex`](../api/maps/mapsModel/#baselayerindex) value the corresponding shape will be loaded in the user interface. If the [`baseLayerIndex`](../api/maps/mapsModel/#baselayerindex) value is set to **0**, then the world map will be loaded.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="layerView" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Legend
|
||||
|
||||
A Legend is a key on a Maps that contains descriptions for swatches of symbols. It can be represented in various colors, shapes or other identifiers based on the data and provides valuable information for interpreting what the Maps are displaying. It explains what each symbol in the Maps represents. Legends are enabled by setting the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel) property to **true**.
|
||||
A Legend is a key on a Maps that contains descriptions for swatches of symbols. It can be represented in various colors, shapes or other identifiers based on the data and provides valuable information for interpreting what the Maps are displaying. It explains what each symbol in the Maps represents. Legends are enabled by setting the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel) to **true**.
|
||||
|
||||
## Positioning of the legend
|
||||
|
||||
|
|
@ -12,19 +12,19 @@ The legend can be positioned in the following two ways:
|
|||
|
||||
<b>Absolute position</b>
|
||||
|
||||
The legend of the Maps can be positioned using the [`location`](../api/maps/legendSettingsModel/#location) property in the [`legendSettings`](../api/maps/legendSettingsModel) property, which is based on the margin values of the X and Y axes. For positioning the legend based on margins corresponding to a Maps, the [`position`](../api/maps/legendSettingsModel/#position) property is set as **Float**.
|
||||
The legend of the Maps can be positioned using the [`location`](../api/maps/legendSettingsModel/#location) property in the [`legendSettings`](../api/maps/legendSettingsModel), which is based on the margin values of the X and Y axes. For positioning the legend based on margins corresponding to a Maps, the [`position`](../api/maps/legendSettingsModel/#position) property is set as **Float**.
|
||||
|
||||
<b>Dock position</b>
|
||||
|
||||
Legends are positioned in the following locations within the container. The [`position`](../api/maps/legendSettingsModel/#position) property in [`legendSettings`](../api/maps/legendSettingsModel) property is used to set these options in Maps.
|
||||
Legends are positioned in the following locations within the container. The [`position`](../api/maps/legendSettingsModel/#position) property in [`legendSettings`](../api/maps/legendSettingsModel) is used to set these options in Maps.
|
||||
|
||||
1 Top
|
||||
* Top
|
||||
|
||||
2 Left
|
||||
* Left
|
||||
|
||||
3 Bottom
|
||||
* Bottom
|
||||
|
||||
4 Right
|
||||
* Right
|
||||
|
||||
The above four positions can be aligned combination of **Near**, **Center** and **Far** using [`alignment`](../api/maps/legendSettingsModel/#alignment) property in [`legendSettings`](../api/maps/legendSettingsModel) property. So, the legend can be aligned to 12 positions.
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ export var unCountries: object[] = [
|
|||
];
|
||||
```
|
||||
|
||||
The below code snippet demonstrate the equal color mapping legends for the shapes. To bind the given data source to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/) property. Set the value of [`shapePropertyPath`](../api/maps/layerSettingsModel/#shapepropertypath) to **"name"** and [`shapeDataPath`](../api/maps/layerSettingsModel/#shapedatapath) to **"Country"**. To enable equal color mapping set the [`colorMapping`](../api/maps/colorMappingSettingsModel/) as an array in [`shapeSettings`](../api/maps/shapeSettingsModel/) property. Finally, set the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel) as **true**. The [`label`](../api/maps/colorMappingSettingsModel/#label) property in [`colorMapping`](../api/maps/colorMappingSettingsModel/) property is used to set the text name for legend in Maps.
|
||||
The below code snippet demonstrate the equal color mapping legends for the shapes. To bind the given data source to the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property of [`layerSettings`](../api/maps/layerSettingsModel/). Set the value of [`shapePropertyPath`](../api/maps/layerSettingsModel/#shapepropertypath) to **name** and [`shapeDataPath`](../api/maps/layerSettingsModel/#shapedatapath) to **Country**. To enable equal color mapping set the [`colorMapping`](../api/maps/colorMappingSettingsModel/) as an array in [`shapeSettings`](../api/maps/shapeSettingsModel/). Finally, set the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel) as **true**. The [`label`](../api/maps/colorMappingSettingsModel/#label) property in [`colorMapping`](../api/maps/colorMappingSettingsModel/) property is used to set the text name for legend in Maps.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="legend" %}
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ The below code snippet demonstrate the equal color mapping legends for the shape
|
|||
|
||||
## Legend Shape
|
||||
|
||||
Maps supports the following types of legend shapes. The [`shape`](../api/maps/legendSettingsModel/#shape) property in the [`legendSettings`](../api/maps/legendSettingsModel) property can be used to change the type of legend shapes.
|
||||
Maps supports the following types of legend shapes. The [`shape`](../api/maps/legendSettingsModel/#shape) property in the [`legendSettings`](../api/maps/legendSettingsModel) can be used to change the type of legend shapes.
|
||||
|
||||
* Circle
|
||||
* Rectangle
|
||||
|
|
@ -101,16 +101,16 @@ The following properties are available in legend to customize the legend shape a
|
|||
|
||||
* [`background`](../api/maps/legendSettingsModel/#background) - To customize the background color of the Legend.
|
||||
* [`border`](../api/maps/legendSettingsModel/#border) - To customize the color, width and opacity of the border for the Legend.
|
||||
* [`fill`](../api/maps/legendSettingsModel/#fill) - To apply the color for the Legend in Maps.
|
||||
* [`labelDisplayMode`](../api/maps/legendSettingsModel/#labeldisplaymode) - To customize the display mode for the Legend text in Maps.
|
||||
* [`labelPosition`](../api/maps/legendSettingsModel/#labelposition) - To customize the position of the Legend text in Maps.
|
||||
* [`orientation`](../api/maps/legendSettingsModel/#orientation) - To customize the orientation of the Legend in Maps.
|
||||
* [`textStyle`](../api/maps/legendSettingsModel/#textstyle) - To customize the text style for Legend in Maps.
|
||||
* [`title`](../api/maps/legendSettingsModel/#title) - To apply the title for the Legend in Maps.
|
||||
* [`titleStyle`](../api/maps/legendSettingsModel/#titlestyle)- To customize the style of the title for the Legend in Maps.
|
||||
* [`height`](../api/maps/legendSettingsModel/#height) - To customize the height of the Legend in Maps.
|
||||
* [`width`](../api/maps/legendSettingsModel/#width) - To customize the width of the Legend in Maps.
|
||||
* [`opacity`](../api/maps/legendSettingsModel/#opacity) - To apply the opacity to the Legend in Maps.
|
||||
* [`fill`](../api/maps/legendSettingsModel/#fill) - To apply the color for the Legend.
|
||||
* [`labelDisplayMode`](../api/maps/legendSettingsModel/#labeldisplaymode) - To customize the display mode for the Legend text.
|
||||
* [`labelPosition`](../api/maps/legendSettingsModel/#labelposition) - To customize the position of the Legend text.
|
||||
* [`orientation`](../api/maps/legendSettingsModel/#orientation) - To customize the orientation of the Legend.
|
||||
* [`textStyle`](../api/maps/legendSettingsModel/#textstyle) - To customize the text style for Legend.
|
||||
* [`title`](../api/maps/legendSettingsModel/#title) - To apply the title for the Legend .
|
||||
* [`titleStyle`](../api/maps/legendSettingsModel/#titlestyle)- To customize the style of the title for the Legend.
|
||||
* [`height`](../api/maps/legendSettingsModel/#height) - To customize the height of the Legend.
|
||||
* [`width`](../api/maps/legendSettingsModel/#width) - To customize the width of the Legend.
|
||||
* [`opacity`](../api/maps/legendSettingsModel/#opacity) - To apply the opacity to the Legend.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="legend-customization" %}
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ The following properties are available in legend to customize the legend shape a
|
|||
|
||||
## Legend for items excluded from color mapping
|
||||
|
||||
The legend can be enabled for items excluded from the color mapping using the [`color`](../api/maps/colorMappingSettingsModel/#color) property in [`colorMapping`](../api/maps/colorMappingSettingsModel/) property. Refer to the **"population_density"** data which demonstrates the population density of some countries.
|
||||
The legend can be enabled for items excluded from the color mapping using the [`color`](../api/maps/colorMappingSettingsModel/#color) property in [`colorMapping`](../api/maps/colorMappingSettingsModel/) property. Refer to the **population_density** data which demonstrates the population density of some countries.
|
||||
|
||||
```typescript
|
||||
export var population_density = [
|
||||
|
|
@ -148,7 +148,7 @@ export var population_density = [
|
|||
];
|
||||
```
|
||||
|
||||
The following example shows how to enable legend for items excluded from the color mapping. In the following example, color mapping is added for the ranges from 0 to 200. If there are any records in the data source that are outside of this range, the color mapping will not be applied. To apply the color for these excluded items, set the [`color`](../api/maps/colorMappingSettingsModel/#color) property alone in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) property. To enable legend for these items, set the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel/) property to **true**.
|
||||
The following example shows how to enable legend for items excluded from the color mapping. In the following example, color mapping is added for the ranges from 0 to 200. If there are any records in the data source that are outside of this range, the color mapping will not be applied. To apply the color for these excluded items, set the [`color`](../api/maps/colorMappingSettingsModel/#color) property alone in the [`colorMapping`](../api/maps/colorMappingSettingsModel/). To enable legend for these items, set the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel/) to **true**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="legend-shape" %}
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ The following example shows how to enable legend for items excluded from the col
|
|||
|
||||
## Hide desired legend items
|
||||
|
||||
Use the [`showLegend`](../api/maps/colorMappingSettingsModel/#showlegend) property in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) property to show or hide the desired legend items in Maps. If the [`showLegend`](../api/maps/colorMappingSettingsModel/#showlegend) property is set to **false**, the legend item will be hidden. otherwise, it will be visible.
|
||||
Use the [`showLegend`](../api/maps/colorMappingSettingsModel/#showlegend) property in the [`colorMapping`](../api/maps/colorMappingSettingsModel/) to show or hide the desired legend items in Maps. If the [`showLegend`](../api/maps/colorMappingSettingsModel/#showlegend) property is set to **false**, the legend item will be hidden. otherwise, it will be visible.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="hidedesiredlegend" %}
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ Use the [`showLegend`](../api/maps/colorMappingSettingsModel/#showlegend) proper
|
|||
|
||||
## Hide legend items based on data source value
|
||||
|
||||
Depending on the values provided in the data source, the legend items will be hidden or visible. Bind the field name that contains the visibility state in the data source to the [`showLegendPath`](../api/maps/legendSettingsModel/#showlegendpath) property of the [`legendSettings`](../api/maps/legendSettingsModel/) property to achieve this.
|
||||
Depending on the values provided in the data source, the legend items will be hidden or visible. Bind the field name that contains the visibility state in the data source to the [`showLegendPath`](../api/maps/legendSettingsModel/#showlegendpath) property of the [`legendSettings`](../api/maps/legendSettingsModel/) to achieve this.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="hidedesiredlegendDS" %}
|
||||
|
||||
|
|
@ -172,7 +172,7 @@ Depending on the values provided in the data source, the legend items will be hi
|
|||
|
||||
## Bind legend item text from data source
|
||||
|
||||
To show the legend text based on values provided in the data source, use the [`valuePath`](../api/maps/legendSettingsModel/#valuepath) property in the [`legendSettings`](../api/maps/legendSettingsModel/) property.
|
||||
To show the legend text based on values provided in the data source, use the [`valuePath`](../api/maps/legendSettingsModel/#valuepath) property in the [`legendSettings`](../api/maps/legendSettingsModel/).
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="bindlegendtext" %}
|
||||
|
||||
|
|
@ -180,7 +180,7 @@ To show the legend text based on values provided in the data source, use the [`v
|
|||
|
||||
## Hide duplicate legend items
|
||||
|
||||
To hide the duplicate legend items in Maps, set the [`removeDuplicateLegend`](../api/maps/legendSettingsModel/#removeduplicatelegend) property to **true** in the [`legendSettings`](../api/maps/legendSettingsModel/) property.
|
||||
To hide the duplicate legend items in Maps, set the [`removeDuplicateLegend`](../api/maps/legendSettingsModel/#removeduplicatelegend) property to **true** in the [`legendSettings`](../api/maps/legendSettingsModel/).
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="duplicatelegend" %}
|
||||
|
||||
|
|
@ -188,7 +188,7 @@ To hide the duplicate legend items in Maps, set the [`removeDuplicateLegend`](..
|
|||
|
||||
## Toggle option in legend
|
||||
|
||||
The toggle option has been provided for legend. If the legend can be toggled, the given color will be changed to the corresponding map shape item. To enable the toggle options in Legend, set the [`enable`](../api/maps/toggleLegendSettingsModel/#enable) property of the [`toggleLegendSettings`](../api/maps/toggleLegendSettingsModel) property to **true**.
|
||||
The toggle option has been provided for legend. If the legend can be toggled, the given color will be changed to the corresponding map shape item. To enable the toggle options in Legend, set the [`enable`](../api/maps/toggleLegendSettingsModel/#enable) property of the [`toggleLegendSettings`](../api/maps/toggleLegendSettingsModel) to **true**.
|
||||
|
||||
The following properties are available to customize the toggle option in legend.
|
||||
|
||||
|
|
@ -197,15 +197,13 @@ The following properties are available to customize the toggle option in legend.
|
|||
* [`opacity`](../api/maps/toggleLegendSettingsModel/#opacity) – To customize the transparency for the shapes for which legend item is toggled.
|
||||
* [`border`](../api/maps/toggleLegendSettingsModel/#border) – To customize the color, width and opacity of the border of the shapes in Maps.
|
||||
|
||||
The following example demonstrates how to enable the toggle option to legend.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="togglelegend" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Enable legend for bubble
|
||||
|
||||
To enable the legend for the bubble by setting the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel) property as **true** and [`type`](../api/maps/legendSettingsModel/#type) property of [`legendSettings`](../api/maps/legendSettingsModel) property as **"Bubbles"**. Refer to the below code snippet to enable the legend for bubbles with each bubble different colors rendering.
|
||||
To enable the legend for the bubble by setting the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel) property as **true** and [`type`](../api/maps/legendSettingsModel/#type) property of [`legendSettings`](../api/maps/legendSettingsModel) as **Bubbles**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="bubble-legend" %}
|
||||
|
||||
|
|
@ -213,7 +211,7 @@ To enable the legend for the bubble by setting the [`visible`](../api/maps/legen
|
|||
|
||||
## Enable legend for markers
|
||||
|
||||
To enable legend for marker by setting the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel) as **true** and [`type`](../api/maps/legendSettingsModel/#type) property of [`legendSettings`](../api/maps/legendSettingsModel) property as **"Markers"**. The [`legendText`](../api/maps/markerSettingsModel/#legendtext) property in the [`markerSettings`](../api/maps/markerSettingsModel) property can be used to show the legend text based on values provided in the data source. Refer to the below example to enable the legend for the markers.
|
||||
To enable legend for marker by setting the [`visible`](../api/maps/legendSettingsModel/#visible) property of [`legendSettings`](../api/maps/legendSettingsModel) as **true** and [`type`](../api/maps/legendSettingsModel/#type) property of [`legendSettings`](../api/maps/legendSettingsModel) as **Markers**. The [`legendText`](../api/maps/markerSettingsModel/#legendtext) property in the [`markerSettings`](../api/maps/markerSettingsModel) property can be used to show the legend text based on values provided in the data source.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="legend-marker" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Map control support map providers such as OpenStreetMap that can be added to any
|
|||
|
||||
### Enable OSM
|
||||
|
||||
You can enable this feature by setting the layerType property value as “OSM”.
|
||||
You can enable this feature by setting the layerType property value as **OSM**.
|
||||
|
||||
``` typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
# Markers
|
||||
|
||||
Markers are notes that are used to leave a message on the Maps. It indicates or marks a specific location with desired symbols on the Maps. It can be enabled by setting the [`visible`](../api/maps/markerSettingsModel/#visible) property of the [`markerSettings`](../api/maps/markerSettingsModel/) property to **true**.
|
||||
Markers are notes that are used to leave a message on the Maps. It indicates or marks a specific location with desired symbols on the Maps. It can be enabled by setting the [`visible`](../api/maps/markerSettingsModel/#visible) property of the [`markerSettings`](../api/maps/markerSettingsModel/) to **true**.
|
||||
|
||||
## Adding marker
|
||||
|
||||
The [`dataSource`](../api/maps/markerSettingsModel/#datasource) property of the [`markerSettings`](../api/maps/markerSettingsModel/) property has a list of objects that contains the data for Markers. Using this property, any number of markers can be added to the shape layers. By default, it displays the markers based on the specified latitude and longitude in the given data source. Each data source object contains the following list of properties.
|
||||
The [`dataSource`](../api/maps/markerSettingsModel/#datasource) property of the [`markerSettings`](../api/maps/markerSettingsModel/) has a list of objects that contains the data for Markers. Using this property, any number of markers can be added to the shape layers. By default, it displays the markers based on the specified latitude and longitude in the given data source. Each data source object contains the following list of properties.
|
||||
|
||||
* label - Text that displays some information about the marker in text format.
|
||||
* latitude - The latitude point which determines the X location of the marker.
|
||||
* longitude - The longitude point which determines the Y location of the marker.
|
||||
|
||||
**Note:** markerSettings is an Array property.
|
||||
>markerSettings is an Array property.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker-adding" %}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ The [`dataSource`](../api/maps/markerSettingsModel/#datasource) property of the
|
|||
|
||||
## Adding marker template
|
||||
|
||||
The Marker can be added as a template in the Maps component. The [`template`](../api/maps/markerSettingsModel/#template) property of the [`markerSettings`](../api/maps/markerSettingsModel/) property is used to set the Marker as a template. HTML element or id of an element can be added as the template in Markers.
|
||||
The Marker can be added as a template in the Maps component. The [`template`](../api/maps/markerSettingsModel/#template) property of the [`markerSettings`](../api/maps/markerSettingsModel/) is used to set the Marker as a template. HTML element or id of an element can be added as the template in Markers.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker" %}
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ The Marker can be added as a template in the Maps component. The [`template`](..
|
|||
|
||||
## Customization
|
||||
|
||||
The following properties are available in [`markerSettings`](../api/maps/markerSettingsModel/) property to customize the Markers of the Maps component.
|
||||
The following properties are available in [`markerSettings`](../api/maps/markerSettingsModel/) to customize the Markers of the Maps component.
|
||||
|
||||
* [`border`](../api/maps/markerSettingsModel/#border) - To customize the color, width and opacity of the border for the markers in Maps.
|
||||
* [`fill`](../api/maps/markerSettingsModel/#fill) - To apply the color for markers in Maps.
|
||||
|
|
@ -46,7 +46,7 @@ The following properties are available in [`markerSettings`](../api/maps/markerS
|
|||
|
||||
## Marker shapes
|
||||
|
||||
The Maps component supports the following marker shapes. To set the shape of the marker, the [`shape`](../api/maps/markerSettingsModel/#shape) property in [`markerSettings`](../api/maps/markerSettingsModel) property is used.
|
||||
The Maps component supports the following marker shapes. To set the shape of the marker, the [`shape`](../api/maps/markerSettingsModel/#shape) property in [`markerSettings`](../api/maps/markerSettingsModel) is used.
|
||||
|
||||
* Balloon
|
||||
* Circle
|
||||
|
|
@ -61,7 +61,7 @@ The Maps component supports the following marker shapes. To set the shape of the
|
|||
|
||||
## Rendering Marker shape as image
|
||||
|
||||
To render a marker as an image in Maps, set the [`shape`](../api/maps/markerSettingsModel/#shape) property of [`markerSettings`](../api/maps/markerSettingsModel/) as **Image** and specify the path of the image to [`imageUrl`](../api/maps/markerSettingsModel/#imageurl) property. There is another way to render a marker as an image using the [`imageUrlValuePath`](../api/maps/markerSettingsModel/#imageurlvaluepath) property of the [`markerSettings`](../api/maps/markerSettingsModel/) property. Bind the field name that contains the path of the image in the data source to the [`imageUrlValuePath`](../api/maps/markerSettingsModel/#imageurlvaluepath) property.
|
||||
To render a marker as an image in Maps, set the [`shape`](../api/maps/markerSettingsModel/#shape) property of [`markerSettings`](../api/maps/markerSettingsModel/) as **Image** and specify the path of the image to [`imageUrl`](../api/maps/markerSettingsModel/#imageurl) property. There is another way to render a marker as an image using the [`imageUrlValuePath`](../api/maps/markerSettingsModel/#imageurlvaluepath) property of the [`markerSettings`](../api/maps/markerSettingsModel/). Bind the field name that contains the path of the image in the data source to the [`imageUrlValuePath`](../api/maps/markerSettingsModel/#imageurlvaluepath) property.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker-image" %}
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ To render a marker as an image in Maps, set the [`shape`](../api/maps/markerSett
|
|||
|
||||
## Multiple marker groups
|
||||
|
||||
Multiple group of markers can be added to the Maps using the [`markerSettings`](../api/maps/markerSettingsModel) property in which the properties of markers are added as an array. The customization for the markers can be done with the [`markerSettings`](../api/maps/markerSettingsModel) property.
|
||||
Multiple group of markers can be added to the Maps using the [`markerSettings`](../api/maps/markerSettingsModel) in which the properties of markers are added as an array. The customization for the markers can be done with the [`markerSettings`](../api/maps/markerSettingsModel).
|
||||
|
||||
{% tab template="maps/default-map", es5Template="markerGroup" %}
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ Multiple group of markers can be added to the Maps using the [`markerSettings`](
|
|||
|
||||
### Bind different colors and shapes to the marker from data source
|
||||
|
||||
Using the [`shapeValuePath`](../api/maps/markerSettingsModel/#shapevaluepath) and [`colorValuePath`](../api/maps/markerSettingsModel/#colorvaluepath) properties, apply the color and shape of the marker from the given data source. Bind the data source to the [`dataSource`](../api/maps/markerSettingsModel/#datasource) property of the [`markerSettings`](../api/maps/markerSettingsModel/) property and set the field names that contains the shape and color values in the data source to the [`shapeValuePath`](../api/maps/markerSettingsModel/#shapevaluepath) and [`colorValuePath`](../api/maps/markerSettingsModel/#colorvaluepath) properties. A default marker object is represented by a **balloon** shape. To set various shapes to the marker object by using the [`shape`](../api/maps/markerSettingsModel/#shape) property in [`markerSettings`](../api/maps/markerSettingsModel/).
|
||||
Using the [`shapeValuePath`](../api/maps/markerSettingsModel/#shapevaluepath) and [`colorValuePath`](../api/maps/markerSettingsModel/#colorvaluepath) properties, apply the color and shape of the marker from the given data source. Bind the data source to the [`dataSource`](../api/maps/markerSettingsModel/#datasource) property of the [`markerSettings`](../api/maps/markerSettingsModel/) and set the field names that contains the shape and color values in the data source to the [`shapeValuePath`](../api/maps/markerSettingsModel/#shapevaluepath) and [`colorValuePath`](../api/maps/markerSettingsModel/#colorvaluepath) properties. A default marker object is represented by a **balloon** shape. To set various shapes to the marker object by using the [`shape`](../api/maps/markerSettingsModel/#shape) property in [`markerSettings`](../api/maps/markerSettingsModel/).
|
||||
|
||||
The following shapes are used for the marker object.
|
||||
|
||||
|
|
@ -119,7 +119,7 @@ The Maps is initially scaled to the center value based on the marker distance. T
|
|||
|
||||
Maps provide support to hide and cluster markers when they overlap each other. The number on a cluster indicates how many overlapped markers it contains. If zooming any of the cluster locations in Maps, the number on the cluster will decrease and begin to see the individual markers on the map. When zooming out, the overlapping marker will increase so that it can cluster again and increase the count over the cluster.
|
||||
|
||||
To enable clustering in markers, set the [`allowClustering`](../api/maps/markerClusterSettingsModel/#allowclustering) property of [`markerClusterSettings`](../api/maps/markerClusterSettingsModel) as **true** and customization of clustering can be done with the [`markerClusterSettings`](../api/maps/markerClusterSettingsModel) property.
|
||||
To enable clustering in markers, set the [`allowClustering`](../api/maps/markerClusterSettingsModel/#allowclustering) property of [`markerClusterSettings`](../api/maps/markerClusterSettingsModel) as **true** and customization of clustering can be done with the [`markerClusterSettings`](../api/maps/markerClusterSettingsModel).
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="cluster" %}
|
||||
|
||||
|
|
@ -155,7 +155,7 @@ The cluster is formed by grouping an identical and non-identical marker from the
|
|||
|
||||
## Tooltip for marker
|
||||
|
||||
Tooltip is used to display more information about a marker on mouse over or touch end event. This can be enabled separately for marker by setting the [`visible`](../api/maps/tooltipSettingsModel/#visible) property or [`tooltipSettings`](../api/maps/tooltipSettingsModel) property to **true**. The [`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) property in the [`tooltipSettings`](../api/maps/tooltipSettingsModel) takes the field name that presents in dataSource and displays that value as tooltip text. The following example illustrates enabling the tooltip for the marker.
|
||||
Tooltip is used to display more information about a marker on mouse over or touch end event. This can be enabled separately for marker by setting the [`visible`](../api/maps/tooltipSettingsModel/#visible) property or [`tooltipSettings`](../api/maps/tooltipSettingsModel) to **true**. The [`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) property in the [`tooltipSettings`](../api/maps/tooltipSettingsModel) takes the field name that presents in dataSource and displays that value as tooltip text.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker-tooltip" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
# Navigation Lines
|
||||
|
||||
The navigation lines are used to denote the path between two locations. This feature can be used to draw flight or sea routes. Navigation lines are enabled by setting the [`visible`](../api/maps/navigationLineSettingsModel/#visible) property of the [`navigationLineSettings`](../api/maps/navigationLineSettingsModel) property to **true**.
|
||||
The navigation lines are used to denote the path between two locations. This feature can be used to draw flight or sea routes. Navigation lines are enabled by setting the [`visible`](../api/maps/navigationLineSettingsModel/#visible) property of the [`navigationLineSettings`](../api/maps/navigationLineSettingsModel) to **true**.
|
||||
|
||||
## Customization
|
||||
|
||||
The following properties are available in [`navigationLineSettings`](../api/maps/navigationLineSettingsModel/) property to customize the navigation line of the Maps component.
|
||||
The following properties are available in [`navigationLineSettings`](../api/maps/navigationLineSettingsModel/) to customize the navigation line of the Maps component.
|
||||
|
||||
* [`color`](../api/maps/navigationLineSettingsModel/#color) - To apply the color for navigation lines in Maps.
|
||||
* [`dashArray`](../api/maps/navigationLineSettingsModel/#dasharray) - To define the pattern of dashes and gaps that is applied to the outline of the navigation lines.
|
||||
|
|
@ -19,7 +19,7 @@ The following properties are available in [`navigationLineSettings`](../api/maps
|
|||
|
||||
## Enabling the arrows
|
||||
|
||||
To enable the arrow in the navigation line, set the [`showArrow`](../api/maps/arrowModel/#showarrow) property of [`arrowSettings`](../api/maps/navigationLineSettingsModel/#arrowsettings) property to **true**. The following properties are available in [`arrowSettings`](../api/maps/navigationLineSettingsModel/#arrowsettings) property to customize the arrow of the navigation lines.
|
||||
To enable the arrow in the navigation line, set the [`showArrow`](../api/maps/arrowModel/#showarrow) property of [`arrowSettings`](../api/maps/navigationLineSettingsModel/#arrowsettings) to **true**. The following properties are available in [`arrowSettings`](../api/maps/navigationLineSettingsModel/#arrowsettings) to customize the arrow of the navigation lines.
|
||||
|
||||
* [`color`](../api/maps/arrowModel/#color) - To apply the color for arrow of the navigation line.
|
||||
* [`offset`](../api/maps/arrowModel/#offset) - To customize the offset position of the arrow of the navigation line.
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ The following properties in the [`layers`](../api/maps/layerSettingsModel/) are
|
|||
|
||||
The [`shapePropertyPath`](../api/maps/layerSettingsModel/#shapepropertypath) property is used to refer to the column name in the [`shapeData`](../api/maps/layerSettingsModel/#shapedata) property of shape layers to identify the shape. When the values of [`shapeDataPath`](../api/maps/layerSettingsModel/#shapedatapath) property from the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property and [`shapePropertyPath`](../api/maps/layerSettingsModel/#shapepropertypath) property from the [`shapeData`](../api/maps/layerSettingsModel/#shapedata) property match, then the associated object from the data source is bound to the corresponding shape.
|
||||
|
||||
> `world-map.js` file contains following data and its field **"name"** value is used to map the corresponding shape with the provided data source.
|
||||
>`world-map.js` file contains following data and its field **name** value is used to map the corresponding shape with the provided data source.
|
||||
|
||||
```javascript
|
||||
export var world_map = {
|
||||
|
|
@ -92,7 +92,7 @@ export var world_map = {
|
|||
|
||||
The [`shapeDataPath`](../api/maps/layerSettingsModel/#shapedatapath) property is similar to the [`shapePropertyPath`](../api/maps/layerSettingsModel/#shapepropertypath) property, but it refers to the field name in the [`dataSource`](../api/maps/layerSettingsModel/#datasource) property. For example, [populationData](#data-source) contains the **code**, **value**, **name**, **population** and **density** fields. Here, the **name** field is set to the shapeDataPath to map the corresponding name field value of shape data.
|
||||
|
||||
In the below example, both "name" fields contain the same value as "Afghanistan", this value is matched in both shape data and data source, so that the details associated with "Afghanistan" will be mapped to the corresponding shape and used to color the corresponding shape, display data labels, display tooltips, and more.
|
||||
In the below example, both **name** fields contain the same value as **Afghanistan**, this value is matched in both shape data and data source, so that the details associated with **Afghanistan** will be mapped to the corresponding shape and used to color the corresponding shape, display data labels, display tooltips, and more.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="population-data" %}
|
||||
|
||||
|
|
@ -108,8 +108,6 @@ To bind the data field from data source to the maps in two different ways.
|
|||
2. Bind the field name as `data.field` to the properties as [`shapeDataPath`](../api/maps/layerSettingsModel/#shapedatapath), [`colorValuePath`](../api/maps/markerSettingsModel/#colorvaluepath),
|
||||
[`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) and [`shapeValuePath`](../api/maps/markerSettingsModel/#shapevaluepath).
|
||||
|
||||
Refer complex support for data source as illustrated in the following example.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="complexDataSource" %}
|
||||
|
||||
{% endtab %}
|
||||
|
|
@ -40,13 +40,13 @@ The image can be exported as base64 string for the JPEG and PNG formats. The ren
|
|||
|
||||
### PDF Export
|
||||
|
||||
To use the PDF export functionality, set the [`allowPdfExport`](../api/maps/#allowpdfexport) property to **true**. The rendered Maps can be exported as PDF using the [`export`](../api/maps/#export) method. The [`export`](../api/maps/#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and "0" indicates portrait and "1" indicates landscape.
|
||||
To use the PDF export functionality, set the [`allowPdfExport`](../api/maps/#allowpdfexport) property to **true**. The rendered Maps can be exported as PDF using the [`export`](../api/maps/#export) method. The [`export`](../api/maps/#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and **0** indicates portrait and **1** indicates landscape.
|
||||
|
||||
{% tab template="maps/export", sourceFiles="index.ts,index.html", es5Template="exportPdf" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
> Note: The exporting of the Maps as base64 string is not supported for the PDF export.
|
||||
>The exporting of the Maps as base64 string is not supported for the PDF export.
|
||||
|
||||
<!-- markdownlint-disable MD010 -->
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ description: "Learn here all about Bing Maps of Syncfusion EJ2 Maps control and
|
|||
|
||||
# Bing Maps in EJ2 Maps control
|
||||
|
||||
Bing maps is a online map provider owned by Microsoft. As like OSM, it provides map tile images based on our requests and combines those images into a single one to display the map area.
|
||||
Bing Maps is a online Maps provider, owned by Microsoft. As like OSM, it provide Maps tile images based on our requests and combines those images into a single one to display Maps area.
|
||||
|
||||
## Adding Bing Maps
|
||||
|
||||
The Bing Maps can be rendered by setting the [`layerType`](../api/maps/layerSettingsModel/#layertype) property as "**Bing**" and the key for the Bing Maps must be set in the [`key`](../api/maps/layerSettingsModel/#key) property. The Bing Maps key can be obtained from [here](https://www.microsoft.com/en-us/maps/create-a-bing-maps-key).
|
||||
The Bing Maps can be rendered by setting the [`layerType`](../api/maps/layerSettingsModel/#layertype) property as **Bing** and the key for the Bing Maps must be set in the [`key`](../api/maps/layerSettingsModel/#key) property. The Bing Maps key can be obtained from [here](https://www.microsoft.com/en-us/maps/create-a-bing-maps-key).
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -25,20 +25,20 @@ var map = new ej.maps.Maps({
|
|||
map.appendTo('container');
|
||||
```
|
||||
|
||||
> Specify Bing map key in the `key` property.
|
||||
>Specify Bing Maps key in the `key` property.
|
||||
|
||||
## Types of Bing maps
|
||||
## Types of Bing Maps
|
||||
|
||||
Bing Maps provides different types of maps and it is supported in the Maps control.
|
||||
Bing Maps provides different types of Maps and it is supported in the Maps control.
|
||||
|
||||
* **Aerial** - Displays satellite images to highlight roads and major landmarks for easy identification.
|
||||
* **AerialWithLabel** - Displays aerial map with labels for the continent, country, ocean, etc.
|
||||
* **Road** - Displays the default map view of roads, buildings, and geography.
|
||||
* **CanvasDark** - Displays dark version of the road maps.
|
||||
* **CanvasLight** - Displays light version of the road maps.
|
||||
* **CanvasGray** - Displays grayscale version of the road maps.
|
||||
* **AerialWithLabel** - Displays aerial Maps with labels for the continent, country, ocean, etc.
|
||||
* **Road** - Displays the default Maps view of roads, buildings, and geography.
|
||||
* **CanvasDark** - Displays dark version of the road Maps.
|
||||
* **CanvasLight** - Displays light version of the road Maps.
|
||||
* **CanvasGray** - Displays grayscale version of the road Maps.
|
||||
|
||||
To render the light version of the road maps, set the `bingMapType` to `CanvasLight` as demonstrated in the following code sample.
|
||||
To render the light version of the road Maps, set the `bingMapType` to `CanvasLight` as demonstrated in the following code sample.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -58,11 +58,11 @@ var map = new ej.maps.Maps({
|
|||
map.appendTo('container');
|
||||
```
|
||||
|
||||
> Specify Bing maps key in the `key` property.
|
||||
>Specify Bing maps key in the `key` property.
|
||||
|
||||
## Zooming and panning
|
||||
## Zooming and Panning
|
||||
|
||||
Bing maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a map for in-depth analysis. Panning helps to move a map around to focus the targeted area.
|
||||
Bing Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a Maps for in-depth analysis. Panning helps to move a Maps around to focus the targeted area.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -78,11 +78,11 @@ var map = new ej.maps.Maps({
|
|||
map.appendTo('container');
|
||||
```
|
||||
|
||||
> Specify Bing map key in the `key` property.
|
||||
>Specify Bing Maps key in the `key` property.
|
||||
|
||||
## Adding markers and navigation line
|
||||
|
||||
Markers can be added to the layers of Bing maps by setting the corresponding location's coordinates of latitude and longitude using [`markerSettings`](../api/maps/layerSettingsModel/#markersettings) property. Navigation lines can be added on top of an Bing maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [`navigationLineSettings`](../api/maps/layerSettingsModel/#navigationlinesettings) property.
|
||||
Markers can be added to the layers of Bing Maps by setting the corresponding location's coordinates of latitude and longitude using [`markerSettings`](../api/maps/layerSettingsModel/#markersettings). Navigation lines can be added on top of an Bing Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [`navigationLineSettings`](../api/maps/layerSettingsModel/#navigationlinesettings).
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -128,8 +128,8 @@ var map = new ej.maps.Maps({
|
|||
map.appendTo('container');
|
||||
```
|
||||
|
||||
> Specify Bing map key in the `Key` property.
|
||||
>Specify Bing Maps key in the `Key` property.
|
||||
|
||||
## Sublayer
|
||||
|
||||
Any GeoJSON shape can be rendered as a sublayer on top of the Bing maps layer for highlighting a particular continent or country in Bing maps by adding another layer and specifying the [`type`](../api/maps/layerSettingsModel/#type) property of maps layer to "**SubLayer**".
|
||||
Any GeoJSON shape can be rendered as a sublayer on top of the Bing Maps layer for highlighting a particular continent or country in Bing Maps by adding another layer and specifying the [`type`](../api/maps/layerSettingsModel/#type) property of Maps layer to **SubLayer**.
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
---
|
||||
title: " Open Street Maps in EJ2 Maps control | Syncfusion "
|
||||
title: "Open Street Maps in EJ2 Maps control | Syncfusion"
|
||||
|
||||
component: "Maps"
|
||||
|
||||
description: "Learn here all about Open Street Maps of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
# Open Street Maps in EJ2 Maps control
|
||||
# OpenStreetMaps in EJ2 Maps control
|
||||
|
||||
The OpenStreetMap (OSM) is the online map provider built by a community of developers; it is free to use under an open license. It allows to view geographical data in a collaborative way from anywhere on the earth. The OSM map provides small tile images based on our requests and combines those images into a single image to display the map area in the Maps component.
|
||||
The OpenStreetMap (OSM) is the online Maps provider built by a community of developers; it is free to use under an open license. It allows to view geographical data in a collaborative way from anywhere on the earth. The OSM Maps provides small tile images based on our requests and combines those images into a single image to display the Maps area in the Maps component.
|
||||
|
||||
## Adding OpenStreetMap
|
||||
|
||||
The OSM map can be rendered using by setting the [`layerType`](../api/maps/layerSettingsModel/#layertype) property value as "**OSM**".
|
||||
The OSM Maps can be rendered using by setting the [`layerType`](../api/maps/layerSettingsModel/#layertype) property value as **OSM**.
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="OSM" %}
|
||||
|
||||
|
|
@ -22,9 +22,9 @@ The OSM map can be rendered using by setting the [`layerType`](../api/maps/layer
|
|||
|
||||
The OSM tile server can be changed by setting the tile URL in the [`urlTemplate`](../api/maps/layerSettingsModel/#urltemplate) property. For more details about the OSM tile server, refer [here](https://wiki.openstreetmap.org/wiki/Tiles).
|
||||
|
||||
## Zooming and panning
|
||||
## Zooming and Panning
|
||||
|
||||
The OSM maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a map for in-depth analysis. Panning helps to move a map around to focus the targeted area.
|
||||
The OSM Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a Maps for in-depth analysis. Panning helps to move a Maps around to focus the targeted area.
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="OSMZoom" %}
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ The OSM maps layer can be zoomed and panned. Zooming helps to get a closer look
|
|||
|
||||
## Adding markers and navigation line
|
||||
|
||||
Markers can be added to the layers of OSM maps by setting the corresponding location's coordinates of latitude and longitude using [`markerSettings`](../api/maps/layerSettingsModel/#markersettings) property. Navigation lines can be added on top of an OSM maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [`navigationLineSettings`](../api/maps/layerSettingsModel/#navigationlinesettings) property.
|
||||
Markers can be added to the layers of OSM Maps by setting the corresponding location's coordinates of latitude and longitude using [`markerSettings`](../api/maps/layerSettingsModel/#markersettings). Navigation lines can be added on top of an OSM Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [`navigationLineSettings`](../api/maps/layerSettingsModel/#navigationlinesettings).
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="OSMMarkers" %}
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ Markers can be added to the layers of OSM maps by setting the corresponding loca
|
|||
|
||||
## Sublayer
|
||||
|
||||
Any GeoJSON shape can be rendered as a sublayer on top of the OSM maps layer for highlighting a particular continent or country in OSM maps by adding another layer and specifying the [`type`](../api/maps/layerSettingsModel/#type) property of maps layer to "**SubLayer**".
|
||||
Any GeoJSON shape can be rendered as a sublayer on top of the OSM Maps layer for highlighting a particular continent or country in OSM Maps by adding another layer and specifying the [`type`](../api/maps/layerSettingsModel/#type) property of Maps layer to **SubLayer**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="OSMSublayer" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
---
|
||||
title: " Other Map Providers in EJ2 Maps control | Syncfusion "
|
||||
title: "Other Map Providers in EJ2 Maps control | Syncfusion"
|
||||
|
||||
component: "Maps"
|
||||
|
||||
description: "Learn here all about Other Map Providers of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
# Other map providers in EJ2 Maps control
|
||||
# Other Maps providers in EJ2 Maps control
|
||||
|
||||
Apart from the OpenStreetMap and Bing Maps, you can also render the maps from other map service providers by specifying [`layerType`](../api/maps/layerSettingsModel/#layertype) as "**OSM**" and the URL generated by map provider in the [`urlTemplate`](../api/maps/layerSettingsModel/#urlTemplate) property. Here, Google maps is rendered. This provides customizable maps with your own content and imagery.
|
||||
Apart from the OpenStreetMap and Bing Maps, you can also render the Maps from other map service providers by specifying [`layerType`](../api/maps/layerSettingsModel/#layertype) as **OSM** and the URL generated by map provider in the [`urlTemplate`](../api/maps/layerSettingsModel/#urlTemplate) property. Here, Google Maps is rendered. This provides customizable Maps with your own content and imagery.
|
||||
|
||||
Refer to [Google maps licensing](https://developers.google.com/maps/terms#10-license-restrictions).
|
||||
>Refer to [Google Maps Licensing](https://developers.google.com/maps/terms#10-license-restrictions).
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="es5OSM" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Zooming and panning
|
||||
## Zooming and Panning
|
||||
|
||||
Tile maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a map for in-depth analysis. Panning helps to move a map around to focus the targeted area.
|
||||
Tile Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a map for in-depth analysis. Panning helps to move a map around to focus the targeted area.
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="es5OSMZoom" %}
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ Tile maps layer can be zoomed and panned. Zooming helps to get a closer look at
|
|||
|
||||
## Adding markers and navigation line
|
||||
|
||||
Markers can be added to the layers of tile maps by setting the corresponding location's coordinates of latitude and longitude using [`markerSettings`](../api/maps/layerSettingsModel/#markersettings) property. Navigation lines can be added on top of an tile maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [`navigationLineSettings`](../api/maps/layerSettingsModel/#navigationlinesettings) property.
|
||||
Markers can be added to the layers of tile Maps by setting the corresponding location's coordinates of latitude and longitude using [`markerSettings`](../api/maps/layerSettingsModel/#markersettings). Navigation lines can be added on top of an tile Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [`navigationLineSettings`](../api/maps/layerSettingsModel/#navigationlinesettings).
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="es5OSMMarkers" %}
|
||||
|
||||
|
|
@ -34,8 +34,8 @@ Markers can be added to the layers of tile maps by setting the corresponding loc
|
|||
|
||||
## Sublayer
|
||||
|
||||
Any GeoJSON shape can be rendered as a sublayer on top of the tile maps layer for highlighting a particular continent or country in tile maps by adding another layer and specifying the [`type`](../api/maps/layerSettingsModel/#type) property of maps layer to "**SubLayer**".
|
||||
Any GeoJSON shape can be rendered as a sublayer on top of the tile Maps layer for highlighting a particular continent or country in tile Maps by adding another layer and specifying the [`type`](../api/maps/layerSettingsModel/#type) property of Maps layer to **SubLayer**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="es5OSMSublayer" %}
|
||||
|
||||
{% endtab %}
|
||||
{% endtab %}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
* [Getting Started](maps/es5-getting-started.md)
|
||||
* [Populate Data](maps/populate-data.md)
|
||||
* [Layers](maps/layers.md)
|
||||
* [OpenStreetMap](maps/providers/map-provider.md)
|
||||
* [OpenStreet Maps](maps/providers/map-provider.md)
|
||||
* [Bing Maps](maps/providers/bing-maps.md)
|
||||
* [Other Maps](maps/providers/other-maps.md)
|
||||
* [Customization](maps/customization.md)
|
||||
* [ColorMapping](maps/color-mapping.md)
|
||||
* [Color Mapping](maps/color-mapping.md)
|
||||
* [Data Labels](maps/data-label.md)
|
||||
* [Markers](maps/markers.md)
|
||||
* [Bubble](maps/bubble.md)
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
* [Migration from Essential JS 1](maps/ej1-api-migration.md)
|
||||
* [Annotation](maps/how-to/annotation.md)
|
||||
* [Display geometry shape over Bing maps](maps/how-to/bing-map.md)
|
||||
* [Custom path](maps/how-to/custom-path.md)
|
||||
* [Custom Path](maps/how-to/custom-path.md)
|
||||
* [Drilldown](maps/how-to/drilldown.md)
|
||||
* [Marker Types](maps/how-to/marker-type.md)
|
||||
* [Multilayer](maps/how-to/multiple-layer.md)
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ Zooming, panning, single and double click, highlight and selection are all optio
|
|||
|
||||
## Zooming
|
||||
|
||||
The zooming feature is used to zoom in and out the Map to show in-depth information. It is controlled by the [`zoomFactor`](../api/maps/zoomSettingsModel/#zoomfactor) property of the [`zoomSettings`](../api/maps/zoomSettingsModel) of the Maps. The Map is zoomed in when the [`zoomFactor`](../api/maps/zoomSettingsModel/#zoomfactor) is increased. The Map will be zoomed out as the [`zoomFactor`](../api/maps/zoomSettingsModel/#zoomfactor) is reduced.
|
||||
The zooming feature is used to zoom in and out of Maps to show in-depth information. It is controlled by the [`zoomFactor`](../api/maps/zoomSettingsModel/#zoomfactor) property of the [`zoomSettings`](../api/maps/zoomSettingsModel) of the Maps. The [`zoomFactor`](../api/maps/zoomSettingsModel/#zoomfactor) is increased or decrease dynamically based on zoom in and out interaction.
|
||||
|
||||
### Enable Zooming
|
||||
|
||||
Zooming of the Maps is enabled by setting the [`enable`](../api/maps/zoomSettingsModel/#enable) property of [`zoomSettings`](../api/maps/zoomSettingsModel/) property to **true**. To enable Zooming in Maps, the **Zoom** module must be injected into Maps using **Maps.Inject(Zoom)** method.
|
||||
Zooming of Maps is enabled by setting the [`enable`](../api/maps/zoomSettingsModel/#enable) property of [`zoomSettings`](../api/maps/zoomSettingsModel/) to **true**. To enable Zooming in Maps, the **Zoom** module must be injected into Maps using **Maps.Inject(Zoom)** method.
|
||||
|
||||
<!-- markdownlint-disable MD010 -->
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ map.appendTo('#element');
|
|||
|
||||
<b>Pinch zooming</b>
|
||||
|
||||
To enable or disable the pinch zooming, use the [`pinchZooming`](../api/maps/zoomSettingsModel/#pinchzooming) property in [`zoomSettings`](../api/maps/zoomSettingsModel) property.
|
||||
To enable or disable the pinch zooming, use the [`pinchZooming`](../api/maps/zoomSettingsModel/#pinchzooming) property in [`zoomSettings`](../api/maps/zoomSettingsModel).
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -91,7 +91,7 @@ map.appendTo('#element');
|
|||
|
||||
<b>Single-click zooming</b>
|
||||
|
||||
To enable or disable the single-click zooming, use the [`zoomOnClick`](../api/maps/zoomSettingsModel/#zoomonclick) property in [`zoomSettings`](../api/maps/zoomSettingsModel) property.
|
||||
To enable or disable the single-click zooming, use the [`zoomOnClick`](../api/maps/zoomSettingsModel/#zoomonclick) property in [`zoomSettings`](../api/maps/zoomSettingsModel).
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -108,7 +108,7 @@ map.appendTo('#element');
|
|||
|
||||
<b>Double-click zooming</b>
|
||||
|
||||
To enable or disable the double-click zooming, use the [`doubleClickZoom`](../api/maps/zoomSettingsModel/#doubleclickzoom) property in [`zoomSettings`](../api/maps/zoomSettingsModel/) property.
|
||||
To enable or disable the double-click zooming, use the [`doubleClickZoom`](../api/maps/zoomSettingsModel/#doubleclickzoom) property in [`zoomSettings`](../api/maps/zoomSettingsModel/).
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -125,7 +125,7 @@ map.appendTo('#element');
|
|||
|
||||
<b>Mouse wheel zooming</b>
|
||||
|
||||
To enable or disable mouse wheel zooming, use the [`mouseWheelZoom`](../api/maps/zoomSettingsModel/#mousewheelzoom) property in [`zoomSettings`](../api/maps/zoomSettingsModel/) property.
|
||||
To enable or disable mouse wheel zooming, use the [`mouseWheelZoom`](../api/maps/zoomSettingsModel/#mousewheelzoom) property in [`zoomSettings`](../api/maps/zoomSettingsModel/).
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -142,7 +142,7 @@ map.appendTo('#element');
|
|||
|
||||
### Minimum and maximum zooming
|
||||
|
||||
The zooming range can be adjusted using the [`minZoom`](../api/maps/zoomSettingsModel/#minzoom) and [`maxZoom`](../api/maps/zoomSettingsModel/#maxzoom) properties in [`zoomSettings`](../api/maps/zoomSettingsModel/) property. The minZoom value is set to 1 by default, and the maxZoom value is set to 10.
|
||||
The zooming range can be adjusted using the [`minZoom`](../api/maps/zoomSettingsModel/#minzoom) and [`maxZoom`](../api/maps/zoomSettingsModel/#maxzoom) properties in [`zoomSettings`](../api/maps/zoomSettingsModel/). The minZoom value is set to **1** by default, and the maxZoom value is set to **10**.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -160,7 +160,7 @@ map.appendTo('#element');
|
|||
|
||||
### Zooming with animation
|
||||
|
||||
To zoom in or zoom out the Maps with animation, use the [`animationDuration`](../api/maps/layerSettingsModel/#animationduration) property in [`layers`](../api/maps/layerSettingsModel) property.
|
||||
To zoom in or zoom out the Maps with animation, use the [`animationDuration`](../api/maps/layerSettingsModel/#animationduration) property in [`layers`](../api/maps/layerSettingsModel).
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -179,7 +179,7 @@ map.appendTo('#element');
|
|||
|
||||
Each shape in the Maps can be selected and deselected during interaction with the shapes. Selection is enabled by setting the [`enable`](../api/maps/selectionSettingsModel/#enable) property of [`selectionSettings`](../api/maps/selectionSettingsModel) to **true**.
|
||||
|
||||
The following properties are available to customize the selection of Map elements such as shapes, bubbles, markers and legends.
|
||||
The following properties are available to customize the selection of Maps elements such as shapes, bubbles, markers and legends.
|
||||
|
||||
* [`border`](../api/maps/selectionSettingsModel/#border) - To customize the color, width and opacity of the border of which element is selected in Maps.
|
||||
* [`fill`](../api/maps/selectionSettingsModel/#fill) - Applies the color for the element that is selected.
|
||||
|
|
@ -192,7 +192,7 @@ The following properties are available to customize the selection of Map element
|
|||
|
||||
### Enable selection for bubbles
|
||||
|
||||
To enable the selection for bubbles in Maps, set the [`selectionSettings`](../api/maps/selectionSettingsModel) property in [`bubbleSettings`](../api/maps/bubbleSettingsModel/) property and set the [`enable`](../api/maps/selectionSettingsModel/#enable) property of [`selectionSettings`](../api/maps/selectionSettingsModel) property as **true**.
|
||||
To enable the selection for bubbles in Maps, set the [`selectionSettings`](../api/maps/selectionSettingsModel) in [`bubbleSettings`](../api/maps/bubbleSettingsModel/) and set the [`enable`](../api/maps/selectionSettingsModel/#enable) property of [`selectionSettings`](../api/maps/selectionSettingsModel) as **true**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="bubble-selection" %}
|
||||
|
||||
|
|
@ -200,7 +200,7 @@ To enable the selection for bubbles in Maps, set the [`selectionSettings`](../ap
|
|||
|
||||
### Enable selection for markers
|
||||
|
||||
To enable the selection for markers in Maps, set the [`selectionSettings`](../api/maps/selectionSettingsModel) property in the [`markerSettings`](../api/maps/markerSettingsModel) property and set the [`enable`](../api/maps/selectionSettingsModel/#enable) property of the [`selectionSettings`](../api/maps/selectionSettingsModel) property as **true**.
|
||||
To enable the selection for markers in Maps, set the [`selectionSettings`](../api/maps/selectionSettingsModel) in the [`markerSettings`](../api/maps/markerSettingsModel) and set the [`enable`](../api/maps/selectionSettingsModel/#enable) property of the [`selectionSettings`](../api/maps/selectionSettingsModel) as **true**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="marker-selection" %}
|
||||
|
||||
|
|
@ -219,7 +219,7 @@ LayerIndex, propertyName, country name, and selected value as a boolean state(tr
|
|||
|
||||
The shape is initially selected using the [`initialShapeSelection`](../api/maps/initialShapeSelectionSettingsModel/) property, and the values are mapped to the [`shapePath`](../api/maps/initialShapeSelectionSettingsModel/#shapepath) and [`shapeValue`](../api/maps/initialShapeSelectionSettingsModel/#shapevalue).
|
||||
|
||||
**Note:** initialShapeSelection is an Array property.
|
||||
>initialShapeSelection is an Array property.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="initialSelection" %}
|
||||
|
||||
|
|
@ -251,7 +251,7 @@ Hovering on the specific legend, the shapes which are bounded to the selected le
|
|||
|
||||
### Enable highlight for bubbles
|
||||
|
||||
To enable the highlight for bubbles in Maps, set the [`highlightSettings`](../api/maps/highlightSettingsModel) property in [`bubbleSettings`](../api/maps/bubbleSettingsModel) property and set the [`enable`](../api/maps/highlightSettingsModel/#enable) property of [`highlightSettings`](../api/maps/highlightSettingsModel) property as **true**.
|
||||
To enable the highlight for bubbles in Maps, set the [`highlightSettings`](../api/maps/highlightSettingsModel) in [`bubbleSettings`](../api/maps/bubbleSettingsModel) and set the [`enable`](../api/maps/highlightSettingsModel/#enable) property of [`highlightSettings`](../api/maps/highlightSettingsModel) as **true**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="bubble-highlight" %}
|
||||
|
||||
|
|
@ -259,7 +259,7 @@ To enable the highlight for bubbles in Maps, set the [`highlightSettings`](../ap
|
|||
|
||||
### Enable highlight for markers
|
||||
|
||||
To enable the highlight for markers in Maps, set the [`highlightSettings`](../api/maps/highlightSettingsModel) property in [`markerSettings`](../api/maps/markerSettingsModel) property and set the [`enable`](../api/maps/highlightSettingsModel/#enable) property of [`highlightSettings`](../api/maps/highlightSettingsModel) property as **true**.
|
||||
To enable the highlight for markers in Maps, set the [`highlightSettings`](../api/maps/highlightSettingsModel) in [`markerSettings`](../api/maps/markerSettingsModel) and set the [`enable`](../api/maps/highlightSettingsModel/#enable) property of [`highlightSettings`](../api/maps/highlightSettingsModel) as **true**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="marker-highlight" %}
|
||||
|
||||
|
|
@ -267,7 +267,7 @@ To enable the highlight for markers in Maps, set the [`highlightSettings`](../ap
|
|||
|
||||
## Tooltip
|
||||
|
||||
On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the [`visible`](../api/maps/tooltipSettingsModel/#visible) property of [`tooltipSettings`](../api/maps/tooltipSettingsModel/) as **true**. The [`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) property in the tooltip takes the field name that presents in data source and displays that value as tooltip text. The [`tooltipDisplayMode`](../api/maps/mapsModel/#tooltipdisplaymode) property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, [`tooltipDisplayMode`](../api/maps/mapsModel/#tooltipdisplaymode) is set to **"MouseMove"**.
|
||||
On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the [`visible`](../api/maps/tooltipSettingsModel/#visible) property of [`tooltipSettings`](../api/maps/tooltipSettingsModel/) as **true**. The [`valuePath`](../api/maps/tooltipSettingsModel/#valuepath) property in the tooltip takes the field name that presents in data source and displays that value as tooltip text. The [`tooltipDisplayMode`](../api/maps/mapsModel/#tooltipdisplaymode) property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, [`tooltipDisplayMode`](../api/maps/mapsModel/#tooltipdisplaymode) is set to **MouseMove**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="tooltips" %}
|
||||
|
||||
|
|
@ -275,7 +275,7 @@ On mouse over or touch end event, the tooltip is used to get more information ab
|
|||
|
||||
### Customization
|
||||
|
||||
The following properties are available in the [`tooltipSettings`](../api/maps/tooltipSettingsModel/) property to customize the tooltip of the Maps component.
|
||||
The following properties are available in the [`tooltipSettings`](../api/maps/tooltipSettingsModel/) to customize the tooltip of the Maps component.
|
||||
|
||||
* [`border`](../api/maps/tooltipSettingsModel/#border) - To customize the color, width and opacity of the border of the tooltip in layers, markers, and bubbles of Maps.
|
||||
* [`fill`](../api/maps/tooltipSettingsModel/#fill) - Applies the color of the tooltip in layers, markers, and bubbles of Maps.
|
||||
|
|
@ -288,7 +288,7 @@ The following properties are available in the [`tooltipSettings`](../api/maps/to
|
|||
|
||||
### Tooltip template
|
||||
|
||||
The HTML element can be rendered in the tooltip of the Maps using the [`template`](../api/maps/tooltipSettingsModel/#template) property of the [`tooltipSettings`](../api/maps/tooltipSettingsModel/) property. In the following example, ${value1} and ${value2} are the place holders in the HTML element to display the value1 and value2 values of the corresponding shape.
|
||||
The HTML element can be rendered in the tooltip of the Maps using the [`template`](../api/maps/tooltipSettingsModel/#template) property of the [`tooltipSettings`](../api/maps/tooltipSettingsModel/). In the following example, ${value1} and ${value2} are the place holders in the HTML element to display the value1 and value2 values of the corresponding shape.
|
||||
|
||||
{% tab template= "maps/tooltip-template", es5Template="tooltipTemplate" %}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче