documentation(EJ2-000): source update from ej2-maps-docs
This commit is contained in:
essentialjs2
Родитель
28647b15a0
Коммит
f862037180
|
|
@ -1,10 +1,14 @@
|
|||
---
|
||||
title: " Accessibility in EJ2 Maps control | Syncfusion "
|
||||
|
||||
# Accessibility
|
||||
component: "Maps"
|
||||
|
||||
Maps provides built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications.
|
||||
WAI-ARIA Accessibility supports are achieved through the attributes like `aria-label`. It helps to provides information about elements in a document for assistive technology.
|
||||
description: "Learn here all about Accessibility feature of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
**Aria-label:** Attribute provides the text label with some default description for below elements in maps.
|
||||
# Accessibility in EJ2 Maps
|
||||
|
||||
Maps provides built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications. The WAI-ARIA accessibility support is achieved through the attribute like `aria-label` in the SVG element. It helps to provide information about elements in a document for assistive technology. This attribute sets the text label with some default description for the following elements in Maps.
|
||||
|
||||
<!-- markdownlint-disable MD033 -->
|
||||
<table>
|
||||
|
|
@ -14,21 +18,20 @@ WAI-ARIA Accessibility supports are achieved through the attributes like `aria-l
|
|||
</tr>
|
||||
<tr>
|
||||
<td>Maps container</td>
|
||||
<td>-</td>
|
||||
<td>Specifies the Maps control.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Maps Title</td>
|
||||
<td>Reads the maps title</td>
|
||||
<td>Maps title</td>
|
||||
<td>Specifies the title of the Maps.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Maps Subtitle</td>
|
||||
<td>Reads the maps subtitle</td>
|
||||
<td>Maps subtitle</td>
|
||||
<td>Specifies the sub-title of the Maps.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Legend Title</td>
|
||||
<td>Reads the legend title</td>
|
||||
<td>Legend title</td>
|
||||
<td>Specifies the title of legend in the Maps.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
You can change this default description, using description property available in `Legend`, `TitleSettings`,
|
||||
`SubtitleSettings` and `Maps` object. It helps the screen reader to read for assistive purpose.
|
||||
To change this default [`description`](../api/maps/#description), use the `description` property available in [`legendSettings`](../api/maps/commonTitleSettingsModel/#description), [`titleSettings`](../api/maps/titleSettingsModel/#description), [`subtitleSettings`](../api/maps/subTitleSettingsModel/#description) and [`Maps`](../api/maps/#description). It helps the screen reader to read for an assistive purpose.
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
<!-- markdownlint-disable MD013 -->
|
||||
|
||||
Annotations are used to mark the specific area of interest in the map area with texts, shapes, or images. You can add any number of annotations to the maps.
|
||||
Annotations are used to mark the specific area of interest in the Maps with texts, shapes, or images. Any number of annotations can be added to the Maps component.
|
||||
|
||||
## Annotation
|
||||
|
||||
By using the [`content`](../api/maps/annotation/#content-string) property of [`annotation`](../api/maps/annotation) object, you can either specify the id of an element or specify the code to create a new element that needs to be displayed in the gauge area.
|
||||
By using the [`content`](../api/maps/annotationModel/#content) property of [`annotation`](../api/maps/annotationModel), text content or id of an element or an HTML string can be specified to render a new HTML element in Maps.
|
||||
|
||||
<!-- markdownlint-disable MD036 -->
|
||||
|
||||
|
|
@ -22,27 +22,27 @@ By using the [`content`](../api/maps/annotation/#content-string) property of [`a
|
|||
```typescript
|
||||
|
||||
var maps = new ej.maps.Maps({
|
||||
annotations: [
|
||||
{
|
||||
content: '#annotation',
|
||||
x: '0%', y: '50%'
|
||||
}
|
||||
],
|
||||
layers: [
|
||||
{
|
||||
shapeData: world_map,
|
||||
}
|
||||
]
|
||||
});
|
||||
maps.appendTo('#element');
|
||||
annotations: [
|
||||
{
|
||||
content: '#annotation',
|
||||
x: '0%', y: '50%'
|
||||
}
|
||||
],
|
||||
layers: [
|
||||
{
|
||||
shapeData: world_map,
|
||||
}
|
||||
]
|
||||
});
|
||||
maps.appendTo('#element');
|
||||
|
||||
```
|
||||
|
||||
## Annotation Customization
|
||||
## Annotation customization
|
||||
|
||||
**Changing the z-order**
|
||||
**Changing the z-index**
|
||||
|
||||
You can change the z-order of an annotation element using the [`zIndex`](./api/maps/annotation/#zindex-string) 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) property.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="annotationZOrder" %}
|
||||
|
||||
|
|
@ -50,9 +50,9 @@ You can change the z-order of an annotation element using the [`zIndex`](./api/
|
|||
|
||||
<!-- markdownlint-disable MD036 -->
|
||||
|
||||
**Positioning of Annotation**
|
||||
**Positioning an Annotation**
|
||||
|
||||
You can place an annotation anywhere in gauge area by specifying pixel values to the [`x`](./api/maps/annotation/#x-number) and [`y`](./api/maps/annotation/#y-number) properties.
|
||||
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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="annotationPosition" %}
|
||||
|
||||
|
|
@ -60,9 +60,9 @@ You can place an annotation anywhere in gauge area by specifying pixel values to
|
|||
|
||||
<!-- markdownlint-disable MD036 -->
|
||||
|
||||
**Alignment of Annotation**
|
||||
**Alignment of an Annotation**
|
||||
|
||||
You can align annotations using the [`horizontalAlignment`](./api/maps/annotation/#horizontalalignment-string) and [`verticalAlignment`](./api/maps/annotation/#verticalalignment-string) properties.
|
||||
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"**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="annotationAlignment" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,53 @@
|
|||
# Bubble
|
||||
|
||||
Bubbles in the Maps control represent the underlying data values of the map. Bubbles are scattered throughout the map shapes that contains bound values.
|
||||
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 are included when data binding and the `bubbleSettings` is set to the shape layers.
|
||||
|
||||
To add bubbles to the map, bind data source to the layer `bubbleSettings` and set the `valuePath` as population. Following example illustrates bubble enable for the World map with **datasource**.
|
||||
To render bubble in maps need to inject `Bubble` module using `Maps.Inject(Bubble)` method.
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Bubble Sizing
|
||||
## Bubble shapes
|
||||
|
||||
Using the `minRadius` and `maxRadius` properties in `bubbleSettings`, you can render the bubbles in different sizes based on the `valuePath` and `dataSource` values.
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble-shape" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Customization
|
||||
|
||||
The following properties are available in [`bubbleSettings`](../api/maps/bubbleSettingsModel) property 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.
|
||||
* [`opacity`](../api/maps/bubbleSettingsModel/#opacity) – To apply opacity to the bubbles in Maps.
|
||||
* [`animationDelay`](../api/maps/bubbleSettingsModel/#animationdelay) - To change the time delay in the transition for bubbles.
|
||||
* [`animationDuration`](../api/maps/bubbleSettingsModel/#animationduration) - To change the time duration of animation for bubbles.
|
||||
* [`highlightSettings`](../api/maps/bubbleSettingsModel/#highlightsettings) - To customize the highlight settings for the bubbles in Maps.
|
||||
* [`selectionSettings`](../api/maps/bubbleSettingsModel/#selectionsettings) - To customize the selection settings for the bubbles in Maps.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble-customization" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble-colorvaluepath" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Bubble sizing
|
||||
|
||||
The size of the bubbles is calculated from the values got from the [`valuePath`](../api/maps/bubbleSettingsModel/#valuepath) property. The range for the radius of the bubbles can be modified using [`minRadius`](../api/maps/bubbleSettingsModel/#minradius) and [`maxRadius`](../api/maps/bubbleSettingsModel/#maxradius) properties.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubbleSizing" %}
|
||||
|
||||
|
|
@ -21,20 +55,16 @@ Using the `minRadius` and `maxRadius` properties in `bubbleSettings`, you can re
|
|||
|
||||
## Multiple bubble groups
|
||||
|
||||
You can specify multiple types of bubble groups using the `bubbleSettings` property and customize it according to your requirement.
|
||||
|
||||
In the following code 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) 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubbleGroup" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Enable Legend for Bubble
|
||||
## Enable tooltip for bubble
|
||||
|
||||
To enable the legend for the bubble, need to set `legendSettings.visible` as true and `legendSettings.type` as 'Bubbles'.Refer the below code snippet to enable the legend for bubbles with each bubble different colors rendering.
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="bubble-legend" %}
|
||||
{% tab template="maps/default-map", es5Template="bubble-tooltip" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
Refer the [`API`](../api/maps/bubbleSettingsModel/) for Bubble feature.
|
||||
{% endtab %}
|
||||
|
|
@ -1,10 +1,40 @@
|
|||
# ColorMapping
|
||||
|
||||
ColorMapping used to customize the shape colors based given values. It has two types, one range color mapping and equal color mapping.
|
||||
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.
|
||||
|
||||
## Range color mapping
|
||||
|
||||
Range color mapping applied by the mapped value is numeric and with in the given color mapping ranges provided in the `dataSource`.Bind the `population_density` value to layer `dataSource` and specify the `colorValuePath` as 'density' to map the range value for shapes. Refer the code snippet below.
|
||||
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.
|
||||
|
||||
```typescript
|
||||
export var Population_Density = [
|
||||
...
|
||||
{
|
||||
'code': 'AE',
|
||||
'value': 90,
|
||||
'name': 'United Arab Emirates',
|
||||
'population': 8264070,
|
||||
'density': 99
|
||||
},
|
||||
{
|
||||
'code': 'GB',
|
||||
'value': 257,
|
||||
'name': 'United Kingdom',
|
||||
'population': 62041708,
|
||||
'density': 255
|
||||
},
|
||||
{
|
||||
'code': 'US',
|
||||
'value': 34,
|
||||
'name': 'United States',
|
||||
'population': 325020000,
|
||||
'density': 33
|
||||
}
|
||||
...
|
||||
];
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="excludecolor" %}
|
||||
|
||||
|
|
@ -12,8 +42,29 @@ Range color mapping applied by the mapped value is numeric and with in the given
|
|||
|
||||
## Equal color mapping
|
||||
|
||||
Equal color mapping used to apply color mapping if the mapped value is string. Following example demonstrate the permanent and non-permanent countries in the UN security council, in 2017. Refer the below dataSource.
|
||||
Bind the unCountries data to the layer dataSource property and set the shapeSettings `colorValuePath` as 'Membership' and set the colorMapping values to that. Refer the below code snippet.
|
||||
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[] = [
|
||||
{ Country: 'China', Membership: 'Permanent' },
|
||||
{ Country: 'France', Membership: 'Permanent' },
|
||||
{ Country: 'Russia', Membership: 'Permanent' },
|
||||
{ Country: 'United Kingdom', Membership: 'Permanent' },
|
||||
{ Country: 'United States', Membership: 'Permanent' },
|
||||
{ Country: 'Bolivia', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Eq. Guinea', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Ethiopia', Membership: 'Non-Permanent' },
|
||||
{ Country: "Côte d'Ivoire", Membership: 'Permanent' },
|
||||
{ Country: 'Kazakhstan', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Kuwait', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Netherlands', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Peru', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Poland', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Sweden', Membership: 'Non-Permanent' },
|
||||
];
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="equal" %}
|
||||
|
||||
|
|
@ -21,17 +72,19 @@ Bind the unCountries data to the layer dataSource property and set the shapeSett
|
|||
|
||||
## Desaturation color mapping
|
||||
|
||||
Desaturation color mapping is used to apply colors with opacity to shapes based on the given values for the [`minOpacity`] and [`maxOpacity`] properties in the map control.Bind the `population_density` value to layer `dataSource` layer,and then specify the `colorValuePath` as 'density' to map the range value for shapes. Refer the following code examples for more details.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="desaturation" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Desaturation with multiple colors
|
||||
## Multiple colors for a single shape
|
||||
|
||||
Multiple colors are used as gradient effect to the specific shapes based on the ranges in the datasource.
|
||||
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.
|
||||
|
||||
By using color API, you can set n number of colors.Bind the `population_density` value to layer `dataSource` and specify the `colorValuePath` as 'density' to map the range value for shapes. Refer to the following the code sample for more details.
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="multiplecolors" %}
|
||||
|
||||
|
|
@ -39,10 +92,18 @@ By using color API, you can set n number of colors.Bind the `population_density`
|
|||
|
||||
## Color for items excluded from color mapping
|
||||
|
||||
You will map the colors to the shapes based on the ranges or values in the data source records may have been excluded from the color mapping configuration, in which case you may also add the color for excluded items. In following code example, You have added color mapping for the ranges from 0 to 200. If we have any records in the data source beyond this range, color mapping will not be applied. To apply the color for these excluded items, set `color` value in the `colorMapping` with out range or value.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="excludescolor" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
Refer the [`API`](../api/maps/colorMappingSettingsModel/) for Color Mapping feature.
|
||||
## 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="colormapping-bubble" %}
|
||||
|
||||
{% endtab %}
|
||||
|
|
@ -1,41 +1,30 @@
|
|||
# Customization
|
||||
---
|
||||
title: " Customization in EJ2 Maps control | Syncfusion "
|
||||
|
||||
## customize shape
|
||||
component: "Maps"
|
||||
|
||||
To customize the layer shape, we need to modify default the layer `shapeSettings` property. In that we can customize the shape color by using the `fill` property and border by using `border.color` and `border.width`.
|
||||
description: "Learn here all about Customization of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
```typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
# Customization in EJ2 Maps control
|
||||
|
||||
let map: Maps = new Maps({
|
||||
layers: [{
|
||||
layerType: 'Geometry',
|
||||
shapeData: worldmap,
|
||||
shapeSettings: {
|
||||
fill: '#33CCFF',
|
||||
border: { color: '#FFFFFF', width: 2}
|
||||
}
|
||||
}]
|
||||
});
|
||||
## Setting the size for Maps
|
||||
|
||||
map.appendTo('#element');
|
||||
```
|
||||
The width and height of the Maps can be set using the [`width`](../api/maps/mapsModel/#width) and [`height`](../api/maps/mapsModel/#height) properties in the Maps control. Percentage or pixel values can be used for the height and width values.
|
||||
|
||||
To apply default palette colors for shapes need to enable the `autofill` property.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html", es5Template="fill" %}
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="map-size" %}
|
||||
|
||||
```typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
|
||||
let map: Maps = new Maps({
|
||||
height: '200px',
|
||||
width: '500px',
|
||||
layers: [{
|
||||
layerType: 'Geometry',
|
||||
shapeData: world_map,
|
||||
shapeSettings: {
|
||||
fill: '#33CCFF',
|
||||
border: { color: '#FFFFFF', width: 2}
|
||||
autofill: true
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
|
@ -45,22 +34,38 @@ map.appendTo('#element');
|
|||
|
||||
{% endtab %}
|
||||
|
||||
you can apply own custom palette for shape, you need to provide the palette colors for `palette`.
|
||||
## Maps title
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="auto-fill" %}
|
||||
The title for the Maps can be set using the [`titleSettings`](../api/maps/titleSettingsModel) property. 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**".
|
||||
* [`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.
|
||||
* [`subtitleSettings`](../api/maps/titleSettingsModel/#subtitlesettings) - To customize the subtitle for the Maps.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="map-title" %}
|
||||
|
||||
```typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
|
||||
|
||||
let map: Maps = new Maps({
|
||||
titleSettings: {
|
||||
text: 'Maps Control',
|
||||
textStyle: {
|
||||
color: 'red',
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 'regular',
|
||||
fontFamily: 'arial',
|
||||
size: '14px'
|
||||
},
|
||||
alignment: 'Center'
|
||||
},
|
||||
layers: [{
|
||||
layerType: 'Geometry',
|
||||
shapeData: world_map,
|
||||
shapeSettings: {
|
||||
autofill: true,
|
||||
palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000']
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
|
@ -70,14 +75,225 @@ map.appendTo('#element');
|
|||
|
||||
{% endtab %}
|
||||
|
||||
Refer the `shapeSettings` [`API`](../api/maps/shapeSettingsModel/) for Shape Customization.
|
||||
For more customization see [`colormapping`](../maps/color-mapping/) feature.
|
||||
## Setting theme
|
||||
|
||||
## Projection Type
|
||||
The Maps control supports following themes.
|
||||
|
||||
By default, the maps are rendered by Mercator projection type. In this type, the maps are rendered based on coordinates, so it is not stretched.
|
||||
* Material
|
||||
* Fabric
|
||||
* Bootstrap
|
||||
* Highcontrast
|
||||
* MaterialDark
|
||||
* FabricDark
|
||||
* BootstrapDark
|
||||
* Bootstrap4
|
||||
* HighContrastLight
|
||||
* Tailwind
|
||||
|
||||
The maps control has the following projection types:
|
||||
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" %}
|
||||
|
||||
```typescript
|
||||
import { Maps, MapsTheme } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
|
||||
let map: Maps = new Maps({
|
||||
layers: [{
|
||||
shapeData: world_map,
|
||||
shapeSettings: {
|
||||
autofill: true
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
map.appendTo('#element');
|
||||
document.getElementById('theme').onchange = () => {
|
||||
var value = (<HTMLInputElement>document.getElementById('theme')).value;
|
||||
map.theme= <MapsTheme>value;
|
||||
map.refresh();
|
||||
}
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Customizing Maps container
|
||||
|
||||
The following properties are available to customize the container in the Maps.
|
||||
|
||||
* [`background`](../api/maps/mapsModel/#background) - To apply the background color to the container in the Maps.
|
||||
* [`border`](../api/maps/mapsModel/#border) - To customize the color, width and opacity of the border of the Maps.
|
||||
* [`margin`](../api/maps/mapsModel/#margin) - To customize the margins of the Maps.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="map-container" %}
|
||||
|
||||
```typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
|
||||
let map: Maps = new Maps({
|
||||
background: '#CCD1D1',
|
||||
border: {
|
||||
color: 'green',
|
||||
width: 2
|
||||
},
|
||||
margin: {
|
||||
bottom: 10,
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 10
|
||||
},
|
||||
layers: [{
|
||||
shapeData: world_map,
|
||||
shapeSettings: {
|
||||
autofill: true
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
map.appendTo('#element');
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## 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.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="map-area" %}
|
||||
|
||||
```typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
|
||||
let map: Maps = new Maps({
|
||||
mapsArea: {
|
||||
background: '#CCD1D1',
|
||||
border: {
|
||||
width: 2,
|
||||
color: 'green'
|
||||
}
|
||||
},
|
||||
layers: [{
|
||||
shapeData: world_map,
|
||||
shapeSettings: {
|
||||
autofill: true
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
map.appendTo('#element');
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Customizing the shapes
|
||||
|
||||
The following properties are available in [`shapeSettings`](../api/maps/shapeSettingsModel) property 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.
|
||||
* [`palette`](../api/maps/shapeSettingsModel/#palette) - To set the custom palette for the shapes.
|
||||
* [`border`](../api/maps/shapeSettingsModel/#border) - To customize the color, width and opacity of the border of the shapes.
|
||||
* [`dashArray`](../api/maps/shapeSettingsModel/#dasharray) - To define the pattern of dashes and gaps that is applied to the outline of the shapes.
|
||||
* [`opacity`](../api/maps/shapeSettingsModel/#opacity) - To customize the transparency for the shapes.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html", es5Template="shape-customization" %}
|
||||
|
||||
```typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
|
||||
let map: Maps = new Maps({
|
||||
layers: [{
|
||||
shapeData: world_map,
|
||||
shapeSettings: {
|
||||
autofill: true,
|
||||
palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000'],
|
||||
border: {
|
||||
color: 'green',
|
||||
width: 2
|
||||
},
|
||||
dashArray: '1',
|
||||
opacity: 0.9
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="shape-color" %}
|
||||
|
||||
```typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
|
||||
let map: Maps = new Maps({
|
||||
layers: [{
|
||||
shapeData: world_map,
|
||||
shapePropertyPath: 'continent',
|
||||
shapeDataPath: 'continent',
|
||||
dataSource: [
|
||||
{ continent: "North America", color: '#71B081' },
|
||||
{ continent: "South America", color: '#5A9A77' },
|
||||
{ continent: "Africa", color: '#498770' },
|
||||
{ continent: "Europe", color: '#39776C' },
|
||||
{ continent: "Asia", color: '#266665' },
|
||||
{ continent: "Oceania", color: '#124F5E' }
|
||||
],
|
||||
shapeSettings: {
|
||||
colorValuePath: 'color'
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html",es5Template="shape-border" %}
|
||||
|
||||
```typescript
|
||||
import { Maps } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
|
||||
let map: Maps = new Maps({
|
||||
layers: [{
|
||||
shapeData: world_map,
|
||||
shapePropertyPath: 'continent',
|
||||
shapeDataPath: 'continent',
|
||||
dataSource: [
|
||||
{ continent: "North America", color: '#71B081', borderColor: '#CCFFE5', width: 2 },
|
||||
{ continent: "South America", color: '#5A9A77', borderColor: 'red', width: 2 },
|
||||
{ continent: "Africa", color: '#498770', borderColor: '#FFCC99', width: 2 },
|
||||
{ continent: "Europe", color: '#39776C', borderColor: '#66B2FF', width: 2 },
|
||||
{ continent: "Asia", color: '#266665', borderColor: '#999900', width: 2 },
|
||||
{ continent: "Oceania", color: '#124F5E', borderColor: 'blue', width: 2 }
|
||||
],
|
||||
shapeSettings: {
|
||||
borderColorValuePath: 'borderColor',
|
||||
borderWidthValuePath: 'width',
|
||||
colorValuePath: 'color'
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
map.appendTo('#element');
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Projection type
|
||||
|
||||
The Maps control supports the following projection types:
|
||||
|
||||
* Mercator
|
||||
* Equirectangular
|
||||
|
|
@ -86,7 +302,9 @@ The maps control has the following projection types:
|
|||
* Eckert5
|
||||
* Eckert6
|
||||
* Winkel3
|
||||
* AitOff.
|
||||
* 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.
|
||||
|
||||
{% tab template="maps/projection", sourceFiles="index.ts,index.html" , es5Template="projection" %}
|
||||
|
||||
|
|
@ -96,40 +314,38 @@ import { world_map } from './world-map.ts';
|
|||
import { projectionData } from './projection-data.ts';
|
||||
|
||||
let map: Maps = new Maps({
|
||||
projectioType: 'Mercator',
|
||||
layers: [
|
||||
{
|
||||
shapeData: world_map,
|
||||
shapeDataPath: 'Country',
|
||||
shapePropertyPath: 'name',
|
||||
dataSource: projectionData,
|
||||
tooltipSettings: {
|
||||
visible: true,
|
||||
valuePath: 'Country',
|
||||
projectionType: 'Mercator',
|
||||
layers: [{
|
||||
shapeData: world_map,
|
||||
shapeDataPath: 'Country',
|
||||
shapePropertyPath: 'name',
|
||||
dataSource: projectionData,
|
||||
tooltipSettings: {
|
||||
visible: true,
|
||||
valuePath: 'Country'
|
||||
},
|
||||
shapeSettings: {
|
||||
fill: '#E5E5E5',
|
||||
colorMapping: [
|
||||
{
|
||||
value: 'Permanent',
|
||||
color: '#EDB46F'
|
||||
},
|
||||
shapeSettings: {
|
||||
fill: '#E5E5E5',
|
||||
colorMapping: [
|
||||
{
|
||||
value: 'Permanent',
|
||||
color: '#EDB46F'
|
||||
},
|
||||
{
|
||||
color: '#F1931B',
|
||||
value: 'Non-Permanent'
|
||||
}
|
||||
],
|
||||
colorValuePath: 'Membership'
|
||||
{
|
||||
color: '#F1931B',
|
||||
value: 'Non-Permanent'
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
colorValuePath: 'Membership'
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
map.appendTo('#container');
|
||||
document.getElementById('projectiontype').onchange = function(){
|
||||
let ele: HTMLSelectElement = (<HTMLSelectElement>document.getElementById('projectiontype'))
|
||||
maps.projectionType = <ProjectionType>ele.value;
|
||||
maps.refresh();
|
||||
let ele: HTMLSelectElement = (<HTMLSelectElement>document.getElementById('projectiontype'))
|
||||
maps.projectionType = <ProjectionType>ele.value;
|
||||
maps.refresh();
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,45 @@
|
|||
# Data labels
|
||||
---
|
||||
title: " Data Labels in EJ2 Maps control | Syncfusion "
|
||||
|
||||
Data labels provide information to users about the shapes of the Maps component.
|
||||
component: "Maps"
|
||||
|
||||
## Add data labels
|
||||
description: "Learn here all about Data Labels of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
You can add label text to the shapes of the Maps component using `dataLabelSettings`. The following sample demonstrates the names of all the states n the United States in data labels.
|
||||
# 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**".
|
||||
|
||||
## 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="dataLabel" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
> The `autofill` property is used in `shapeSettings` to apply the default palette colors to the shapes.
|
||||
In the following example, the value of [`labelPath`](../api/maps/dataLabelSettingsModel/#labelpath) property is set from the field name in the data source of the layer settings.
|
||||
|
||||
Some data labels intersect with other labels in this output. The following options are used to avoid intersecting:
|
||||
{% tab template="maps/default-map", es5Template="label-datasource" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Customization
|
||||
|
||||
The following properties are available in the [`dataLabelSettings`](../api/maps/dataLabelSettingsModel/) property 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.
|
||||
* [`opacity`](../api/maps/dataLabelSettingsModel/#opacity) - To customize the transparency of the data labels in Maps.
|
||||
* [`textStyle`](../api/maps/dataLabelSettingsModel/#textstyle) - To customize the text style of the data labels in Maps.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="labelCustomization" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Smart labels
|
||||
|
||||
The Maps component provides an option to specify the smart labels when the labels intersect with the corresponding shape borders. In the `smartLabelMode` property, you can specify any of the following options:
|
||||
The Maps control provides an option to handle the labels when they intersect with the corresponding shape borders using the [`smartLabelMode`](../api/maps/dataLabelSettingsModel/#smartlabelmode) property. The following options are available in the [`smartLabelMode`](../api/maps/dataLabelSettingsModel/#smartlabelmode) property.
|
||||
|
||||
* None
|
||||
* Hide
|
||||
|
|
@ -28,7 +51,7 @@ The Maps component provides an option to specify the smart labels when the label
|
|||
|
||||
## Intersect action
|
||||
|
||||
This specifies the intersect action when a label intersect with another label. In the `intersectionAction` property, you can specify any of the following options:
|
||||
The Maps component provides an option to handle the labels when a label intersects with another label using the [`intersectionAction`](../api/maps/dataLabelSettingsModel/#intersectionaction) property. The following options are available in the [`intersectionAction`](../api/maps/dataLabelSettingsModel/#intersectionaction) property.
|
||||
|
||||
* None
|
||||
* Hide
|
||||
|
|
@ -36,4 +59,14 @@ This specifies the intersect action when a label intersect with another label. I
|
|||
|
||||
{% tab template="maps/default-map", es5Template="labelIntersect" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## 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.
|
||||
|
||||
> 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="labelTemplate" %}
|
||||
|
||||
{% endtab %}
|
||||
|
|
@ -120,6 +120,8 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
|
|||
|
||||
{% endtab %}
|
||||
|
||||
> Note: Refer the data values for [`world_map`](https://www.syncfusion.com/downloads/support/directtrac/321036/ze/world_map1633413751.zip) here.
|
||||
|
||||
<!-- markdownlint-disable MD009 -->
|
||||
|
||||
## Bind data source to map
|
||||
|
|
@ -130,9 +132,9 @@ The following properties in layers are used for binding data source to map.
|
|||
* [`shapeDataPath`]
|
||||
* [`shapePropertyPath`]
|
||||
|
||||
The [`dataSource`] property takes collection value as input. For example, the list of objects can be provided as input. This data is further used in tooltip, data label, bubble, legend and in color mapping.
|
||||
The [`dataSource`](../api/maps/layerSettingsModel/#datasource) property takes collection value as input. For example, the list of objects can be provided as input. This data is further used in tooltip, data label, bubble, legend and in color mapping.
|
||||
|
||||
The [`shapeDataPath`] property used to refer the data ID in dataSource. Where as, the [`shapePropertyPath`] property is used to refer the column name in shapeData to identify the shape. Both the properties are related to each other. When the values of the shapeDataPath property in the dataSource property and the value of shapePropertyPath in the shapeData property match, then the associated object from the dataSource is bound to the corresponding shape.
|
||||
The [`shapeDataPath`](../api/maps/layerSettingsModel/#shapedatapath) property used to refer the data ID in dataSource. Where as, the [`shapePropertyPath`](../api/maps/layerSettingsModel/#shapepropertypath) property is used to refer the column name in shapeData to identify the shape. Both the properties are related to each other. When the values of the shapeDataPath property in the dataSource property and the value of shapePropertyPath in the shapeData property match, then the associated object from the dataSource is bound to the corresponding shape.
|
||||
|
||||
The JSON object "UnCountries" is used as data source below.
|
||||
|
||||
|
|
@ -140,9 +142,11 @@ The JSON object "UnCountries" is used as data source below.
|
|||
|
||||
{% endtab %}
|
||||
|
||||
> Note: Refer the data values for [`world_map`](https://www.syncfusion.com/downloads/support/directtrac/321036/ze/world_map1633413751.zip) here.
|
||||
|
||||
## Apply Color Mapping
|
||||
|
||||
The Color Mapping feature supports customization of shape colors based on the underlying value of shape received from bounded data. Specify the field name from which the values have to be compared for the shapes in [`colorValuePath`] property in [`shapeSettings`].
|
||||
The Color Mapping feature supports customization of shape colors based on the underlying value of shape received from bounded data. Specify the field name from which the values have to be compared for the shapes in [`colorValuePath`](../api/maps/shapeSettingsModel/#colorvaluepath) property in [`shapeSettings`](../api/maps/shapeSettingsModel/).
|
||||
|
||||
{% tab template="maps/default-map", es5Template="color-map" %}
|
||||
|
||||
|
|
@ -150,7 +154,7 @@ The Color Mapping feature supports customization of shape colors based on the un
|
|||
|
||||
## Add Title for Maps
|
||||
|
||||
You can add a title using [`titleSettings`] property to the map to provide quick
|
||||
You can add a title using [`titleSettings`](../api/maps/titleSettingsModel/) property to the map to provide quick
|
||||
information to the user about the shapes rendered in the map.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="title" %}
|
||||
|
|
@ -159,8 +163,8 @@ information to the user about the shapes rendered in the map.
|
|||
|
||||
## Enable Legend
|
||||
|
||||
You can show legend for the maps by setting true to the [`visible`]
|
||||
property in [`legendSettings`] object.
|
||||
You can show legend for the maps by setting true to the [`visible`](../api/maps/legendSettingsModel/#visible)
|
||||
property in [`legendSettings`](../api/maps/legendSettingsModel/) object.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="legend" %}
|
||||
|
||||
|
|
@ -168,7 +172,7 @@ property in [`legendSettings`] object.
|
|||
|
||||
## Add Data Label
|
||||
|
||||
You can add data labels to show additional information of the shapes in map. This can be achieved by setting [`visible`] property to true in the [`dataLabelSettings`] object.
|
||||
You can add data labels to show additional information of the shapes in map. This can be achieved by setting [`visible`](../api/maps/dataLabelSettingsModel/#visible) property to true in the [`dataLabelSettings`](../api/maps/dataLabelSettingsModel/) object.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="label" %}
|
||||
|
||||
|
|
@ -177,8 +181,8 @@ You can add data labels to show additional information of the shapes in map. Thi
|
|||
## Enable Tooltip
|
||||
|
||||
The tooltip is useful when you cannot display information by using the data labels due to space constraints.
|
||||
You can enable tooltip by setting the [`visible`] property as true
|
||||
in [`tooltipSettings`] object.
|
||||
You can enable tooltip by setting the [`visible`](../api/maps/tooltipSettingsModel/#visible) property as true
|
||||
in [`tooltipSettings`](../api/maps/tooltipSettingsModel/) object.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="tooltip" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
---
|
||||
title: " Events in EJ2 Maps control | Syncfusion "
|
||||
|
||||
component: "Maps"
|
||||
|
||||
description: "Learn here all about Events of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
# 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/)
|
||||
|
||||
## annotationRendering
|
||||
|
||||
Before the annotation is rendered in the Maps, the [`annotationRendering`](../api/maps/#annotationrendering) event will be triggered. To know more about the arguments of this event, refer [here](../api/maps/iAnnotationRenderingEventArgs/).
|
||||
|
||||
## beforePrint
|
||||
|
||||
The [`beforePrint`](../api/maps/#beforeprint) event will be triggered before the print operation is started. To know more about the arguments of this event, refer [here](../api/maps/iPrintEventArgs/).
|
||||
|
||||
## bubbleClick
|
||||
|
||||
The [`bubbleClick`](../api/maps/#bubbleclick) event will be triggered when clicking on the bubbles. To know more about the arguments of this event, refer [here](../api/maps/iBubbleClickEventArgs/).
|
||||
|
||||
## bubbleMouseMove
|
||||
|
||||
The [`bubbleMouseMove`](../api/maps/#bubblemousemove) event will be triggered when the cursor moves over the bubbles. To know more about the arguments of this event, refer [here](../api/maps/iBubbleMoveEventArgs/).
|
||||
|
||||
## bubbleRendering
|
||||
|
||||
The [`bubbleRendering`](../api/maps/#bubblerendering) event is triggered before rendering each bubble. To know more about the arguments of this event, refer [here](../api/maps/iBubbleRenderingEventArgs/).
|
||||
|
||||
## click
|
||||
|
||||
The [`click`](../api/maps/#click) event will be triggered after the Maps is clicked. To know more about the arguments of this event, refer [here](../api/maps/iMouseEventArgs/).
|
||||
|
||||
## dataLabelRendering
|
||||
|
||||
The [`dataLabelRendering`](../api/maps/#datalabelrendering) event is triggered before rendering each label. To know more about the arguments of this event, refer [here](../api/maps/iLabelRenderingEventArgs/).
|
||||
|
||||
## doubleClick
|
||||
|
||||
When performing the double click operation on an element in Maps, the [`doubleClick`](../api/maps/#doubleclick) will be triggered. To know more about the arguments of this event, refer [here](../api/maps/iMouseEventArgs/).
|
||||
|
||||
## itemHighlight
|
||||
|
||||
The [`itemHighlight`](../api/maps/#itemhighlight) event occurs when the cursor moves over the shapes. To know more about the arguments of this event, refer [here](../api/maps/iSelectionEventArgs/).
|
||||
|
||||
## itemSelection
|
||||
|
||||
The [`itemSelection`](../api/maps/#itemselection) event occurs when selecting the shapes in the Maps. To know more about the arguments of this event, refer [here](../api/maps/iSelectionEventArgs/).
|
||||
|
||||
## layerRendering
|
||||
|
||||
The [`layerRendering`](../api/maps/#layerrendering) event is triggered before rendering each layer. To know more about the arguments of this event, refer [here](../api/maps/iLayerRenderingEventArgs/).
|
||||
|
||||
## legendRendering
|
||||
|
||||
The [`legendRendering`](../api/maps/#legendrendering) event is triggered before rendering the legend in the component. To know more about the arguments of this event, refer [here](../api/maps/iLegendRenderingEventArgs/).
|
||||
|
||||
## load
|
||||
|
||||
The [`load`](../api/maps/#load) event will be triggered before rendering the Maps. To know more about the arguments of this event, refer [here](../api/maps/iLoadEventArgs/).
|
||||
|
||||
## loaded
|
||||
|
||||
The [`loaded`](/api/maps/#loaded) event is triggered after the Maps component has been loaded. To know more about the arguments of this event, refer [here](../api/maps/iLoadedEventArgs/).
|
||||
|
||||
## markerClick
|
||||
|
||||
[`markerClick`](../api/maps/#markerclick) event will be triggered by clicking the markers in the Maps. To know more about the arguments of this event, refer [here](../api/maps/iMarkerClickEventArgs/).
|
||||
|
||||
## markerClusterClick
|
||||
|
||||
The [`markerClusterClick`](../api/maps/#markerclusterclick) event is triggered after clicking the marker cluster. To know more about the arguments of this event, refer [here](../api/maps/iMarkerClusterClickEventArgs/).
|
||||
|
||||
## markerClusterMouseMove
|
||||
|
||||
The [`markerClusterMouseMove`](../api/maps/#markerclustermousemove) event will be triggered when the cursor moves over the marker cluster. To know more about the arguments of this event, refer [here](../api/maps/iMarkerClusterMoveEventArgs/).
|
||||
|
||||
## markerClusterRendering
|
||||
|
||||
The [`markerClusterRendering`](../api/maps/#markerclusterrendering) event is triggered before rendering each marker cluster. To know more about the arguments of this event, refer [here](../api/maps/#markerclusterrendering).
|
||||
|
||||
## markerRendering
|
||||
|
||||
The [`markerRendering`](../api/maps/#markerrendering) event is triggered before rendering each marker. To know more about the arguments of this event, refer [here](../api/maps/iMarkerRenderingEventArgs/).
|
||||
|
||||
## pan
|
||||
|
||||
When panning the Maps, the [`pan`](../api/maps/#pan) event will be triggered. To know more about the arguments of this event, refer [here](../api/maps/iMapPanEventArgs/).
|
||||
|
||||
## resize
|
||||
|
||||
The [`resize`](../api/maps/#resize) event will be triggered when resizing the Maps. To know more about the arguments of this event, refer [here](../api/maps/iResizeEventArgs/).
|
||||
|
||||
## rightClick
|
||||
|
||||
The [`rightClick`](../api/maps/#rightclick) event will be triggered when performing the right click operation on an element in Maps. To know more about the arguments of this event, refer [here](../api/maps/iMouseEventArgs/).
|
||||
|
||||
## shapeHighlighted
|
||||
|
||||
The [`shapeHighlighted`](../api/maps/#shapehighlight) event is triggered when mouse move on the shape in Maps and before the shape gets highlighted. To know more about the arguments of this event, refer [here](../api/maps/iShapeSelectedEventArgs/).
|
||||
|
||||
## shapeRendering
|
||||
|
||||
The [`shapeRendering`](../api/maps/#shaperendering) event will be triggered before rendering a shape of the Maps. To know more about the arguments of this event, refer [here](../api/maps/iShapeSelectedEventArgs/).
|
||||
|
||||
## shapeSelected
|
||||
|
||||
The [`shapeSelected`](../api/maps/#shapeselected) event is triggered when select a shape in Maps. To know more about the arguments of this event, refer [here](../api/maps/iShapeSelectedEventArgs/).
|
||||
|
||||
## tooltipRender
|
||||
|
||||
The [`tooltipRender`](../api/maps/#tooltiprender) event is triggered before the tooltip gets rendered. To know more about the arguments of this event, refer [here](../api/maps/iTooltipRenderEventArgs/).
|
||||
|
||||
## tooltipRenderComplete
|
||||
|
||||
The [`tooltipRenderComplete`](../api/maps/#tooltipRenderComplete) event is triggered after the tooltip gets rendered. To know more about the arguments of this event, refer [here](../api/maps/iTooltipRenderCompleteEventArgs/).
|
||||
|
||||
## zoom
|
||||
|
||||
The [`zoom`](../api/maps/#zoom) event will be triggered after zooming-in or zooming-out the Maps. To know more about the arguments of this event, refer [here](../api/maps/iMapZoomEventArgs/).
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
# Annotations
|
||||
|
||||
Annotations are used to mark the specific area of interest in a map area with texts, shapes, or images. To update the annotation in maps, please follow the given procedure.
|
||||
<!-- markdownlint-disable MD031 -->
|
||||
Initialize the maps control with annotation option, and specify the ID of HTML element in the content that needs to be displayed in maps area by using the `content` property. You can specify the content position with `x` and `y` values as mentioned in the following code example. To know more about annotations, please refer to the [`API`](../../api/maps/annotation/) documentation.
|
||||
Annotations are used to mark the specific area of interest in the Maps with texts, shapes, or images. Any number of annotations can be added to the Maps component.
|
||||
|
||||
Initialize the Maps control with annotation option, text content or ID of an HTML element or an HTML string can be specified to render a new element that needs to be displayed in the Maps by using the [`content`](../api/maps/annotationModel/#content) property. To specify the content position with [`x`](../api/maps/annotationModel/#x) and [`y`](../api/maps/annotationModel/#y) properties as mentioned in the following example.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html", es5Template="annotation" %}
|
||||
|
||||
```typescript
|
||||
import { Africa_Continent } from './Africa_Continent.ts';
|
||||
import { Maps , Annotations } from '@syncfusion/ej2-maps';
|
||||
import { Maps, Annotations } from '@syncfusion/ej2-maps';
|
||||
Maps.Inject(Annotations);
|
||||
|
||||
// initialize Maps component
|
||||
let map: Maps = new Maps({
|
||||
layers: [
|
||||
layers: [
|
||||
{
|
||||
shapeData: Africa_Continent,
|
||||
shapeSettings: {
|
||||
|
|
@ -21,14 +21,14 @@ let map: Maps = new Maps({
|
|||
}
|
||||
}
|
||||
],
|
||||
annotations:[
|
||||
annotations: [
|
||||
{
|
||||
content:'#maps-annotation', // To insert the text content
|
||||
x: '0%', y: '70%'
|
||||
content:'#maps-annotation', // To insert the text content
|
||||
x: '0%', y: '70%'
|
||||
},
|
||||
{
|
||||
content: '#compass-maps', // To insert the image
|
||||
x: '80%', y: '5%'
|
||||
content: '#compass-maps', // To insert the image
|
||||
x: '80%', y: '5%'
|
||||
}
|
||||
]
|
||||
}, '#element');
|
||||
|
|
@ -47,34 +47,35 @@ let map: Maps = new Maps({
|
|||
</defs>
|
||||
</svg>
|
||||
<div id="maps-annotation" style="display: none;">
|
||||
<div id="annotation">
|
||||
<div>
|
||||
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
|
||||
</div>
|
||||
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
|
||||
<div>
|
||||
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
|
||||
<li>Africa is the second largest and second most populated continent in the world.</li>
|
||||
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
|
||||
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compass-maps" style="display: none;">
|
||||
<img src="src/app/images/compass.png" height="75px" width="75px">
|
||||
</div>
|
||||
<style>
|
||||
#annotation {
|
||||
color: #DDDDDD;
|
||||
font-size: 12px;
|
||||
font-family: Roboto;
|
||||
background: #3E464C;
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
width: 300px;
|
||||
box-shadow: 0px 2px 5px #666;
|
||||
}
|
||||
</style>
|
||||
<div id="annotation">
|
||||
<div>
|
||||
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
|
||||
</div>
|
||||
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
|
||||
<div>
|
||||
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
|
||||
<li>Africa is the second largest and second most populated continent in the world.</li>
|
||||
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.
|
||||
</li>
|
||||
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compass-maps" style="display: none;">
|
||||
<img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
|
||||
</div>
|
||||
<style>
|
||||
#annotation {
|
||||
color: #DDDDDD;
|
||||
font-size: 12px;
|
||||
font-family: Roboto;
|
||||
background: #3E464C;
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
width: 300px;
|
||||
box-shadow: 0px 2px 5px #666;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
# Display geometry shape in bing maps
|
||||
|
||||
Usually bing map displays the maps in satellite view in which you can't make changes as per your requirement. To over come this, you can add maps shape as sublayer over the bing map and you can customize it as per your requirement. Kindly follow the below steps to add geometry shapes as sublayer in bing maps.
|
||||
Usually bing map displays the Maps in satellite view in which you can't make changes as per your requirement. To over come this, you can add maps shape as sublayer over the bing map and you can customize it as per your requirement. Kindly follow the below steps to add geometry shapes as sublayer in bing maps.
|
||||
|
||||
**Step 1**:
|
||||
|
||||
To render the map control as bing map, please set the layerType as bing and also provide your bing map's key.
|
||||
To render the Maps control as bing map, set the [`layerType`](../api/maps/layerSettingsModel/#layertype) as **Bing** and also provide the key for the bing map.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html" ,es5Template="bing" %}
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ map.appendTo("#container");
|
|||
|
||||
**Step 2**:
|
||||
|
||||
You can add geometry shape in bing map, using sublayer concept. First import the shape data and set the type as subLayer and also assign your shape data to API shapeData.
|
||||
The geometry shape can be added in the bing map using sublayer concept. In the below example, Africa continent can be set as the sublayer in bing map using the [`type`](../api/maps/layerSettingsModel/#type) property.
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html" ,es5Template="bing-map" %}
|
||||
|
||||
|
|
@ -60,6 +60,4 @@ map.appendTo("#container");
|
|||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
Above code will render Africa continent as sublayer in bing map.
|
||||
{% endtab %}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
# Custom path map
|
||||
|
||||
You can customize the maps control as the desired layout using the custom path map feature. Here, the maps control has been showcased with normal geometry type shapes to represent the bus seat selection layout. Please refer to the following code example to render the bus seat selection.
|
||||
Maps control can be customized as the desired layout using the custom path map feature. Here, the Maps control has been showcased with normal geometry type shapes to represent the bus seat selection layout. Please refer to the following example to render the bus seat selection.
|
||||
|
||||
<!-- markdownlint-disable MD031 -->
|
||||
{% tab template= "maps/how-to/custom-path", es5Template="custom-path" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# Drill-down
|
||||
|
||||
By clicking a continent, you can view all the countries available in that continent using the drill-down feature. For example, the countries in the `Africa` continent have been showcased here. You can showcase all the countries in `Africa` continent by clicking the [shapeSelected](../../api/maps/) event as mentioned in the following code example.
|
||||
By clicking a continent, all the countries available in that continent can be viewed using the drill-down feature. For example, the countries in the `Africa` continent have been showcased here. To showcase all the countries in `Africa` continent by clicking the [`shapeSelected`](../api/maps#shapeselected) event as mentioned in the following example.
|
||||
|
||||
<!-- markdownlint-disable MD031 -->
|
||||
{% tab template= "maps/default-map", sourceFiles="index.ts,index.html" , es5Template="drill" %}
|
||||
|
||||
|
|
@ -15,7 +16,7 @@ export interface ShapeData {
|
|||
continent?: string;
|
||||
}
|
||||
|
||||
// initialize Maps component
|
||||
// Initialize Maps component.
|
||||
let map: Maps = new Maps({
|
||||
shapeSelected: (args: IShapeSelectedEventArgs): void => {
|
||||
let shape: string = (args.shapeData as ShapeData).continent;
|
||||
|
|
@ -24,7 +25,7 @@ let map: Maps = new Maps({
|
|||
map.refresh();
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
layers: [
|
||||
{
|
||||
layerType: 'Geometry',
|
||||
shapeData: world_map,
|
||||
|
|
@ -34,7 +35,7 @@ let map: Maps = new Maps({
|
|||
shapeSettings: {
|
||||
colorValuePath: 'drillColor'
|
||||
},
|
||||
markerSettings: [ {
|
||||
markerSettings: [{
|
||||
visible: true,
|
||||
template: '<div id="marker3" class="markerTemplate">Africa' +
|
||||
'</div>',
|
||||
|
|
@ -42,8 +43,7 @@ let map: Maps = new Maps({
|
|||
{ latitude: 10.97274101999902, longitude: 16.390625 }
|
||||
],
|
||||
animationDuration: 0
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
layerType: 'Geometry',
|
||||
|
|
@ -56,9 +56,8 @@ let map: Maps = new Maps({
|
|||
fill: '#80306A'
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
},);
|
||||
});
|
||||
map.appendTo('#element');
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
# Marker Types
|
||||
# Marker types
|
||||
|
||||
## Add different types of markers
|
||||
|
||||
You can use different marker objects in maps control by using the marker settings.
|
||||
|
||||
To update different marker settings in maps, please follow the given steps:
|
||||
Different marker objects can be added to the Maps component using the marker settings. To update different marker settings in Maps, please follow the given steps:
|
||||
<!-- markdownlint-disable MD034 -->
|
||||
**Step 1**:
|
||||
|
||||
Initialize the maps control with marker settings. Here, a marker has been added with specified latitude and longitude of California by using the `dataSource` property. You can customize the shape of the marker using the `Shape` property and change the border color and width of the marker using the `border` property as mentioned in the following code example. To know more about the marker settings, please refer to the [`API`](../../api/maps/markerSettings/) documentation.
|
||||
Initialize the Maps control with marker settings. Here, a marker has been added with specified latitude and longitude of California by using the [`dataSource`](../api/maps/markerSettingsModel/#datasource) property. To customize the shape of the marker using the [`shape`](../api/maps/markerSettingsModel/#shape) property and change the border color and width of the marker using the [`border`](../api/maps/markerSettingsModel/#border) property as mentioned in the following example.
|
||||
|
||||
{% tab template= "maps/default-map", sourceFiles="index.ts,index.html" , es5Template="step-one" %}
|
||||
|
||||
|
|
@ -16,10 +14,10 @@ Initialize the maps control with marker settings. Here, a marker has been added
|
|||
import { world_map } from './world-map.ts';
|
||||
import { Maps , Marker, MarkerSettings } from '@syncfusion/ej2-maps';
|
||||
|
||||
// initialize Map component
|
||||
// Initialize Map component.
|
||||
let map: Maps = new Maps({
|
||||
//Initializing Map with Marker settings
|
||||
layers: [
|
||||
// Initializing Map with Marker settings.
|
||||
layers: [
|
||||
{
|
||||
shapeData: world_map,
|
||||
markerSettings: [
|
||||
|
|
@ -36,15 +34,16 @@ let map: Maps = new Maps({
|
|||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}, '#element'); // render initialized Map
|
||||
]
|
||||
});
|
||||
map.appendTo('#element'); // render initialized Map.
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
**Step 2**:
|
||||
|
||||
Customize the above option for n number of markers as mentioned in the following code example.
|
||||
Customize the above option for n number of markers as mentioned in the following example.
|
||||
|
||||
{% tab template= "maps/default-map", sourceFiles="index.ts,index.html" , es5Template = "step-two" %}
|
||||
|
||||
|
|
@ -92,52 +91,12 @@ let map: Maps = new Maps({
|
|||
height:10,
|
||||
animationDuration:0,
|
||||
border:{width:2,color:'blue'}
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}, '#element'); // render initialized Map
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Tooltip for marker
|
||||
|
||||
Tooltip is used to display more information about marker on mouse over or touch end event. This can be enabled separately for layer or marker by setting the `tooltipSettings.visible` property to **true**. The `valuePath` property in tooltip takes the field name that presents in dataSource and displays that value as tooltip text. The following code example illustrates enabling the tooltip for marker to show city name field. To know more about tooltip, please refer to the [`API`](../../api/maps/tooltipSettings/) documentation.
|
||||
|
||||
{% tab template= "maps/default-map", sourceFiles="index.ts,index.html" , es5Template="marker-tooltip" %}
|
||||
|
||||
```typescript
|
||||
import { usa_map } from './usa.ts';
|
||||
import { Maps , Marker,MapsTooltip, MarkerSettings } from '@syncfusion/ej2-maps';
|
||||
Maps.Inject(Marker,MapsTooltip);
|
||||
// initialize Maps component
|
||||
let map: Maps = new Maps({
|
||||
layers: [
|
||||
{
|
||||
shapeData: usa_map,
|
||||
markerSettings: [
|
||||
{
|
||||
dataSource: [
|
||||
{ latitude: 40.7424509, longitude: -74.0081468, city: 'New York' }
|
||||
],
|
||||
visible:true,
|
||||
shape:'Circle',
|
||||
fill:'white',
|
||||
width:3,
|
||||
animationDuration:0,
|
||||
border:{width:2,color:'#333'},
|
||||
tooltipSettings: {
|
||||
visible: true,
|
||||
valuePath:'city'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
height: '450px',
|
||||
width: '700px'
|
||||
}, '#element');
|
||||
});
|
||||
map.appendTo('#element'); // render initialized Map.
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
# Adding multiple layers in map
|
||||
# Multilayer
|
||||
|
||||
The multilayer support allows loading multiple shape files in a single container and enables maps to display more information.
|
||||
|
||||
Initialize the map component with SubLayer option by using the `type` property. The shape layer is the core layer of the map. Multiple layers can be added in a shape layer as sublayers as mentioned in the following code example. To know more about multiple layers, please refer to the [`API`](../../api/maps/layerSettings/) documentation.
|
||||
The multilayer support allows loading multiple shape files in a single container and enables Maps to display more information. The shape layer is the main layer of the Maps. Multiple layers can be added in a shape layer as **SubLayer** using the [`type`](../api/maps/type/) property.
|
||||
|
||||
{% tab template= "maps/default-map", sourceFiles="index.ts,index.html" , es5Template="layers" %}
|
||||
|
||||
|
|
@ -14,7 +12,7 @@ import { Maps } from '@syncfusion/ej2-maps';
|
|||
|
||||
// initialize Maps component
|
||||
let map: Maps = new Maps({
|
||||
layers: [
|
||||
layers: [
|
||||
{
|
||||
shapeData: usa_map,
|
||||
shapeSettings: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Navigating to particular country
|
||||
|
||||
You can navigate to a particular country by setting the center position zooming using the [centerPosition](../../api/maps#centerposition/) and [zoomFactor](../../api/maps/zoomSettings/#zoomfactor) APIs as demonstrated in the following code sample. The center position is used to configure the zoom level of maps, and zoom factor is used to specify the center position where the map should be displayed.
|
||||
To navigate a particular country by setting the center position zooming using the [`centerPosition`](../../api/maps#centerposition/) and [`zoomFactor`](../../api/maps/zoomSettings/#zoomfactor) property as demonstrated in the following sample. The center position is used to configure the zoom level of maps, and zoom factor is used to specify the center position where the map should be displayed.
|
||||
|
||||
To navigate to a particular country, follow the given steps:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Center position zooming
|
||||
|
||||
You can achieve the center position zooming by using the [centerPosition](../../api/maps/centerPosition/) and [zoomFactor](../../api/maps/zoomSettings/#zoomfactor) APIs as mentioned in the following code example. The center position is used to configure the zoom level of maps, and zoom factor is used to specify the center position where the map should be displayed.
|
||||
The center position zooming can be achieved by using the [`centerPosition`](../api/maps#centerposition) and [`zoomFactor`](../api/maps/zoomSettingsModel/#zoomfactor) properties as mentioned in the following example. The center position is used to configure the zoom level of Maps, and the zoom factor is used to specify the center position where the Maps should be displayed.
|
||||
|
||||
{% tab template= "maps/default-map", sourceFiles="index.ts,index.html" , es5Template="position" %}
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ Maps.Inject(Zoom);
|
|||
// initialize Maps component
|
||||
let map: Maps = new Maps({
|
||||
zoomSettings:{
|
||||
enable:false,
|
||||
enable: true,
|
||||
zoomFactor:13
|
||||
},
|
||||
centerPosition: {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
|
||||
# Overview
|
||||
|
||||
The Map control is used to visualize the geographical data. It is used to represent the statistical data of a particular geographical area on Earth, with user interactivity and provides various customizing options. All the map elements are rendered using Scalable Vector Graphics (SVG).
|
||||
The Maps control is used to visualize the geographical data. It is used to represent the statistical data of a particular geographical area on Earth, with user interactivity and provides various customizing options. All the Maps elements are rendered using Scalable Vector Graphics (SVG).
|
||||
|
||||
## Key Features
|
||||
|
||||
* Supports any number of layers and sublayers.
|
||||
* Supports GeoJSON data, which allows you to plot your own shapes in the maps.
|
||||
* Supports map providers such as Bing and OpenStreetMap that can be added to any layers.
|
||||
* Supports 6 types of map projections.
|
||||
* Support legend, data label, marker, bubble, navigation lines and annotations for visualizing additional information on the map.
|
||||
* Supports GeoJSON data, which allows plotting the custom shapes in the Maps.
|
||||
* Supports Maps providers such as Bing and OpenStreetMap that can be added as main layers.
|
||||
* Supports 6 types of Maps projections.
|
||||
* Supports legend, data label, marker, bubble, navigation lines and annotations for visualizing additional information on the Maps.
|
||||
* Supports interactive features like zooming, panning, tooltip, highlight, selection and interactive legend.
|
||||
|
|
@ -1,42 +1,55 @@
|
|||
---
|
||||
title: " Internationalization in EJ2 Maps control | Syncfusion "
|
||||
|
||||
component: "Maps"
|
||||
|
||||
description: "Learn here all about Internationalization of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
# Internationalization
|
||||
|
||||
Maps provides support for internationalization for the below elements.
|
||||
Maps provide support for internationalization for the below elements.
|
||||
|
||||
* Datalabel
|
||||
* Data label
|
||||
* Tooltip
|
||||
|
||||
For more information about number and date formatter you can refer
|
||||
[`internationalization`](http://ej2.syncfusion.com/documentation/base/intl.html).
|
||||
For more information about number and date formatter, refer to the
|
||||
[`internationalization`](http://ej2.syncfusion.com/documentation/base/intl.html) section.
|
||||
|
||||
<!-- markdownlint-disable MD036 -->
|
||||
**Globalization**
|
||||
|
||||
Globalization is the process of designing and developing an component that works in different
|
||||
## Globalization
|
||||
|
||||
Globalization is the process of designing and developing a component that works in different
|
||||
cultures/locales. Internationalization library is used to globalize number, date, time values in
|
||||
Maps component using [`format`] property in the maps model.
|
||||
Maps component using [`format`](../api/maps/mapsModel/#format) property in the [`Maps`](../api/maps/mapsModel).
|
||||
|
||||
**Numeric Format**
|
||||
## Numeric Format
|
||||
|
||||
In the below example tooltip is globalized to Deutsch culture.
|
||||
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 } from '@syncfusion/ej2-maps';
|
||||
import { Maps, MapsTooltip } from '@syncfusion/ej2-maps';
|
||||
import { world_map } from './world-map.ts';
|
||||
import { setCulture } from '@syncfusion/ej2-base';
|
||||
setCulture('de');
|
||||
Maps.Inject(MapsTooltip);
|
||||
let maps: Maps = new Maps({
|
||||
format: 'c',
|
||||
useGroupingSeparator: true,
|
||||
layers: [
|
||||
{
|
||||
{
|
||||
shapeData: world_map,
|
||||
dataSource: [{ "Country": "China", "Membership": "Permanent"},
|
||||
{"Country": "France","Membership": "Permanent" },
|
||||
{ "Country": "Russia","Membership": "Permanent"},
|
||||
{"Country": "Kazakhstan","Membership": "Non-Permanent"},
|
||||
{ "Country": "Poland","Membership": "Non-Permanent"},
|
||||
{"Country": "Sweden","Membership": "Non-Permanent"}],
|
||||
dataSource: [
|
||||
{ "Country": "China", "Membership": "Permanent", population: '38332521' },
|
||||
{ "Country": "France", "Membership": "Permanent", population: '19651127' },
|
||||
{ "Country": "Russia", "Membership": "Permanent", population: '3090416' },
|
||||
{ "Country": "Kazakhstan", "Membership": "Non-Permanent", population: '1232521' },
|
||||
{ "Country": "Poland", "Membership": "Non-Permanent", population: '90332521' },
|
||||
{ "Country": "Sweden", "Membership": "Non-Permanent", population: '383521' }
|
||||
],
|
||||
shapePropertyPath: 'name',
|
||||
shapeDataPath: 'Country'
|
||||
shapeDataPath: 'Country',
|
||||
shapeSettings: {
|
||||
colorValuePath: 'Membership',
|
||||
colorMapping: [
|
||||
|
|
@ -46,6 +59,10 @@ let maps: Maps = new Maps({
|
|||
{
|
||||
value: 'Non-Permanent', color: '#316DB5'
|
||||
}]
|
||||
},
|
||||
tooltipSettings: {
|
||||
visible: true,
|
||||
valuePath: 'population'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,24 +1,16 @@
|
|||
# Layers
|
||||
|
||||
Map is maintained through `layers` and it can accommodate one or more layers.
|
||||
The Maps component is rendered through [`layers`](../api/maps/#layers) and any number of layers can be added to the Maps.
|
||||
|
||||
## Multilayer
|
||||
|
||||
The Multilayer support allows you to load multiple shape files in a single container, enabling maps to display more information.
|
||||
|
||||
### Adding Multiple Layers in the Map
|
||||
|
||||
The shape layers is the core layer of the map. The multiple layers can be added in the shape layers as `subLayers` within the shape layers.
|
||||
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.
|
||||
|
||||
## SubLayer
|
||||
|
||||
The subLayer is the collection of shape layers.
|
||||
Sublayer is a type of shape file layer. It allows loading multiple shape files in a single map view. For example, a sublayer can be added over the main layer to view geographic features such as rivers, valleys and cities in a map of a country. Similar to the main layer, elements in the Maps such as markers, bubbles, color mapping and legends can be added to the sub-layer.
|
||||
|
||||
In this example, World Map shape is used as shape data by utilizing the `USA.json”` file in the following folder structure obtained from downloaded Maps_GeoJSON folder.
|
||||
|
||||
..\ Maps_GeoJSON\
|
||||
|
||||
You can assign the complete contents in `USA.json` file to new JSON object. For better understanding, a JSON file `USA.json` is already created to store JSON data in JSON object usa_map and also copy the USA.json file data, bind value to “california” and “texas”.
|
||||
In this example, the United States map shape is used as shape data by utilizing the **usa.ts** file, and the **texas.ts** and **california.ts** files are used as sub-layers in the United States map.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="layers" %}
|
||||
|
||||
|
|
@ -26,20 +18,12 @@ You can assign the complete contents in `USA.json` file to new JSON object. For
|
|||
|
||||
## Displaying layer in the view
|
||||
|
||||
In Maps, you can load multiple shape files. Using the `baseLayerIndex` property, you can select a layer to display on user interface.
|
||||
|
||||
In this example, we have loaded two layers with the World map and the United States map shape data and selected a layer using the `baseLayerIndex` property to show that layer on the web page.
|
||||
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" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
If you set the `baseLayerIndex` value to 0, the world map will be loaded.
|
||||
|
||||
This concept is used in the Maps drill-down feature, so the corresponding shape will be loaded when clicking a shape of the maps.
|
||||
|
||||
Refer the [`API`](../api/maps/layerSettingsModel/) for Layers feature.
|
||||
|
||||
## See Also
|
||||
|
||||
* [Adding multiple layers in map](../maps/how-to/multiple-layer)
|
||||
|
|
|
|||
|
|
@ -1,27 +1,22 @@
|
|||
# Legend
|
||||
|
||||
A legend is a key used on a map that contains swatches of symbols with descriptions. It provides valuable information for interpreting what the map is displaying and can be represented in various colors, shapes or other identifiers based on the data. It gives a breakdown of what each symbol represents throughout the map.
|
||||
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**.
|
||||
|
||||
## Visibility
|
||||
## Positioning of the legend
|
||||
|
||||
The Legends can be made visible by setting the visible property of legendSettings to true.
|
||||
The legend can be positioned in the following two ways:
|
||||
|
||||
## Positioning of the Legend
|
||||
* Absolute position.
|
||||
|
||||
The legend can be positioned in two ways.
|
||||
* Dock position.
|
||||
|
||||
* Absolute Position.
|
||||
<b>Absolute position</b>
|
||||
|
||||
* Dock Position.
|
||||
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**.
|
||||
|
||||
### Absolute Position
|
||||
<b>Dock position</b>
|
||||
|
||||
Based on the margin values of X and Y-axes, the Map legends can be positioned with the support of `location.x` and `location.y` properties available in legendSettings. For positioning the legend based on margins corresponding to a map, position value is set as ‘Float’.
|
||||
|
||||
### Dock Position
|
||||
|
||||
The map legends can be positioned in following locations within the container.
|
||||
You can set this option by using `position` property in legendSettings.
|
||||
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.
|
||||
|
||||
1 Top
|
||||
|
||||
|
|
@ -31,33 +26,53 @@ You can set this option by using `position` property in legendSettings.
|
|||
|
||||
4 Right
|
||||
|
||||
above four positions can be aligned combination of 'Near', 'Center' and 'Far' using `alignment` in `legendSettings`. So legend can be aligned 12 positions.
|
||||
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.
|
||||
|
||||
## Legend Mode
|
||||
{% tab template= "maps/default-map", es5Template="legend-position" %}
|
||||
|
||||
Legend had two type of mode. `Default` mode and `Interactive` mode.
|
||||
{% endtab %}
|
||||
|
||||
### Default Mode
|
||||
## Legend mode
|
||||
|
||||
Default mode legends having symbols with legend labels, used to identify the shape or bubble or marker color.
|
||||
Legend had two types of mode. **Default** mode and **Interactive** mode.
|
||||
|
||||
### Interactive Mode
|
||||
<b>Default mode</b>
|
||||
|
||||
The legends can be made interactive with an arrow mark indicating the exact range color in the legend when the mouse hovers over the corresponding shapes. You can enable this option by setting `mode` property in legendSettings value as “Interactive” and default value of `mode` property is “Default” to enable the normal legend.
|
||||
Default mode legends having symbols with legend labels, used to identify the shape or bubble or marker color. To enable this option by setting the [`mode`](../api/maps/legendSettingsModel/#mode) property of [`legendSettings`](../api/maps/legendSettingsModel) as **Default**.
|
||||
|
||||
## Legend Size
|
||||
<b>Interactive mode</b>
|
||||
|
||||
The map legend size can be modified by using the `height` and `width` properties in `legendSettings`.
|
||||
The legends can be made interactive with an arrow mark indicating the exact range color in the legend when the mouse hovers over the corresponding shapes. To enable this type of mode by setting the [`mode`](../api/maps/legendSettingsModel/#mode) property of [`legendSettings`](../api/maps/legendSettingsModel) as **Interactive**. The [`invertedPointer`](../api/maps/legendSettingsModel/#invertedpointer) property is used to enable or disable the visibility of the inverted pointer in interactive legend in Maps.
|
||||
|
||||
## Legend opacity
|
||||
{% tab template= "maps/default-map", es5Template="legend-mode" %}
|
||||
|
||||
To specify the transparency for legend shape set `opacity` property in `legendSettings`.
|
||||
{% endtab %}
|
||||
|
||||
## Legend for Shapes
|
||||
## Legend for shapes
|
||||
|
||||
The Layer shape type legends can be generated for each color mappings in shape settings.Assign for the layer `dataSource`. Provide the `shapePropertyPath` value as 'name and `shapeDataPath` value as 'State'.Finally set `legendSettings.visible` as true
|
||||
Legend for shapes can be generated from color mapping types such as equal color mapping, range color mapping and desaturation color mapping. Refer to the below data source which demonstrates the permanent and non-permanent countries in the UN security council.
|
||||
|
||||
To enable the equal colormapping refer the `shapeSettings.colorMapping` code snippet.
|
||||
```typescript
|
||||
export var unCountries: object[] = [
|
||||
{ Country: 'China', Membership: 'Permanent' },
|
||||
{ Country: 'France', Membership: 'Permanent' },
|
||||
{ Country: 'Russia', Membership: 'Permanent' },
|
||||
{ Country: 'United Kingdom', Membership: 'Permanent' },
|
||||
{ Country: 'United States', Membership: 'Permanent' },
|
||||
{ Country: 'Bolivia', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Eq. Guinea', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Ethiopia', Membership: 'Non-Permanent' },
|
||||
{ Country: "Côte d'Ivoire", Membership: 'Permanent' },
|
||||
{ Country: 'Kazakhstan', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Kuwait', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Netherlands', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Peru', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Poland', Membership: 'Non-Permanent' },
|
||||
{ Country: 'Sweden', Membership: 'Non-Permanent' },
|
||||
];
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="legend" %}
|
||||
|
||||
|
|
@ -65,11 +80,75 @@ To enable the equal colormapping refer the `shapeSettings.colorMapping` code sni
|
|||
|
||||
## Legend Shape
|
||||
|
||||
To get the legend shape value for `legendSettings` by using `shape` property. You can customize the shape by using the `shapeWidth` and `shapeHeight` property.
|
||||
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.
|
||||
|
||||
* Circle
|
||||
* Rectangle
|
||||
* Triangle
|
||||
* Diamond
|
||||
* Cross
|
||||
* Star
|
||||
* HorizontalLine
|
||||
* VerticalLine
|
||||
* Pentagon
|
||||
* InvertedTriangle
|
||||
|
||||
The shape of legends can be customized by using the [`shapeWidth`](../api/maps/legendSettingsModel/#shapewidth),[`shapeHeight`](../api/maps/legendSettingsModel/#shapeheight), [`shapeBorder`](../api/maps/legendSettingsModel/#shapeborder) and [`shapePadding`](../api/maps/legendSettingsModel/#shapepadding) properties.
|
||||
|
||||
## Customization
|
||||
|
||||
The following properties are available in legend to customize the legend shape and legend text in Maps.
|
||||
|
||||
* [`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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="legend-customization" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Legend for items excluded from color mapping
|
||||
|
||||
Based on the ranges in data source, get the excluded ranges from color mapping, and then show the legend with excluded range values are bound to the specific legend.Bind the `population_density` value to `dataSource` layer, and then specify the `colorValuePath` as 'density' to map the range values for shapes. Refer to the following the code example for more details.
|
||||
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 = [
|
||||
...
|
||||
{
|
||||
'code': 'AE',
|
||||
'value': 90,
|
||||
'name': 'United Arab Emirates',
|
||||
'population': 8264070,
|
||||
'density': 99
|
||||
},
|
||||
{
|
||||
'code': 'GB',
|
||||
'value': 257,
|
||||
'name': 'United Kingdom',
|
||||
'population': 62041708,
|
||||
'density': 255
|
||||
},
|
||||
{
|
||||
'code': 'US',
|
||||
'value': 34,
|
||||
'name': 'United States',
|
||||
'population': 325020000,
|
||||
'density': 33
|
||||
}
|
||||
...
|
||||
];
|
||||
```
|
||||
|
||||
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**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="legend-shape" %}
|
||||
|
||||
|
|
@ -77,17 +156,15 @@ Based on the ranges in data source, get the excluded ranges from color mapping,
|
|||
|
||||
## Hide desired legend items
|
||||
|
||||
To enable or disable the desired legend for each colormapping, set the `showLegend` property to `true` in `colorMapping`.
|
||||
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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="hidedesiredlegend" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Hide legend items based data source value
|
||||
## Hide legend items based on data source value
|
||||
|
||||
To enable or disable the legend visibility for each item, bind the field name in the data source to the `showLegendPath` property in `legendSettings`.
|
||||
|
||||
The following code example shows how to hide the legend items based 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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="hidedesiredlegendDS" %}
|
||||
|
||||
|
|
@ -95,7 +172,7 @@ The following code example shows how to hide the legend items based data source
|
|||
|
||||
## Bind legend item text from data source
|
||||
|
||||
To show the legend text based on binding, the field name in the datasource should be set to the `valuePath` property in `legendSettings`.
|
||||
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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="bindlegendtext" %}
|
||||
|
||||
|
|
@ -103,10 +180,41 @@ To show the legend text based on binding, the field name in the datasource shoul
|
|||
|
||||
## Hide duplicate legend items
|
||||
|
||||
To enable or disable the duplicate legend items, set the property `removeDuplicateLegend` property to `true` in `legendSettings`.
|
||||
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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="duplicatelegend" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
Refer the [`API`](../api/maps/legendSettingsModel/) for Legend feature.
|
||||
## 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 following properties are available to customize the toggle option in legend.
|
||||
|
||||
* [`applyShapeSettings`](../api/maps/toggleLegendSettingsModel/#applyshapesettings) – To apply the [`fill`](../api/maps/shapeSettingsModel/#fill) property value to the shape of the Maps when it is set to **true**.
|
||||
* [`fill`](../api/maps/toggleLegendSettingsModel/#fill)- To apply the color to the shape of the Maps for which legend item is toggled.
|
||||
* [`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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="bubble-legend" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## 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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="legend-marker" %}
|
||||
|
||||
{% endtab %}
|
||||
|
|
@ -1,6 +1,14 @@
|
|||
# Localization
|
||||
---
|
||||
title: " Localization in EJ2 Maps control | Syncfusion "
|
||||
|
||||
Localization library allows to localize the default text content of Maps. In Maps component, it has the static text on some features(like zooming toolbars) and this can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object.
|
||||
component: "Maps"
|
||||
|
||||
description: "Learn here all about Localization of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
# Localization in EJ2 Maps
|
||||
|
||||
The localization library allows localizing the default text content of the Maps control. The Maps control has the static text of some features such as tooltip of zoom toolbar, and that can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object.
|
||||
|
||||
<!-- markdownlint-disable MD033 -->
|
||||
|
||||
|
|
@ -15,11 +23,11 @@ Localization library allows to localize the default text content of Maps. In Map
|
|||
</tr>
|
||||
<tr>
|
||||
<td>ZoomIn</td>
|
||||
<td>ZoomIn</td>
|
||||
<td>Zoom In</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ZoomOut</td>
|
||||
<td>ZoomOut</td>
|
||||
<td>Zoom Out</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Reset</td>
|
||||
|
|
@ -29,16 +37,9 @@ Localization library allows to localize the default text content of Maps. In Map
|
|||
<td>Pan</td>
|
||||
<td>Pan</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ResetZoom</td>
|
||||
<td>Reset Zoom</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
To load translation object in an application use load function of L10n class.
|
||||
|
||||
For more information about localization, refer this
|
||||
[`localization`](http://ej2.syncfusion.com/documentation/base/localization.html)
|
||||
To load translation object in the application, use `load` function of **L10n** class. For more information about localization, refer [here](http://ej2.syncfusion.com/documentation/base/localization.html).
|
||||
|
||||
{% tab template="maps/default-map", sourceFiles="index.ts,index.html", es5Template="localization" %}
|
||||
|
||||
|
|
@ -63,7 +64,8 @@ L10n.load({
|
|||
|
||||
let map: Maps = new Maps({
|
||||
zoomSettings: {
|
||||
enable: true
|
||||
enable: true,
|
||||
toolbars: ['ZoomIn', 'ZoomOut', 'Zoom', 'Pan', 'Reset' ]
|
||||
},
|
||||
locale: 'ar-AR',
|
||||
layers: [
|
||||
|
|
|
|||
|
|
@ -1,42 +1,54 @@
|
|||
# Markers
|
||||
|
||||
Markers are notes used to leave some message on the map. It indicates or marks a specific location with desired symbols on the maps.
|
||||
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**.
|
||||
|
||||
The `dataSource` property has a list of objects that contains data for markers. By default, it displays the bound data at the specified latitude and longitude. Using the `visible` API, you can enable or disable the markers.
|
||||
## Adding marker
|
||||
|
||||
There are two ways to set marker for map.
|
||||
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.
|
||||
|
||||
* Marker and marker template
|
||||
|
||||
* Adding marker objects to map.
|
||||
|
||||
## Marker and marker template
|
||||
|
||||
The `markerSettings.dataSource` property has a list of objects that contains the data for Annotation. By default, it displays the bound data at the specified latitude and longitude. The `markerSettings.template` property is used for customizing the template for markers.
|
||||
* 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker-adding" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Adding marker objects to map
|
||||
## Customization
|
||||
|
||||
The n number of markers can be added to shape layers with `markerSettings.dataSource` property. Each dataSource object contains the following list of properties.
|
||||
The following properties are available in [`markerSettings`](../api/maps/markerSettingsModel/) property to customize the Markers of the Maps component.
|
||||
|
||||
* label - Text that displays some information about the annotation in text format.
|
||||
* latitude - Latitude point determine the Y-axis position of annotation.
|
||||
* longitude - Longitude point determine the X-axis position of annotation.
|
||||
* [`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.
|
||||
* [`dashArray`](../api/maps/markerSettingsModel/#dasharray) - To define the pattern of dashes and gaps that is applied to the outline of the markers in Maps.
|
||||
* [`height`](../api/maps/markerSettingsModel/#height) - To customize the height of the markers in Maps.
|
||||
* [`width`](../api/maps/markerSettingsModel/#width) - To customize the width of the markers in Maps.
|
||||
* [`offset`](../api/maps/markerSettingsModel/#offset) - To customize the position of the markers in Maps.
|
||||
* [`opacity`](../api/maps/markerSettingsModel/#opacity) - To customize the transparency of the markers in Maps.
|
||||
* [`animationDelay`](../api/maps/markerSettingsModel/#animationdelay) - To change the time delay in the transition for markers.
|
||||
* [`animationDuration`](../api/maps/markerSettingsModel/#animationduration) - To change the time duration of animation for markers.
|
||||
* [`highlightSettings`](../api/maps/markerSettingsModel/#highlightsettings) - To customize the highlight settings for the marker in Maps.
|
||||
* [`selectionSettings`](../api/maps/markerSettingsModel/#selectionsettings) - To customize the selection settings for the marker in Maps.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker-object" %}
|
||||
{% tab template="maps/default-map", es5Template="marker-customization" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Marker shapes
|
||||
|
||||
The Maps component contains the following marker shapes. You can select any shape using the `shape` property in `markerSettings`.
|
||||
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.
|
||||
|
||||
* Ballon
|
||||
* Balloon
|
||||
* Circle
|
||||
* Cross
|
||||
* Diamond
|
||||
|
|
@ -47,9 +59,17 @@ The Maps component contains the following marker shapes. You can select any shap
|
|||
* VerticalLine
|
||||
* HorizontalLine
|
||||
|
||||
## 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker-image" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Multiple marker groups
|
||||
|
||||
You can specify multiple marker groups and customize each group of markers separately as demonstrated in the following example.
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="markerGroup" %}
|
||||
|
||||
|
|
@ -59,11 +79,10 @@ You can specify multiple marker groups and customize each group of markers separ
|
|||
|
||||
### Bind different colors and shapes to the marker from data source
|
||||
|
||||
The location on the map is marked by different marker shapes using `shapeValuePath` property in `markerSettings`. Based on the field name in the data source bind the value to the `shapeValuePath` property. Also, you can customize the marker shape color by binding the color value field name in the data source to the `colorValuePath` property in `markerSettings`.
|
||||
|
||||
A default marker object is represented by `balloon` shape. You can set various shapes to the marker object by using `shape` property in `markerSettings`. Also, you can change the shapes of the marker from the datasource.
|
||||
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/).
|
||||
|
||||
The following shapes are used for the marker object.
|
||||
|
||||
* Circle
|
||||
* Rectangle
|
||||
* Balloon
|
||||
|
|
@ -80,45 +99,67 @@ The following shapes are used for the marker object.
|
|||
|
||||
{% endtab %}
|
||||
|
||||
## Marker Zooming
|
||||
## Setting value path from the data source
|
||||
|
||||
The map is initially scaled to the center value based on the marker distance. This can be achieved by setting `shouldZoomInitially` property in `zoomSettings` as `true`.
|
||||
The latitude and longitude values are used to determine the location of each marker in the Maps. The [`latitudeValuePath`](../api/maps/markerSettingsModel/#latitudevaluepath) and [`longitudeValuePath`](../api/maps/markerSettingsModel/#longitudevaluepath) properties are used to specify the value path that presents in the data source of the marker. In the following example, the field name from the data source is set to the [`latitudeValuePath`](../api/maps/markerSettingsModel/#latitudevaluepath) and [`longitudeValuePath`](../api/maps/markerSettingsModel/#longitudevaluepath) properties.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="markerValuePath" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Marker zooming
|
||||
|
||||
The Maps is initially scaled to the center value based on the marker distance. This can be achieved by setting the [`shouldZoomInitially`](../api/maps/zoomSettingsModel/#shouldzoominitially) property in [`zoomSettings`](../api/maps/zoomSettingsModel/) as **true**.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="markerZooming" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Marker Cluster Expand
|
||||
## Marker clustering
|
||||
|
||||
The cluster is formed by grouping an identical and non-identical marker from the surrounding area. By clicking on the cluster and setting `allowClusterExpand` property in `markerClusterSettings` as `true` to expand the identical markers. If you zoom in any of the locations of the cluster, the number on the cluster will decrease and the overlapping marker will be split into an individual marker on the map. When you zoom out, it will increase the marker count and then cluster it again.
|
||||
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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="markerClusterExpand" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Enable the Legend for map markers
|
||||
|
||||
Legend can be enabled for marker using `legendSettings.type` as **Markers** and legend visible as true.Refer the code snippet to enable the legend for the markers.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker-legend" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Marker Clustering
|
||||
|
||||
Maps provides support to hide and cluster markers when they overlap each other.
|
||||
|
||||
The number on a cluster indicates how many overlapped markers it contains. If you zoom any of the cluster locations, the number on the cluster will decrease and you will begin to see the individual markers on the map. When zooming out, the overlapping marker will increase so that you can cluster it again and increase the count over the cluster.
|
||||
|
||||
Using the [`markerClusterSettings.allowClustering`](../api/maps/markerClusterSettings/#allowclustering) API, you can enable or disable this cluster support. The [`markerClusterSettings`](../api/maps/markerClusterSettings) API also helps to customize clusters.
|
||||
|
||||
The [`MarkerClusterRendering`](../api/maps/iMarkerClusterRenderingEventArgs) event occurs when each cluster is rendered. You can also use this to customize the cluster. The [`markerClusterClick`](../api/maps/iMarkerClickEventArgs) and [`markerClusterMouseMove`](../api/maps/iMarkerClusterMoveEventArgs) events on mouse move and on clicking 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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="cluster" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
Refer the [`API`](../api/maps/markerSettingsModel/) for Marker feature.
|
||||
## Customization of marker cluster
|
||||
|
||||
The following properties are available to customize the marker clustering in the Maps component.
|
||||
|
||||
* [`border`](../api/maps/markerClusterSettingsModel/#border) - To customize the color, width and opacity of the border of cluster in Maps.
|
||||
* [`connectorLineSettings`](../api/maps/connectorLineSettingsModel/) - To customize the connector line in cluster separating the markers.
|
||||
* [`dashArray`](../api/maps/markerClusterSettingsModel/#dasharray) - To customize the dash array for the marker cluster in Maps.
|
||||
* [`fill`](../api/maps/markerClusterSettingsModel/#fill) - Applies the color of the cluster in Maps.
|
||||
* [`height`](../api/maps/markerClusterSettingsModel/#height) - To customize the height of the marker cluster in Maps.
|
||||
* [`imageUrl`](../api/maps/markerClusterSettingsModel/#imageurl) - To customize the URL path for the marker cluster when the cluster shape is set as image in Maps.
|
||||
* [`labelStyle`](../api/maps/markerClusterSettingsModel/#labelstyle) - To customize the text in marker cluster.
|
||||
* [`offset`](../api/maps/markerClusterSettingsModel/#offset) - To customize the offset position for the marker cluster in Maps.
|
||||
* [`opacity`](../api/maps/markerClusterSettingsModel/#opacity) - To customize the opacity of the marker cluster.
|
||||
* [`shape`](../api/maps/markerClusterSettingsModel/#shape) - To customize the shape for the cluster of markers.
|
||||
* [`width`](../api/maps/markerClusterSettingsModel/#width) - To customize the width of the marker cluster in Maps.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="cluster-customization" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Marker cluster expand
|
||||
|
||||
The cluster is formed by grouping an identical and non-identical marker from the surrounding area. By clicking on the cluster and setting the [`allowClusterExpand`](../api/maps/markerClusterSettingsModel/#allowclusterexpand) property in [`markerClusterSettings`](../api/maps/markerClusterSettingsModel) as **true** to expand the identical markers. If zoom in any of the locations of the cluster, the number on the cluster will decrease and the overlapping marker will be split into an individual marker on the map. When performing zoom out, it will increase the marker count and then cluster it again.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="markerClusterExpand" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## 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.
|
||||
|
||||
{% tab template="maps/default-map", es5Template="marker-tooltip" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,17 @@
|
|||
# Navigation Lines
|
||||
|
||||
The navigation lines are used to denote path between two locations. We can use this feature to draw the flight or train or sea routes.
|
||||
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**.
|
||||
|
||||
## Customization
|
||||
|
||||
You can customize the following properties in the navigation lines by modifying their default values in `navigationlineSettings`
|
||||
The following properties are available in [`navigationLineSettings`](../api/maps/navigationLineSettingsModel/) property to customize the navigation line of the Maps component.
|
||||
|
||||
* Color - Specifies the color of navigation line.
|
||||
* Dash array - Specifies the type of dash array line.
|
||||
* Width - Specifies the line width.
|
||||
* Angle - Specifies the navigation line angle.
|
||||
* Highlight settings - Customizes the opacity, border, and fill color when the cursor hovers over it.
|
||||
* Selection settings - Customizes the opacity, border, and fill color when the line is selected.
|
||||
|
||||
Following example shows rendering the path between two locations using latitudes and longitudes.
|
||||
|
||||
Yon can customize the navigation line color, dashArray, width and angle by modifying their default values in
|
||||
`navigationLineSettings`.
|
||||
|
||||
Refer the below code snippet to navigate line between two cities in World map.
|
||||
Import usmap geo json data from world_map.ts file.
|
||||
Import the `NavigationLine` Module and Inject into the Maps using `Maps.Inject(NavigationLine)`.
|
||||
Provide two locations latitude and longitude values to `navigationLineSettings`.
|
||||
* [`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.
|
||||
* [`width`](../api/maps/navigationLineSettingsModel/#width) - To customize the width of the navigation lines.
|
||||
* [`angle`](../api/maps/navigationLineSettingsModel/#angle) - To customize the angle of the navigation lines.
|
||||
* [`highlightSettings`](../api/maps/navigationLineSettingsModel/#highlightsettings) - To customize the highlight settings of the navigation line.
|
||||
* [`selectionSettings`](../api/maps/navigationLineSettingsModel/#selectionsettings) - To customize the selection settings of the navigation line.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="navigation" %}
|
||||
|
||||
|
|
@ -29,15 +19,13 @@ Provide two locations latitude and longitude values to `navigationLineSettings`.
|
|||
|
||||
## Enabling the arrows
|
||||
|
||||
You can enable the arrows in the navigation line using [`arrowSettings.showArrow`](../api/maps/arrow) API, also you can customize following properties in arrow
|
||||
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.
|
||||
|
||||
* color - Specifies the color of the arrow
|
||||
* offset - Specifies the arrow's offset position
|
||||
* position - Specifies the arrow position to `start` or `end` line
|
||||
* size - Specifies the arrow size in pixel
|
||||
* [`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.
|
||||
* [`position`](../api/maps/arrowModel/#position) - To customize the position of the arrow in navigation line. The possible values can be **Start** and **End**.
|
||||
* [`size`](../api/maps/arrowModel/#size) - To customize the size of the arrow in pixels.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="arrowSettings" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
Refer the [`API`](../api/maps/navigationLineSettingsModel/) for Navigation Lines feature.
|
||||
{% endtab %}
|
||||
|
|
@ -1,43 +1,98 @@
|
|||
# Populate Data
|
||||
# Populate data
|
||||
|
||||
This section explains how to populate data inputs and provide it to the Maps component.
|
||||
|
||||
## Shape Data
|
||||
## Shape data
|
||||
|
||||
The Shape Data collection describing geographical shape information can be obtained from
|
||||
[GEOJSON format shapes](http://files2.syncfusion.com/dtsupport/uploads/user/uploads/Maps_GeoJSON.zip).
|
||||
The shape data collection describes geographical shape information that can be obtained from
|
||||
[GEOJSON format shapes](http://files2.syncfusion.com/dtsupport/uploads/user/uploads/Maps_GeoJSON.zip). The Map shapes are rendered with this data. The custom shapes such as seat selection in bus, seat selection in a cricket stadium and more useful information can be also added to the geographical data.
|
||||
|
||||
.\ Maps_GeoJSON\All Countries with States
|
||||
## Data source
|
||||
|
||||
You can assign the complete contents in `“WorldMap”` file to new JSON object. For better understanding, a JSON file `“worldMap.json”` is already created to store JSON data in JSON object “world-map”.
|
||||
The [`dataSource`](https://ej2.syncfusion.com/documentation/api/maps/layerSettingsModel/#datasource) property is used to represent statistical data in the Maps component, and it accepts a collection of values as input. For example, a list of objects as input can be provided to the data source. This data source will be used to color the map, display data labels, and display tooltip, among other things.
|
||||
|
||||
## Data Binding
|
||||
The data source is populated with JSON data relative to shape data and stored in JSON object. The USA population as data source is used for better understanding. The **populationData.ts** file is used to store JSON data in JSON object **populationData**.
|
||||
|
||||
The Maps control supports data binding with the `dataSource` property in the shape layers.
|
||||
`[populationData.ts]`
|
||||
|
||||
### Properties
|
||||
```typescript
|
||||
export let populationData: object[] = [
|
||||
{
|
||||
'code': 'AF',
|
||||
'value': 53,
|
||||
'name': 'Afghanistan',
|
||||
'population': 29863010,
|
||||
'density': 119
|
||||
},
|
||||
{
|
||||
'code': 'AL',
|
||||
'value': 117,
|
||||
'name': 'Albania',
|
||||
'population': 3195000,
|
||||
'density': 111
|
||||
},
|
||||
{
|
||||
'code': 'DZ',
|
||||
'value': 15,
|
||||
'name': 'Algeria',
|
||||
'population': 34895000,
|
||||
'density': 15
|
||||
},
|
||||
{
|
||||
'code': 'AO',
|
||||
'value': 15,
|
||||
'name': 'Angola',
|
||||
'population': 18498000,
|
||||
'density': 15
|
||||
},
|
||||
{
|
||||
'code': 'AR',
|
||||
'value': 15,
|
||||
'name': 'Argentina',
|
||||
'population': 40091359,
|
||||
'density': 14
|
||||
},
|
||||
{
|
||||
'code': 'AM',
|
||||
'value': 109,
|
||||
'name': 'Armenia',
|
||||
'population': 3230100,
|
||||
'density': 108
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
The following properties in shape layers is be used for binding data in Maps control,
|
||||
## Data binding
|
||||
|
||||
* dataSource
|
||||
* shapeDataPath
|
||||
* shapePropertyPath
|
||||
The following properties in the [`layers`](../api/maps/layerSettingsModel/) are used for binding data in the Maps component. Both the properties are related to each other.
|
||||
|
||||
## Data Source
|
||||
* shapePropertyPath
|
||||
* shapeDataPath
|
||||
|
||||
The dataSource property accepts the collection values as input. For example, you can provide the list of objects as input.
|
||||
### Shape property path
|
||||
|
||||
## Shape Data Path
|
||||
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.
|
||||
|
||||
The `shapeDataPath` property is used to refer the data ID in DataSource. For example, population MapData contains data ids ‘Name’ and ‘Population’. The `shapeDataPath` and the `shapePropertyPath` properties are related to each other (refer to `shapePropertyPath` for more details).
|
||||
> `world-map.js` file contains following data and its field **"name"** value is used to map the corresponding shape with the provided data source.
|
||||
|
||||
## Shape Property Path
|
||||
```javascript
|
||||
export var world_map = {
|
||||
"type": "Feature",
|
||||
"properties": {
|
||||
"admin": "Afghanistan",
|
||||
"name": "Afghanistan",
|
||||
"continent": "Asia"
|
||||
},
|
||||
"geometry": { "type": "Polygon", "coordinates": [[[61.21081709172573, ... },
|
||||
...
|
||||
|
||||
The `shapePropertyPath` property is similar to the `shapeDataPath` that refers to the column name in the `data` property of shape layers to identify the shape. When the values of the `shapeDataPath` property in the `dataSource` property and the value of `shapePropertyPath` in the data property match, then the associated object from the `dataSource` is bound to the corresponding shape.
|
||||
```
|
||||
|
||||
The datasource is populated with JSON data relative to shape data and stored in JSON object. The USA population as datasource is used for better understanding.
|
||||
### Shape data path
|
||||
|
||||
Refer both shape data and datasource as illustrated in the following code example.
|
||||
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.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="population-data" %}
|
||||
|
||||
|
|
@ -45,15 +100,15 @@ Refer both shape data and datasource as illustrated in the following code exampl
|
|||
|
||||
## Binding complex data source
|
||||
|
||||
You can bind the data field from data source to the maps in two different ways.
|
||||
To bind the data field from data source to the maps in two different ways.
|
||||
|
||||
1. Bind the field name directly to the properties as [`shapeDataPath`](../api/maps/layerSettings/#shapedatapath), [`colorValuePath`](../api/maps/markerSettings/#colorvaluepath),
|
||||
[`valuePath`](../api/maps/tooltipSettings/#valuepath) and [`shapeValuePath`](../api/maps/markerSettings/#shapevaluepath).
|
||||
1. Bind the field name directly 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).
|
||||
|
||||
2. Bind the field name as `data.field` to the properties as [`shapeDataPath`](../api/maps/layerSettings/#shapedatapath), [`colorValuePath`](../api/maps/markerSettings/#colorvaluepath),
|
||||
[`valuePath`](../api/maps/tooltipSettings/#valuepath) and [`shapeValuePath`](../api/maps/markerSettings/#shapevaluepath).
|
||||
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 code example.
|
||||
Refer complex support for data source as illustrated in the following example.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="complexDataSource" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,50 +1,26 @@
|
|||
# Print and Export
|
||||
---
|
||||
title: " Print And Export in EJ2 Maps control | Syncfusion "
|
||||
|
||||
component: "Maps"
|
||||
|
||||
description: "Learn here all about Print And Export feature of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
# Print and Export in EJ2 Maps control
|
||||
|
||||
## Print
|
||||
|
||||
To use the print functionality, we should set the [`allowPrint`](../api/maps/#allowprint) property to **true**. The rendered map can be printed directly from the browser by calling the method [`print`](../api/maps/#print).
|
||||
The rendered Maps can be printed directly from the browser by calling the [`print`](../api/maps/#print) method. To use the print functionality in Maps, set the [`allowPrint`](../api/maps/#allowprint) property to **true**.
|
||||
|
||||
{% tab template="maps/print", sourceFiles="index.ts,index.html", es5Template="print" %}
|
||||
|
||||
```typescript
|
||||
|
||||
import { Maps, MapsTooltip, DataLabel, Print} from '@syncfusion/ej2-maps';
|
||||
import { usa_map } from '../default-map-cs1/usa.ts';
|
||||
Maps.Inject(MapsTooltip, DataLabel, Print);
|
||||
let maps: Maps = new Maps({
|
||||
allowPrint: true,
|
||||
layers: [
|
||||
{
|
||||
dataLabelSettings: {
|
||||
visible: true,
|
||||
labelPath: 'name',
|
||||
smartLabelMode: 'Trim'
|
||||
},
|
||||
shapeData: usa_map,
|
||||
shapeSettings: {
|
||||
autofill: true
|
||||
},
|
||||
tooltipSettings: {
|
||||
visible: true,
|
||||
valuePath: 'name'
|
||||
},
|
||||
}
|
||||
]
|
||||
});
|
||||
maps.appendTo('#element');
|
||||
document.getElementById('print').onclick = () => {
|
||||
maps.print();
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Export
|
||||
|
||||
### Image Export
|
||||
|
||||
To use the image export functionality, we should set the [`allowImageExport`](../api/maps/#allowimageexport) property to **true**. The rendered map can be exported as an image using the [`export`](../api/maps/#export) method. The method requires two parameters: image type and file name. The map can be exported as an image in the following formats.
|
||||
To use the image export functionality, set the [`allowImageExport`](../api/maps/#allowimageexport) property to **true**. The rendered Maps can be exported as an image using the [`export`](../api/maps/#export) method. The method requires two parameters: image type and file name. The Maps can be exported as an image in the following formats.
|
||||
|
||||
* JPEG
|
||||
* PNG
|
||||
|
|
@ -52,131 +28,31 @@ To use the image export functionality, we should set the [`allowImageExport`](..
|
|||
|
||||
{% tab template="maps/export", sourceFiles="index.ts,index.html", es5Template="export" %}
|
||||
|
||||
```typescript
|
||||
|
||||
import { Maps, MapsTooltip, DataLabel, ImageExport} from '@syncfusion/ej2-maps';
|
||||
import { usa_map } from '../default-map-cs1/usa.ts';
|
||||
Maps.Inject(MapsTooltip, DataLabel, ImageExport );
|
||||
|
||||
let maps: Maps = new Maps({
|
||||
allowImageExport: true,
|
||||
layers: [
|
||||
{
|
||||
dataLabelSettings: {
|
||||
visible: true,
|
||||
labelPath: 'name',
|
||||
smartLabelMode: 'Trim'
|
||||
},
|
||||
shapeData: usa_map,
|
||||
shapeSettings: {
|
||||
autofill: true
|
||||
},
|
||||
tooltipSettings: {
|
||||
visible: true,
|
||||
valuePath: 'name'
|
||||
},
|
||||
}
|
||||
]
|
||||
});
|
||||
maps.appendTo('#element');
|
||||
document.getElementById('export').onclick = () => {
|
||||
maps.export('PNG', 'Maps');
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
We can get the image file as base64 string for the JPEG and PNG formats. The rendered map can be exported to image as a base64 string using the [`export`](../api/maps/#export) method. There are four parameters required: image type, file name, orientation of the exported PDF document which must be set as **null** for image export and finally **allowDownload** which should be set as **false** to return base64 string.
|
||||
### Exporting Maps as base 64 string of the file
|
||||
|
||||
The image can be exported as base64 string for the JPEG and PNG formats. The rendered Maps can be exported to image as a base64 string using the [`export`](../api/maps/#export) method. There are four parameters required: image type, file name, orientation of the exported PDF document which must be set as **null** for image export and finally **allowDownload** which should be set as **false** to return base64 string.
|
||||
|
||||
{% tab template="maps/export", sourceFiles="index.ts,index.html", es5Template="base64" %}
|
||||
|
||||
```typescript
|
||||
|
||||
import { Maps, MapsTooltip, DataLabel, ImageExport} from '@syncfusion/ej2-maps';
|
||||
import { usa_map } from '../default-map-cs1/usa.ts';
|
||||
Maps.Inject(MapsTooltip, DataLabel, ImageExport);
|
||||
|
||||
let maps: Maps = new Maps({
|
||||
allowImageExport: true,
|
||||
layers: [
|
||||
{
|
||||
dataLabelSettings: {
|
||||
visible: true,
|
||||
labelPath: 'name',
|
||||
smartLabelMode: 'Trim'
|
||||
},
|
||||
shapeData: usa_map,
|
||||
shapeSettings: {
|
||||
autofill: true
|
||||
},
|
||||
tooltipSettings: {
|
||||
visible: true,
|
||||
valuePath: 'name'
|
||||
},
|
||||
}
|
||||
]
|
||||
});
|
||||
maps.appendTo('#element');
|
||||
document.getElementById('export').onclick = () => {
|
||||
maps.export('JPEG', 'Maps', null, false).then((data) => {
|
||||
let base64 = data;
|
||||
document.writeln(base64);
|
||||
});
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### PDF Export
|
||||
|
||||
To use the PDF export functionality, we should set the [`allowPdfExport`](../api/maps/#allowpdfexport) property to **true**. The rendered map 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" %}
|
||||
|
||||
```typescript
|
||||
|
||||
import { Maps, MapsTooltip, DataLabel, PdfExport} from '@syncfusion/ej2-maps';
|
||||
import { usa_map } from '../default-map-cs1/usa.ts';
|
||||
Maps.Inject(MapsTooltip, DataLabel, PdfExport);
|
||||
|
||||
let maps: Maps = new Maps({
|
||||
allowPdfExport: true,
|
||||
layers: [
|
||||
{
|
||||
dataLabelSettings: {
|
||||
visible: true,
|
||||
labelPath: 'name',
|
||||
smartLabelMode: 'Trim'
|
||||
},
|
||||
shapeData: usa_map,
|
||||
shapeSettings: {
|
||||
autofill: true
|
||||
},
|
||||
tooltipSettings: {
|
||||
visible: true,
|
||||
valuePath: 'name'
|
||||
},
|
||||
}
|
||||
]
|
||||
});
|
||||
maps.appendTo('#element');
|
||||
document.getElementById('export').onclick = () => {
|
||||
maps.export('PDF', 'Maps', 0);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
>Note: The exporting of the map as base64 string is not supported in the PDF export.
|
||||
> Note: The exporting of the Maps as base64 string is not supported for the PDF export.
|
||||
|
||||
<!-- markdownlint-disable MD010 -->
|
||||
|
||||
### Export the tile maps
|
||||
### Export the tile Maps
|
||||
|
||||
The rendered map with providers such as OSM, Bing and Google static maps can be exported using the [`export`](../api/maps/#export) method. It supports the following export formats.
|
||||
The rendered Maps with providers such as OSM, Bing and Google static Maps can be exported using the [`export`](../api/maps/#export) method. It supports the following export formats.
|
||||
|
||||
* JPEG
|
||||
* PNG
|
||||
|
|
@ -184,31 +60,4 @@ The rendered map with providers such as OSM, Bing and Google static maps can be
|
|||
|
||||
{% tab template="maps/OSMPrintExport", sourceFiles="index.ts,index.html", es5Template="OSMPrintExport" %}
|
||||
|
||||
```typescript
|
||||
|
||||
import { Maps, Print, ImageExport, PdfExport} from '@syncfusion/ej2-maps';
|
||||
Maps.Inject(Print, ImageExport, PdfExport);
|
||||
let maps: Maps = new Maps({
|
||||
allowPdfExport: true,
|
||||
allowImageExport: true,
|
||||
allowPrint: true,
|
||||
titleSettings: {
|
||||
text: 'OSM'
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
layerType: 'OSM'
|
||||
}
|
||||
]
|
||||
});
|
||||
maps.appendTo('#container');
|
||||
document.getElementById('export').onclick = () => {
|
||||
maps.export('PNG', 'Maps');
|
||||
};
|
||||
document.getElementById('print').onclick = () => {
|
||||
maps.print();
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
|
@ -1,19 +1,25 @@
|
|||
# Bing Maps
|
||||
---
|
||||
title: " Bing Maps in EJ2 Maps control | Syncfusion "
|
||||
|
||||
Bing maps is a map of the entire World owned by Microsoft. As link OSM, it provides map title images based on our requests and combines those images into a single one to display the map area.
|
||||
component: "Maps"
|
||||
|
||||
## Add Bing Maps
|
||||
description: "Learn here all about Bing Maps of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
One of the most important features in Blazor Maps Component is the built-in online map provider support. By using this feature, you can render Bing maps in the maps component. This provides the ability to visualize satellite, aerial and street maps without using any external shape files.
|
||||
# Bing Maps in EJ2 Maps control
|
||||
|
||||
you can enable this feature by setting `layerType` to `bing`.
|
||||
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.
|
||||
|
||||
## 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).
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
layers: [{
|
||||
layerType: 'Bing',
|
||||
bingMapType: 'AerialWithLabel',
|
||||
key: '// …bingMapKey'
|
||||
key: '' // Add Bing map key here
|
||||
}]
|
||||
});
|
||||
map.appendTo('container');
|
||||
|
|
@ -23,6 +29,8 @@ map.appendTo('container');
|
|||
|
||||
## Types of Bing maps
|
||||
|
||||
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.
|
||||
|
|
@ -44,7 +52,7 @@ var map = new ej.maps.Maps({
|
|||
layers: [{
|
||||
layerType: 'Bing',
|
||||
bingMapType: 'CanvasLight',
|
||||
key: '// …bingMapKey'
|
||||
key: '' // Add Bing map key here
|
||||
}]
|
||||
});
|
||||
map.appendTo('container');
|
||||
|
|
@ -54,7 +62,7 @@ map.appendTo('container');
|
|||
|
||||
## Zooming and panning
|
||||
|
||||
You can zoom and pan the Bing maps layer. Zooming helps you get a closer look at a particular area on a map for in-depth analysis. Panning helps you 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 map for in-depth analysis. Panning helps to move a map around to focus the targeted area.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -64,7 +72,7 @@ var map = new ej.maps.Maps({
|
|||
},
|
||||
layers: [{
|
||||
layerType: 'Bing',
|
||||
key: '// …bingMapKey'
|
||||
key: '' // Add Bing map key here
|
||||
}]
|
||||
});
|
||||
map.appendTo('container');
|
||||
|
|
@ -74,7 +82,7 @@ map.appendTo('container');
|
|||
|
||||
## 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` property. You can add navigation lines on top of an Bing maps layer for highlighting a path among various places by setting the corresponding locations's coordinates of latitude and longitude in the `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) 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.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -88,7 +96,7 @@ var map = new ej.maps.Maps({
|
|||
layers: [{
|
||||
layerType: 'Bing',
|
||||
bingMapType: 'CanvasLight',
|
||||
key: '// …bingMapKey',
|
||||
key: '', // Add Bing map key here
|
||||
markerSettings: [{
|
||||
visible: true,
|
||||
height: 25,
|
||||
|
|
@ -124,8 +132,4 @@ map.appendTo('container');
|
|||
|
||||
## Sublayer
|
||||
|
||||
You can render any GeoJSON shape as a sublayer on top of an Bing maps layer for highlighting a particular continent or country in Bing maps by adding another layer and specifying the type to SubLayer.
|
||||
|
||||
## Key
|
||||
|
||||
The Bing maps key is provided as input to this key property. The Bing Maps key can be obtained from [Bing Maps](http://www.microsoft.com/maps/create-a-bing-maps-key.aspx).
|
||||
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,20 +1,30 @@
|
|||
# OpenStreetMap
|
||||
---
|
||||
title: " Open Street Maps in EJ2 Maps control | Syncfusion "
|
||||
|
||||
The OpenStreetMap (OSM) is the world map built by a community of developers; it is free to use under an open license. It allows you to view geographical data in a collaborative way from anywhere on the earth. The OSM map provides small tile images to display the map area in the Maps component.
|
||||
component: "Maps"
|
||||
|
||||
## Add OpenStreetMap
|
||||
description: "Learn here all about Open Street Maps of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
One of the most important features in EJ2 Maps component is the built-in online map provider support. By using this feature, you can render OpenStreetMap in the maps component. This provides the ability to visualize street map tiles without using any external shape files.
|
||||
# Open Street Maps in EJ2 Maps control
|
||||
|
||||
You can enable this feature by setting the value of `layerType` property to `OSM`
|
||||
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.
|
||||
|
||||
## Adding OpenStreetMap
|
||||
|
||||
The OSM map can be rendered using by setting the [`layerType`](../api/maps/layerSettingsModel/#layertype) property value as "**OSM**".
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="OSM" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### Changing the tile server of the OpenStreetMap
|
||||
|
||||
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
|
||||
|
||||
You can zoom and pan the OSM maps layer. Zooming helps you get a closer look at a particular area on a map for in-depth analysis. Panning helps you 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 map for in-depth analysis. Panning helps to move a map around to focus the targeted area.
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="OSMZoom" %}
|
||||
|
||||
|
|
@ -22,7 +32,7 @@ You can zoom and pan the OSM maps layer. Zooming helps you get a closer look at
|
|||
|
||||
## 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` property. You can add navigation lines 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` 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) 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.
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="OSMMarkers" %}
|
||||
|
||||
|
|
@ -30,7 +40,7 @@ Markers can be added to the layers of OSM maps by setting the corresponding loca
|
|||
|
||||
## Sublayer
|
||||
|
||||
You can render any GeoJSON shape as a sublayer on top of an OSM maps layer for highlighting a particular continent or country in OSM maps by adding another layer and specifying the type 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,6 +1,14 @@
|
|||
# Other map providers
|
||||
---
|
||||
title: " Other Map Providers in EJ2 Maps control | Syncfusion "
|
||||
|
||||
Apart from the OpenStreetMap and Bing Maps, you can also render the maps from other map service provided by specifying `layerType` as `OSM` and the URL generated by map provider in the `URLTemplate` property. Here, Google maps is rendered. This provides customizable maps with your own content and imagery.
|
||||
component: "Maps"
|
||||
|
||||
description: "Learn here all about Other Map Providers of Syncfusion EJ2 Maps control and more."
|
||||
---
|
||||
|
||||
# Other map 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.
|
||||
|
||||
Refer to [Google maps licensing](https://developers.google.com/maps/terms#10-license-restrictions).
|
||||
|
||||
|
|
@ -10,7 +18,7 @@ Refer to [Google maps licensing](https://developers.google.com/maps/terms#10-lic
|
|||
|
||||
## Zooming and panning
|
||||
|
||||
You can zoom and pan the Google maps layer. Zooming helps you get a closer look at a particular area on a map for in-depth analysis. Panning helps you 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" %}
|
||||
|
||||
|
|
@ -18,7 +26,7 @@ You can zoom and pan the Google maps layer. Zooming helps you get a closer look
|
|||
|
||||
## Adding markers and navigation line
|
||||
|
||||
Markers can be added to the layers of Google maps by setting the corresponding location's coordinates of latitude and longitude using `markerSettings` property. You can add navigation lines on top of an Google maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the `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) 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.
|
||||
|
||||
{% tab template= "maps/Providers", es5Template="es5OSMMarkers" %}
|
||||
|
||||
|
|
@ -26,7 +34,7 @@ Markers can be added to the layers of Google maps by setting the corresponding l
|
|||
|
||||
## Sublayer
|
||||
|
||||
You can render any GeoJSON shape as a sublayer on top of an Google maps layer for highlighting a particular continent or country in Google maps by adding another layer and specifying the type 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" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@
|
|||
* [Localization](maps/localization.md)
|
||||
* [Migration from Essential JS 1](maps/ej1-api-migration.md)
|
||||
* [Annotation](maps/how-to/annotation.md)
|
||||
* [Bing Map](maps/how-to/bing-map.md)
|
||||
* [Display geometry shape over Bing maps](maps/how-to/bing-map.md)
|
||||
* [Custom path](maps/how-to/custom-path.md)
|
||||
* [Drilldown](maps/how-to/drilldown.md)
|
||||
* [Marker Type](maps/how-to/marker-type.md)
|
||||
* [Marker Types](maps/how-to/marker-type.md)
|
||||
* [Multilayer](maps/how-to/multiple-layer.md)
|
||||
* [Navigation Line](maps/how-to/navigation-line.md)
|
||||
* [Navigating to particular country](maps/how-to/navigation-line.md)
|
||||
* [Zooming](maps/how-to/zooming.md)
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
# User Interactions
|
||||
|
||||
Options like zooming, panning, single click and double click, highlight and map selection enables the effective interaction on Map elements.
|
||||
Zooming, panning, single and double click, highlight and selection are all options that allow for effective interaction with Map elements.
|
||||
|
||||
## Zooming
|
||||
|
||||
The zooming feature enables you to zoom in and out the Map to show in-depth information. It is controlled by the `zoomFactor` property of the `zoomSettings` of the map. When the zoomFactor is increased, the Map is zoomed in. When the zoomFactor is decreased, then the Map is zoomed out.
|
||||
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.
|
||||
|
||||
### Enable Zooming
|
||||
|
||||
To enable the zooming feature, set the `zoomSettings.enable` as true in maps.
|
||||
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.
|
||||
|
||||
<!-- markdownlint-disable MD010 -->
|
||||
|
||||
### Enable panning
|
||||
|
||||
To enable the panning feature, set the [`enablePanning`](../api/maps/zoomSettings/#enablepanning) property of [`zoomSettings`](../api/maps/zoomSettings) to **true**.
|
||||
To enable the panning feature, set the [`enablePanning`](../api/maps/zoomSettingsModel/#enablepanning) property of [`zoomSettings`](../api/maps/zoomSettingsModel) to **true**.
|
||||
|
||||
```typescript
|
||||
|
||||
|
|
@ -37,15 +37,25 @@ Zooming can be performed in following types:
|
|||
|
||||
<b>Zooming toolbar</b>
|
||||
|
||||
By default, the toolbar is rendered with `zoom-in`, `zoom-out`, and `reset` options when it is set to 'true' in the `enable` property of `zoomSettings`. You can also customize the toolbar items using the `toolBArs` property in `zoomSettings`.
|
||||
By default, the toolbar is rendered with **zoom-in**, **zoom-out**, and **reset** options when it is set to **true** in the [`enable`](../api/maps/zoomSettingsModel/#enable) property of [`zoomSettings`](../api/maps/zoomSettingsModel/).
|
||||
|
||||
The following options are available in toolbar, and you can use the options as needed:
|
||||
The following options are available in toolbar.
|
||||
|
||||
1. Zoom - Provides rectangular zoom support.
|
||||
2. ZoomIn - Zooms in the maps.
|
||||
3. ZoomOut - Zooms out the maps.
|
||||
2. ZoomIn - Zooms in the Maps.
|
||||
3. ZoomOut - Zooms out the Maps.
|
||||
4. Pan - Switches to panning if rectangular zoom is activated.
|
||||
5. Reset - Restores the maps to the default view.
|
||||
5. Reset - Restores the Maps to the default view.
|
||||
|
||||
The following properties are available in toolbars to customize the zooming toolbars.
|
||||
|
||||
* [`color`](../api/maps/zoomSettingsModel/#color) - To apply the color for toolbars in Maps.
|
||||
* [`highlightColor`](../api/maps/zoomSettingsModel/#highlightcolor) - To apply the color for the zooming toolbar when the mouse has hovered on the toolbar element in Maps.
|
||||
* [`horizontalAlignment`](../api/maps/zoomSettingsModel/#horizontalalignment) - To customize the position type of toolbar when it is placed horizontally.
|
||||
* [`selectionColor`](../api/maps/zoomSettingsModel/#selectioncolor) - To apply the color for the zooming toolbar when clicking the zooming toolbar in Maps.
|
||||
* [`toolBarOrientation`](../api/maps/zoomSettingsModel/#toolbarorientation) - To customize the orientation of the zooming toolbar.
|
||||
* [`toolbars`](../api/maps/zoomSettingsModel/#toolbars) - To customize the items that are to be shown in the zooming toolbar in Maps.
|
||||
* [`verticalAlignment`](../api/maps/zoomSettingsModel/#verticalalignment) - To customize the position type of toolbar when it is placed vertically.
|
||||
|
||||
Refer the [`API`](../api/maps/zoomSettingsModel) links for Zooming.
|
||||
|
||||
|
|
@ -62,9 +72,9 @@ var map = new ej.maps.Maps({
|
|||
map.appendTo('#element');
|
||||
```
|
||||
|
||||
<b>Pinch Zooming</b>
|
||||
<b>Pinch zooming</b>
|
||||
|
||||
Use the `pinchZooming` property in `zoomSettings` to enable or disable the pinch zooming.
|
||||
To enable or disable the pinch zooming, use the [`pinchZooming`](../api/maps/zoomSettingsModel/#pinchzooming) property in [`zoomSettings`](../api/maps/zoomSettingsModel) property.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -81,7 +91,7 @@ map.appendTo('#element');
|
|||
|
||||
<b>Single-click zooming</b>
|
||||
|
||||
Use the `zoomOnClick` property in `zoomSettings` to enable or disable the single-click zooming
|
||||
To enable or disable the single-click zooming, use the [`zoomOnClick`](../api/maps/zoomSettingsModel/#zoomonclick) property in [`zoomSettings`](../api/maps/zoomSettingsModel) property.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -98,7 +108,7 @@ map.appendTo('#element');
|
|||
|
||||
<b>Double-click zooming</b>
|
||||
|
||||
Use the `doubleClickZoom` property in `zoomSettings` to enable or disable the double-click zooming.
|
||||
To enable or disable the double-click zooming, use the [`doubleClickZoom`](../api/maps/zoomSettingsModel/#doubleclickzoom) property in [`zoomSettings`](../api/maps/zoomSettingsModel/) property.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -115,7 +125,7 @@ map.appendTo('#element');
|
|||
|
||||
<b>Mouse wheel zooming</b>
|
||||
|
||||
Use the `mouseWheelZoom` property in `zoomSettings` to enable or disable mouse wheel zooming.
|
||||
To enable or disable mouse wheel zooming, use the [`mouseWheelZoom`](../api/maps/zoomSettingsModel/#mousewheelzoom) property in [`zoomSettings`](../api/maps/zoomSettingsModel/) property.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -130,9 +140,27 @@ var map = new ej.maps.Maps({
|
|||
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.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
zoomSettings: {
|
||||
enable: true,
|
||||
minZoom: 2,
|
||||
maxZoom: 12
|
||||
},
|
||||
layers: [{
|
||||
shapeData: usmap,
|
||||
}]
|
||||
});
|
||||
map.appendTo('#element');
|
||||
```
|
||||
|
||||
### Zooming with animation
|
||||
|
||||
You can use the `animationDuration` property in `layers` property to zoom in or zoom out the maps 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.
|
||||
|
||||
```typescript
|
||||
var map = new ej.maps.Maps({
|
||||
|
|
@ -141,7 +169,7 @@ var map = new ej.maps.Maps({
|
|||
},
|
||||
layers: [{
|
||||
shapeData: usmap,
|
||||
animationDuration: true
|
||||
animationDuration: 500
|
||||
}]
|
||||
});
|
||||
map.appendTo('#element');
|
||||
|
|
@ -149,31 +177,47 @@ map.appendTo('#element');
|
|||
|
||||
## Selection
|
||||
|
||||
Each shape in the Map can be selected and deselected during interaction with the shapes.
|
||||
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**.
|
||||
|
||||
By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa.
|
||||
The following properties are available to customize the selection of Map elements such as shapes, bubbles, markers and legends.
|
||||
|
||||
The layer `selectionSettings.fill` property is used to change the selected layer shape color. The `selectionSettings.border.color` and `selectionSettings.border.width` properties are used to customize the selected shape border.
|
||||
|
||||
You can select the shape by tapping the shape. The Single selection is enabled by the `selectionSettings.enable` property of shape layer. When `selectionSettings.enable` is set to false, the shapes cannot be selected.
|
||||
|
||||
Refer the [`API`](../api/maps/selectionSettingsModel) and code snippet for Selection.
|
||||
* [`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.
|
||||
* [`opacity`](../api/maps/selectionSettingsModel/#opacity) - To customize the transparency for the element that is selected.
|
||||
* [`enableMultiSelect`](../api/maps/selectionSettingsModel/#enablemultiselect) - To enable or disable the selection for multiple shapes or markers or bubbles in the Maps.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="selection" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Public method for the shape selection
|
||||
### Enable selection for bubbles
|
||||
|
||||
Each shape in the map can be selected by calling the `shapeSelection` method. Input parameters for this method are layerIndex, propertyName, country name and selected value as in boolean state(true / false).
|
||||
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**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="bubble-selection" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### 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**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="marker-selection" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### Public method for the shape selection
|
||||
|
||||
The [`shapeSelection`](../api/maps/#shapeselection) method can be used to select each shape in the Maps.
|
||||
LayerIndex, propertyName, country name, and selected value as a boolean state(true / false) are the input parameters for this method.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="shapeSelectionMethod" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Initial shape selection
|
||||
### Initial shape selection
|
||||
|
||||
Initially, the shape can be selected by using the property `initialShapeSelection` and the values are mapped to the `shapePath` and `shapeValue`.
|
||||
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.
|
||||
|
||||
|
|
@ -181,37 +225,75 @@ Initially, the shape can be selected by using the property `initialShapeSelectio
|
|||
|
||||
{% endtab %}
|
||||
|
||||
### Initial marker selection
|
||||
|
||||
Using the [`initialMarkerSelection`](../api/maps/initialMarkerSelectionSettingsModel) property, the marker shape can be selected initially. Markers render based on the [`latitude`](../api/maps/initialMarkerSelectionSettingsModel/#latitude) and [`longitude`](../api/maps/initialMarkerSelectionSettingsModel/#longitude) values.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="initial-marker-selection" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Highlight
|
||||
|
||||
Each shape in the Map can be highlighted during mouse over on the shapes.
|
||||
Each shape in the Map can be highlighted during mouse hover on the Map elements such as shapes, bubbles, markers and legends. Highlight is enabled by setting the [`enable`](../api/maps/highlightSettingsModel/#enable) property of [`highlightSettings`](../api/maps/highlightSettingsModel) to **true**.
|
||||
|
||||
The following properties are available to customize the highlight of Map elements such as shapes, bubbles, markers and legends.
|
||||
|
||||
* [`border`](../api/maps/highlightSettingsModel/#border) - To customize the color, width and opacity of the border of which element is highlighted in Maps.
|
||||
* [`fill`](../api/maps/highlightSettingsModel/#fill) - Applies the color for the element that is highlighted.
|
||||
* [`opacity`](../api/maps/highlightSettingsModel/#opacity) - To customize the transparency for the element that is highlighted.
|
||||
|
||||
Hovering on the specific legend, the shapes which are bounded to the selected legend is also highlighted and vice versa.
|
||||
|
||||
The layer `highlightSettings.fill` property is used to change the highlighted layer shape color. The `highlightSettings.border.color` and `highlightSettings.border.width` properties are used to customize the highlighted shape border.
|
||||
|
||||
You can highlight the shape by mouse over on the shape. The highlight is enabled by the `highlightSettings.enable` property of shape layer. When `highlightSettings.enable` is set to false, the shapes cannot be highlighted.
|
||||
|
||||
Refer the [`API`](../api/maps/highlightSettingsModel) and code snippet for Highlight.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="highlight" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### 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**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="bubble-highlight" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### 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**.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="marker-highlight" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Tooltip
|
||||
|
||||
Tooltip used to get more information about layer or bubble or marker on mouse over or touch end event performing on that.Tooltip can be enabled separately for layer or bubble or marker by using `tooltipSettings.visible` as **true**. Tooltip `valuePath` value need to set to display dataSource which field as tooltip text.
|
||||
Below code snippet illustrate the tooltip enabled for layer to show shape data name field.
|
||||
|
||||
Refer the [`API`](../api/maps/tooltipSettingsModel) for Tooltip feature.
|
||||
|
||||
**Step: 1** Import the usmap geo json data from already created WorldMap.ts file and assign to `shapeData`.
|
||||
|
||||
**Step: 2** Enable tooltip for layer using `tooltipSettings.visible` as true and bind `valuePath` value as 'name'.
|
||||
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" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### Customization
|
||||
|
||||
The following properties are available in the [`tooltipSettings`](../api/maps/tooltipSettingsModel/) property 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.
|
||||
* [`format`](../api/maps/tooltipSettingsModel/#format) - To customize the format of the tooltip in layers, markers, and bubbles of Maps
|
||||
* [`textStyle`](../api/maps/tooltipSettingsModel/#textstyle) - To customize the style of the text in the tooltip for layers, markers, and bubbles of Maps.
|
||||
|
||||
{% tab template= "maps/default-map", es5Template="tooltip-customization" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### 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.
|
||||
|
||||
{% tab template= "maps/tooltip-template", es5Template="tooltipTemplate" %}
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## See Also
|
||||
|
||||
* [Center position zooming](../maps/how-to/zooming)
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче