JavaScript
Demos
Support
Forum
Download
Search results

Customization

customize shape

To customize the layer shape, we need to modify default the layer shapeSettings property. In that we can customize the shape color by using the fill property and border by using border.color and border.width.

import { Maps } from '@syncfusion/ej2-maps';

let map: Maps = new Maps({
    layers: [{
        layerType: 'Geometry',
        shapeData: worldmap,
        shapeSettings: {
            fill: '#33CCFF',
            border: { color: '#FFFFFF', width: 2}
        }
    }]
});

map.appendTo('#element');

To apply default palette colors for shapes need to enable the autofill property.

Source
Preview
index.ts
index.html
index.css
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';

let map: Maps = new Maps({
    layers: [{
        layerType: 'Geometry',
        shapeData: world_map,
        shapeSettings: {
            autofill: true
        }
    }]
});

map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>
</body>

</html>

you can apply own custom palette for shape, you need to provide the palette colors for palette.

Source
Preview
index.ts
index.html
index.css
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';


let map: Maps = new Maps({
    layers: [{
        layerType: 'Geometry',
        shapeData: world_map,
        shapeSettings: {
            autofill: true,
            palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000']
        }
    }]
});

map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>
</body>

</html>

Refer the shapeSettings API for Shape Customization. For more customization see colormapping feature.

Projection Type

By default, the maps are rendered by Mercator projection type. In this type, the maps are rendered based on coordinates, so it is not stretched.

The maps control has the following projection types:

  • Mercator
  • Equirectangular
  • Miller
  • Eckert3
  • Eckert5
  • Eckert6
  • Winkel3
  • AitOff.
Source
Preview
index.ts
index.html
index.css
import { Maps, ProjectionType } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { projectionData } from './projection-data.ts';

let map: Maps = new Maps({
        projectioType: 'Mercator',
        layers: [
            {
                shapeData: world_map,
                shapeDataPath: 'Country',
                shapePropertyPath: 'name',
                dataSource: projectionData,
                tooltipSettings: {
                    visible: true,
                    valuePath: 'Country',
                },
                shapeSettings: {
                    fill: '#E5E5E5',
                    colorMapping: [
                        {
                            value: 'Permanent',
                            color: '#EDB46F'
                        },
                        {
                            color: '#F1931B',
                            value: 'Non-Permanent'
                        }
                    ],
                    colorValuePath: 'Membership'
                }
            }
        ]
});

map.appendTo('#container');
document.getElementById('projectiontype').onchange = function(){
      let ele: HTMLSelectElement = (<HTMLSelectElement>document.getElementById('projectiontype'))
      maps.projectionType = <ProjectionType>ele.value;
      maps.refresh();
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script src="projection-data.js"></script>
    <script src="world-map.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div class="col-lg-9 control-section">
        <div id="container" align="center"></div>
    </div>
    <div class="col-lg-3 property-section">
        <table id="property" title="Properties" style="width: 100%">
            <tbody><tr style="height: 50px">
                <td style="width: 60%">
                    <div>Projection Type</div>
                </td>
                <td style="width: 40%;">
                    <select name="projectionType" id="projectiontype" style="margin-left: -25px">
                        <option value="Mercator">Mercator</option>
                        <option value="Equirectangular">Equirectangular</option>                    
                        <option value="Miller">Miller</option>
                        <option value="Eckert3">Eckert3</option>
                        <option value="Eckert5">Eckert5</option>
                        <option value="Eckert6">Eckert6</option>
                        <option value="Winkel3">Winkel3</option>                    
                        <option value="AitOff">AitOff</option>
                    </select>
                </td>
            </tr>
        </tbody></table>
    </div>
    
</body>

</html>
Previous
Next