User Interaction

29 Nov 20179 minutes to read

Options like zooming, panning and map selection enable the effective interaction on Map elements.

Map Selection

Each shape in the Map can be selected and deselected during interaction with shapes.

The selection-color property is used to get or set the selected shape color. The selection-stroke and selection-stroke-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 enable-selection property of shape layer. When enable-selection is set to false, the shapes cannot be selected.

CSHTML

<ej-map id="maps">
<e-layers >
<e-layer  shape-data-path="mapData" enable-selection="true">
<e-shape-settings auto-fill="false"  selection-color="#BC5353"
stroke="white" selection-stroke="white" fill="#9CBF4E"
selection-stroke-width="2" value-path="population">
</e-shape-settings>
</e-layer>
</e-layers>
</ej-map>

MultiSelection

This feature enables you to select multiple Map shapes on mouse taps accompanied by “Ctrl” key press. For this feature to get enabled, set the property selection-mode as “multiple” along with enable-selection property.

<ej-map id="maps">
<e-layers >
<e-layer  shape-data-path="mapData" enable-selection="true" selection-mode="multiple">
</e-layer>
</e-layers>
</ej-map>

Dragging On Selection

This feature enables you to select the shapes by dragging over the shapes. While dragging over the shapes, a rectangle is generated and the shapes that come within the rectangle is selected.

You can enable this feature by setting the property dragging-on-selection in the e-layers to “True”.

<ej-map id="maps"  dragging-on-selection="true">
</ej-map>

Zooming

The zooming feature enables you to zoom in and out of the Map to show in-depth information. It is controlled by the Level property of the Map. When the zoom level of the Map control is increased, the Map is zoomed in. When the zoom level is decreased, then the Map is zoomed out.

Properties

The following properties are related to the zooming feature of the Maps control:

Level
EnableZoom
MinValue
MaxValue

Level

The e-level property determines the Map’s scale size when zooming. The default value of Level is 1.

NOTE

The level cannot be less than 1.

EnableZoom

The enable-zoom property enables or disables the zooming feature.

MinValue

The min-value property is used to set the minimum zoom level of the Map.

MaxValue

The max-value property is used to set the maximum zoom level of the Map.

CSHTML

<ej-map id="maps" >
 <e-zoom-settings enable-zoom="true" max-value="20" min-value="1"></e-zoom-settings>
</ej-map>

Additional Options to Zoom the Map

Maps can be zoomed by using the following options also,

Zoom method.
Mouse scroll.
Mouse double tap.
Shape selection
Position

By using Zoom method

You can zoom the Maps by using Zoom method. The Zoom method contains parameter zoom value. The Map can be zoomed or scaled based on zoom value parameter.

CSHTML

$("#map").ejMap("zoom", 2);

By using mouse scroll

You can zoom the Map with mouse events by using mouse scroll. When the mouse is scrolled up, the Map is zoomed in and when the mouse is scrolled down, the Map is zoomed out.

By using mouse double tap

When the map is double-tapped by using mouse, the zoom in operation is performed.

By using Shape Selection

Map shape is zoomed to the whole map area on the shape selected. Animation can be applied for that zooming with the enable-animation property as true.

You can enable this feature by setting enable-zoom-on-selection property value as ‘True’.

When enable-zoom-on-selection property is set to true, then zooming of the Map control is muted on double click.

CSHTML

<ej-map id="maps" >
 <e-zoom-settings enable-zoom-on-selection="true"></e-zoom-settings>
</ej-map>

Positioning

Depending on the latitude and longitude, you can zoom the Map to the exact position. All locations are considered as latitude and longitude values and the exact location is considered as Map coordinates.

The NavigateTo is a method defined that allows you to zoom the Map control to the given location. This method contains three attributes as follows.

Attribute Table

Attribute	Type	Description
Latitude	Double	Latitude point of the position
Longitude	Double	Longitude point of the position
Level	Double	Zoom level of the map

<script type="text/javascript">

		function buttonClick()
		{

	 		$("#map").ejMap("navigateTo", 13, 80, 5);

		}

	</script>

Panning

The panning feature enables the Map navigation. The enable-pan property is used to enable or disable the panning support.

CSHTML

<ej-map id="maps"  enable-pan="true">
</ej-map>

Factor

Specifies the zoom factor for map zoom value, you can use factor property.

HTML

<ej-map id="mapcontrol" factor=''>
</ej-map>

Navigation control is built-in with Maps control. With Navigation control, Maps can be panned in any direction and zoomed. It is possible to show or hide the NavigationControl by enable-navigation property.

CSHTML

<ej-map id="maps" >
<e-navigation-control enable-navigation="true"></e-navigation-control>
</ej-map>

With Navigation control, the Maps can be zoomed. When you click the ZoomIn button, the Map is zoomed in and when you click the ZoomOut button, the Map is zoomed out.

Maps can be panned with Pan buttons (TopPan button, RightPan button, BottomPan button, and LeftPan button). When you click a particular Pan button, the Map is panned on the respective directions.

The Navigation control can be positioned in two ways.

Absolute Position
Dock Position

Absolute Position

Based on the margin values of X and Y-axes, the navigation control can be positioned with the help of the X and Y properties available in absolute-position. For positioning the navigation control based on margins corresponding to a Map, dock-position value is set as ‘None’.

Dock Position

The navigation control can be positioned in following locations within the container.

TopLeft
TopCenter
TopRight
CenterLeft
Center
CenterRight
BottomLeft
BottomRight
BottomCenter
BottomRight
None

You can set this option by using the dock-position property in NavigationControl.

CSHTML

<ej-map id="maps" >
<e-navigation-control enable-navigation="true" orientation="@Orientation.Vertical" 
dock-position="@DockPosition.None">
<e-absolute-position  x="05" y="10" >                          
</e-absolute-position>
</e-navigation-control>
</ej-map>

Orientation

Set the orientation value for navigation control.

HTML

<ej-map id="maps" >
<e-navigation-control enable-navigation="true" orientation="@Orientation.Vertical" 
dock-position="@DockPosition.None">
<e-absolute-position  x="05" y="10" >                          
</e-absolute-position>
</e-navigation-control>
</ej-map>

Content

Specifies the navigation control template for map, you can use content property.

HTML

<ej-map id="maps" >
<e-navigation-control enable-navigation="true" content="">
<e-absolute-position  x="05" y="10" >                          
</e-absolute-position>
</e-navigation-control>
</ej-map>

Animation

Animation is enabled or disabled using enable-animationproperty.

HTML

<ej-map id="mapcontrol" enable-animation="true">
</ej-map>

Enable Layer Change Animation

Enables or Disables the animation for layer change in map, you can use enable-layer-change-animation property and the default value is false.

HTML

<li role="presentation" class=""><a data-target="#fxmmj26af0zbmbi1kovtyatoces9srvr-html" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="html">HTML</a></li><div role="tabpanel" class="tab-pane" id="fxmmj26af0zbmbi1kovtyatoces9srvr-html" data-original-lang = "html" ><div class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p">&lt;</span><span class="nt">ej-map</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;mapcontrol&quot;</span> <span class="na">enable-layer-change-animation</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ej-map</span><span class="p">&gt;</span></code></pre></div>
</div>

Responsiveness during browser resize

Map is made responsive when resizing the browser by using is-responsive property.

JAVASCRIPT

<li role="presentation" class=""><a data-target="#ppdoo7bmacd3ef487tri4a3theu131hp-html" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="html">HTML</a></li><div role="tabpanel" class="tab-pane" id="ppdoo7bmacd3ef487tri4a3theu131hp-html" data-original-lang = "html" ><div class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p">&lt;</span><span class="nt">ej-map</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;mapcontrol&quot;</span> <span class="na">is-responsive</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ej-map</span><span class="p">&gt;</span></code></pre></div>
</div>

User Interaction

Map Selection

MultiSelection

Dragging On Selection

Zooming

Properties

Level

EnableZoom

MinValue

MaxValue

Additional Options to Zoom the Map

By using Zoom method

By using mouse scroll

By using mouse double tap

By using Shape Selection

Positioning

Panning

Factor

Navigation Control

Zoom with Navigation Control

Panning with Navigation Control

Navigation Control Positions

Absolute Position

Dock Position

Orientation

Content

Animation

Enable Layer Change Animation

Responsiveness during browser resize