The rendered map can be printed directly from the browser by calling the public method print. You can pass array of ID of elements or element to this method. By default it take element of the map.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
class App extends React.Component<{}, {}>{
public clickHandler(){
this.maps.print();
}
private maps: MapsComponent;
render(){
return (<div>
<ButtonComponent value='export' onClick= { this.clickHandler.bind(this)}>print</ButtonComponent>
<MapsComponent id="maps" ref={g => this.maps = g}>
<Inject services={[DataLabel]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
dataLabelSettings={ {
visible: true,
labelPath: 'name',
smartLabelMode: 'Trim'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('maps'));import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { MapsComponent, LayersDirective, LayerDirective, Inject, DataLabel } from '@syncfusion/ej2-react-maps';
class App extends React.Component {
clickHandler() {
this.maps.print();
}
render() {
return (<div>
<ButtonComponent value='export' onClick={this.clickHandler.bind(this)}>print</ButtonComponent>
<MapsComponent id="maps" ref={g => this.maps = g}>
<Inject services={[DataLabel]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} dataLabelSettings={{
visible: true,
labelPath: 'name',
smartLabelMode: 'Trim'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('maps'));The rendered map can be exported to JPEG , PNG, SVGor PDF format by using export method in map.
Input parameters for this method are Export Type for format and fileName of result.
import { usa_map } from 'usa.ts';
import { election_data } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
import {Legend, } from '@syncfusion/ej2-react-maps';
import { setCulture } from '@syncfusion/ej2-base';
setCulture('de');
class App extends React.Component<{}, {}>{
public clickHandler(){
this.maps.export('PNG', 'Maps');
}
private maps: MapsComponent;
render(){
return (<div>
<ButtonComponent value='export' onClick= { this.clickHandler.bind(this)}>Export</ButtonComponent>
<MapsComponent id="maps" ref={g => this.maps = g} format='c' legendSettings={ { visible: true } }
titleSettings={ { text: 'USA Election Results - 2016' } }>
<Inject services={[Legend, MapsTooltip]} />
<LayersDirective>
<LayerDirective shapeData={usa_map} shapeDataPath='State' shapePropertyPath='name' dataSource={election_data}
shapeSettings={ {
colorValuePath: 'Candidate',
colorMapping: [
{ value: 'Trump', color: '#D84444' },
{ value: 'Clinton', color: '#316DB5' }
]
} }
tooltipSettings={ {
visible: true,
valuePath: 'value'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('maps'));import { usa_map } from 'usa.ts';
import { election_data } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
import { Legend, } from '@syncfusion/ej2-react-maps';
import { setCulture } from '@syncfusion/ej2-base';
setCulture('de');
class App extends React.Component {
clickHandler() {
this.maps.export('PNG', 'Maps');
}
render() {
return (<div>
<ButtonComponent value='export' onClick={this.clickHandler.bind(this)}>Export</ButtonComponent>
<MapsComponent id="maps" ref={g => this.maps = g} format='c' legendSettings={{ visible: true }} titleSettings={{ text: 'USA Election Results - 2016' }}>
<Inject services={[Legend, MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={usa_map} shapeDataPath='State' shapePropertyPath='name' dataSource={election_data} shapeSettings={{
colorValuePath: 'Candidate',
colorMapping: [
{ value: 'Trump', color: '#D84444' },
{ value: 'Clinton', color: '#316DB5' }
]
}} tooltipSettings={{
visible: true,
valuePath: 'value'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('maps'));