React
Demos
Support
Forum
Download
Search results

Print and Export in React Maps component

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'));

Export the tile maps

The rendered map with providers such as OSM, Bing and Google static maps can be exported using the export method. It supports the following export formats.

  • JPEG
  • PNG
  • PDF
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: 'OSM' } }>
                <Inject services={[Legend, MapsTooltip]} />
                <LayersDirective>
                    <LayerDirective layerType='OSM'>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent></div>)
        }
};
ReactDOM.render(<App />, document.getElementById('maps'));
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: 'OSM' }}>
                <Inject services={[Legend, MapsTooltip]}/>
                <LayersDirective>
                    <LayerDirective layerType='OSM'>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('maps'));
Previous
Next