Methods

navigateTo(latitude, longitude, level)

Method for navigating to specific shape based on latitude, longitude and zoom level.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default"></EJ.Map>,
	document.getElementById('map')
);

function MapMethod(){
    var mapObj = $("#default").data("ejMap");
    mapObj.navigateTo();
};

pan(direction)

Method to perform map panning

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default"></EJ.Map>,
	document.getElementById('map')
);

function MapMethod(){
    var mapObj = $("#default").data("ejMap");
    mapObj.pan();
};

refresh()

Method to reload the map.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default"></EJ.Map>,
	document.getElementById('map')
);

function MapMethod(){
    var mapObj = $("#default").data("ejMap");
    mapObj.refresh();
};

refreshLayers()

Method to reload the shapeLayers with updated values

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default"></EJ.Map>,
	document.getElementById('map')
);

function MapMethod(){
    var mapObj = $("#default").data("ejMap");
    mapObj.refreshLayers();
};

refreshNavigationControl(navigation)

Method to reload the navigation control with updated values.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default"></EJ.Map>,
	document.getElementById('map')
);

function MapMethod(){
    var mapObj = $("#default").data("ejMap");
    mapObj.refreshNavigationControl();
};

zoom(level, isAnimate)

Method to perform map zooming.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default"></EJ.Map>,
	document.getElementById('map')
);

function MapMethod(){
    var mapObj = $("#default").data("ejMap");
    mapObj.zoom();
};

Events

markerSelected

Triggered on selecting the map markers.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default" markerSelected = {MarkerSelected}></EJ.Map>,
	document.getElementById('map')
);

function MarkerSelected(){
    // Do Something
};

mouseleave

Triggers while leaving the hovered map shape

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default" mouseleave = {Mouseleave}></EJ.Map>,
	document.getElementById('map')
);

function Mouseleave(){
    // Do Something
};

mouseover

Triggers while hovering the map shape.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default" mouseover = {Mouseover}></EJ.Map>,
	document.getElementById('map')
);

function Mouseover(){
    // Do Something
};

onRenderComplete

Triggers once map render completed.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default" onRenderComplete = {OnRenderComplete}></EJ.Map>,
	document.getElementById('map')
);

function OnRenderComplete(){
    // Do Something
};

panned

Triggers when map panning ends.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default" panned = {Panned}></EJ.Map>,
	document.getElementById('map')
);

function Panned(){
   // Do Something
};

shapeSelected

Triggered on selecting the map shapes.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default" shapeSelected = {ShapeSelected}></EJ.Map>,
	document.getElementById('map')
);

function ShapeSelected(){
    // Do Something
};

zoomedIn

Triggered when map is zoomed-in.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default" zoomedIn = {ZoomedIn}></EJ.Map>,
	document.getElementById('map')
);

function ZoomedIn(){
   // Do Something
};

zoomedOut

Triggers when map is zoomed out.

HTML

<div id="map"></div>

JAVASCRIPT

ReactDOM.render(
    <EJ.Map id="default" zoomedOut = {ZoomedOut}></EJ.Map>,
	document.getElementById('map')
);

function ZoomedOut(){
   // Do Something
};

Copyright © 2001 - 2015 Syncfusion Inc. All Rights Reserved