How-To

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:

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 documentation.

import { usMap } from './MapData/USA';
import * as React from 'react';
import './App.css';
import {
  MapsComponent, LayersDirective, LayerDirective, MarkersDirective,
  MarkerDirective, Inject, Marker
} from '@syncfusion/ej2-react-maps';
class App extends React.Component {
  render() {
    return (
      <MapsComponent id="element">
        <Inject services={[Marker]} />
        <LayersDirective>
          <LayerDirective shapeData={usMap}>
            <MarkersDirective>
              <MarkerDirective visible={true} shape='Circle' fill='white' width={3} animationDuration={0}
                dataSource={[
                  { latitude: 37.0000, longitude: -120.0000, city: 'California' }
                ]}
                border={{ width: 2, color: '#333' }}>
              </MarkerDirective>
            </MarkersDirective>
          </LayerDirective>
        </LayersDirective>
      </MapsComponent>);
  }
}
export default App;

Step 2:

Customize the above option for n number of markers as mentioned in the following code example.

import { usMap } from './MapData/USA';
import * as React from 'react';
import './App.css';
import {
  MapsComponent, LayersDirective, LayerDirective, MarkersDirective,
  MarkerDirective, Inject, Marker
} from '@syncfusion/ej2-react-maps';
//tslint disable
class App extends React.Component {
  render() {
    return (
      <MapsComponent id="element">
        <Inject services={[Marker]} />
        <LayersDirective>
          <LayerDirective shapeData={usMap}>
            <MarkersDirective>
              <MarkerDirective visible={true} shape='Circle' fill='white' width={3} animationDuration={0}
                dataSource={[
                  { latitude: 37.0000, longitude: -120.0000, city: 'California' }
                ]}
                border={
                  { width: 2, color: '#333' }
                  }>
                </MarkerDirective>
              <MarkerDirective visible={true} shape='Rectangle' fill='yellow' width={15} height={4} animationDuration={0}
                dataSource={[
                  { latitude: 40.7127, longitude: -74.0059, city: 'New York' }
                ]}
                border={
                  { width: 2, color: '#333' }
                  }>
                </MarkerDirective>
              <MarkerDirective visible={true} shape='Diamond' fill='white' width={10} height={10} animationDuration={0}
                dataSource={[
                  { latitude: 42, longitude: -93, city: 'Iowa' }
                ]}
                border={
                  { width: 2, color: 'blue' }
                  }>
                </MarkerDirective>
              <MarkerDirective visible={true} shape='Balloon' fill='red' width={10} height={15} animationDuration={0}
                dataSource={[
                  { latitude: 36.499589049395055, longitude: -103.042108197135548, city: 'New Mexico' }
                ]}
                border={
                  { width: 2, color: '#333' }
                  }>
                </MarkerDirective>
              <MarkerDirective visible={true} shape='Triangle' fill='blue' width={10} animationDuration={0}
                dataSource={[
                  { latitude: 36.360624205142919, longitude: -94.595916790727287, city: 'Oklahoma' }
                ]}
                border={
                  { width: 2, color: '#333' }
                  }>
                </MarkerDirective>
            </MarkersDirective>
          </LayerDirective>
        </LayersDirective>
      </MapsComponent>);
  }
}
export default App;

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.

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 documentation.

In annotation, you can import the image in the specified map area by using require function as mentioned in the below code example.

const logo = require('./compass.png');
<img src={logo} height="75px" width="75px"/>

[app.tsx]

import { africa_continent } from './MapData/africa_continent';
import * as React from 'react';
import './App.css';
import {
  MapsComponent, LayersDirective, LayerDirective, Inject,
  Annotations
} from '@syncfusion/ej2-react-maps';
//tslint:disable
const SAMPLE_CSS = `
    .control-fluid {
    padding: 0px !important;
    }
    #annotation {
        color: #DDDDDD;
        font-size: 12px;
        font-family: Roboto;
        background: #3E464C;
        margin: 20px;
        padding: 10px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        width: 300px;
        -moz-box-shadow: 0px 2px 5px #666;
        -webkit-box-shadow: 0px 2px 5px #666;
        box-shadow: 0px 2px 5px #666;
    }`;
const logo = require('./compass.png');
class App extends React.Component {
  render() {
    return (
      <div className='control-pane'>
        <style>
          {SAMPLE_CSS}
        </style>
        <div className='control-section row'>
          <MapsComponent id="element" annotations={[
            {
              content: '#maps-annotation',
              x: '0%', y: '70%'
            }, {
              content: '#compass-maps',
              x: '85%', y: '5%'
            }
          ]} >
            <Inject services={[Annotations]} />
            <LayersDirective>
              <LayerDirective shapeData={africa_continent}>
              </LayerDirective>
            </LayersDirective>
          </MapsComponent>
        </div>
        <svg height="150" width="400">
          <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" style={
                { stopColor: '#C5494B', stopOpacity: '1' }
                } />
              <stop offset="100%" style={
                { stopColor: '#4C134F', stopOpacity: '1' }
                } />
            </linearGradient>
          </defs>
        </svg>
        <div id="maps-annotation" style={
          { display: 'none' }
          }>
          <div id="annotation">
            <div style={
              { marginLeft: '10px', fontsize: '13px', fontweight: 500 }
              }>
              <h5 style={
                { marginLeft: '40px' }
                }>Facts about Africa</h5>
            </div>
            <hr />
            <div>
              <ul style={
                { listStyleType: 'disc' }
                }>
                <li>Africa is the second largest and second most populated continent in the world.</li>
                <li style={
                  { paddingtop: '5px' }
                  }>Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                <li style={
                  { paddingtop: '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={logo} height="75px" width="75px" />
        </div>
      </div>);
  }
}
export default App;

Adding Multiple Layers in the Map

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 documentation.

import { usMap } from './MapData/USA';
import { California } from './MapData/California';
import { Texas } from './MapData/Texas';
import * as React from 'react';
import './App.css';
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
//tslint:disable
class App extends React.Component {
  render() {
    return (
      <MapsComponent id="element">
        <LayersDirective>
          <LayerDirective shapeData={usMap} shapeSettings={
            {
              fill: '#E5E5E5',
              border: {
                color: 'black',
                width: 0.1
              }
            }
          } >
          </LayerDirective>
          <LayerDirective shapeData={Texas} type='SubLayer' shapeSettings={
            {
              fill: 'rgba(141, 206, 255, 0.6)',
              border: {
                color: '#1a9cff',
                width: 0.25
              }
            }
          } >
          </LayerDirective>
          <LayerDirective shapeData={California} type='SubLayer' shapeSettings={
            {
              fill: 'rgba(141, 206, 255, 0.6)',
              border: {
                color: '#1a9cff',
                width: 0.25

              }
            }
          } >
          </LayerDirective>
        </LayersDirective>
      </MapsComponent>);
  }
}
export default App;

Center position zooming

You can achieve the center position zooming by using the centerPosition and 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.

import { World_Map } from './MapData/WorldMap';
import * as React from 'react';
import './App.css';
import {
  MapsComponent, LayersDirective, LayerDirective,
  Inject, Zoom
} from '@syncfusion/ej2-react-maps';
//tslint:disable
class App extends React.Component {
  render() {
    return (
      <MapsComponent id="element" zoomSettings={{
        enable: false,
        zoomFactor: 13
      }} centerPosition={{
        latitude: 25.54244147012483,
        longitude: -89.62646484375
      }} >
        <Inject services={[Zoom]} />
        <LayersDirective>
          <LayerDirective shapeData={World_Map}>
          </LayerDirective>
        </LayersDirective>
      </MapsComponent>);
  }
}
export default App;

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.

import { seatData } from './MapData/seatSelection';
import * as React from 'react';
import './App.css';
import {
  MapsComponent, LayersDirective, LayerDirective,
  Inject, Selection
} from '@syncfusion/ej2-react-maps';
//tslint:disable
const bus_logo = require('./bus-icon.png');
const wheel_logo = require('./wheel.png');
class App extends React.Component {
  render() {
    return (
      <div className='control-section row'>
        <div className='col-md-8'>
          <div style={{ width: 200, margin: 'auto', paddingBottom: 20 }}>
            <img src={bus_logo} style={{ width: 25, height: 25, float: 'left' }}>
            </img>
            <div id="sampletitle">Bus seat selection</div>
          </div>
          <div style={{ border: '3px solid darkgray', width: 200, display: 'block', margin: 'auto' }}>
            <img src={wheel_logo} style={{ width: 30, height: 30, marginLeft: '18%', marginTop: 10 }}></img>
            <MapsComponent id="element" height='400'>
              <Inject services={[Selection]} />
              <LayersDirective>
                <LayerDirective shapeData={seatData} geometryType='Normal' selectionSettings={
                  {
                    enable: true,
                    opacity: 1,
                    enableMultiSelect: true
                  }
                } >
                </LayerDirective>
              </LayersDirective>
            </MapsComponent>
          </div></div></div>);
  }
}
export default App;

Drilldown

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 event as mentioned in the following code example.

import { World_Map } from './MapData/WorldMap';
import { Africa } from './MapData/Africa';
import { dafaultData } from './MapData/salesCountry';
import * as React from 'react';
import './App.css';
import {
  MapsComponent, LayersDirective, LayerDirective, Inject,
  Highlight, IShapeSelectedEventArgs, Marker, MarkerDirective, MarkersDirective
} from '@syncfusion/ej2-react-maps';
//tslint:disable
interface ShapeData {
  continent?: string;
}
class App extends React.Component {
  private mapInstance: MapsComponent;
  private shapeSelected(args: IShapeSelectedEventArgs) {
    let shape = (args.shapeData as ShapeData).continent;
    if (this.mapInstance.baseLayerIndex === 0) {
      if (shape === 'Africa') {
        this.mapInstance.baseLayerIndex = 1;
        this.mapInstance.refresh();
      }
    }
  }
  render() {
    return (
      <MapsComponent id="element" height='400' ref={m => this.mapInstance = m as MapsComponent} shapeSelected={this.shapeSelected.bind(this)} >
        <Inject services={[Highlight, Marker]} />
        <LayersDirective>
          <LayerDirective shapeData={World_Map} layerType='Geometry' shapeDataPath='continent' shapePropertyPath='continent' dataSource={dafaultData} shapeSettings={{
            colorValuePath: 'drillColor'
          }}>
            <MarkersDirective>
              <MarkerDirective visible={true} template='<div style="font-size: 12px;color:white;text-shadow: 0px 1px 1px black;font-weight: 500;width:50px">Africa</div>' dataSource={
                [{ latitude: 10.97274101999902, longitude: 16.390625 }]
              } animationDuration={0} >
              </MarkerDirective>
            </MarkersDirective>
          </LayerDirective>
          <LayerDirective layerType='Geometry' shapeData={Africa} shapeSettings={{
            fill: '#80306A'
          }} highlightSettings={{
            enable: true,
            fill: '#80306A'
          }} >
          </LayerDirective>
        </LayersDirective>
      </MapsComponent>);
  }
}
export default App;

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 documentation.

import * as React from 'react';
import {
  MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective,
  Marker, MapsTooltip, Inject
} from '@syncfusion/ej2-react-maps';
import './App.css';
import { usMap } from './MapData/USA';

//tslint:disable
class App extends React.Component {
  render() {
    return (
      <MapsComponent id="element" height='450px' width='700px'>
        <Inject services={[Marker, MapsTooltip]} />
        <LayersDirective>
          <LayerDirective shapeData={usMap}>
            <MarkersDirective>
              <MarkerDirective visible={true} shape='Circle' fill='white' width={3} animationDuration={3} dataSource={[
                { latitude: 37.0000, longitude: -120.0000, city: 'California' }
              ]} border={{
                width: 2, color: '#333'
              }
              } tooltipSettings={
                {
                  visible: true, valuePath: 'city'
                }
              } >
              </MarkerDirective>
            </MarkersDirective>
          </LayerDirective>
        </LayersDirective>
      </MapsComponent>
    );
  }
}
export default App;