Search results

Print and Export

Print

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.

Source
Preview
index.tsx
index.jsx
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'));

Export

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.

Source
Preview
index.tsx
index.jsx
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'));
Contents
Contents