import * as React from 'react';
import {
MapsComponent, MarkerDirective, LayersDirective, LayerDirective,
Inject, Zoom, MarkersDirective, Marker, MapsTooltip
} from '@syncfusion/ej2-react-maps';
export default class MapWidget extends React.Component<{}, {}> {
private mapInstance: MapsComponent | null;
render() {
return (
<MapsComponent
id="map-container"
ref={m => this.mapInstance = m}
zoomSettings={{
enable: true,
pinchZooming: true
}}
>
<Inject services={[Zoom, Marker, MapsTooltip]} />
<LayersDirective>
<LayerDirective layerType="OSM">
<MarkersDirective>
<MarkerDirective
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]}
visible={true}
animationDuration={0}
shape='Circle'
fill='white'
width={20}
border={{
color: '#285255',
width: 2
}}
tooltipSettings={{
visible: true,
valuePath: 'city'
}}
/>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
)
}
}
