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.js
index.html
var map = new ej.maps.Maps({
    layers: [{
        layerType: 'Geometry',
        shapeData: world_map,
        shapeSettings: {
            fill: '#33CCFF',
            border: { color: '#FFFFFF', width: 2}
        }
    }]
});
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="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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

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


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

Source
Preview
index.js
index.html
var map = new ej.maps.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="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="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

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


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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.js
index.html
var maps = new ej.maps.Maps({
        layers: [
            {
                shapeData: world_map,
                shapeSettings: { fill: 'lightgrey', border: { color: 'black', width: 0.1 } },
                markerSettings: [
                    {
                        animationDuration: 0,
                        visible: true,
                        dataSource: [
                            { longitude: 116.5703749, latitude: 40.4319077, name: 'The Great Wall of China, China ' },
                            { longitude: 35.4443622, latitude: 30.3284544, name: 'Petra, Jorden' },
                            { longitude: 78.0421552, latitude: 27.1750151, name: 'Taj Mahal, Agra, India' },
                            { longitude: 12.4922309, latitude: 41.8902102, name: 'The Roman Colosseum, Rome, Italy' },
                            { longitude: -88.5677826, latitude: 20.6842849, name: 'The Chichen Itza, Mexico' },
                            { longitude: -72.5449629, latitude: -13.1631412, name: 'Machu Picchu, Peru' },
                            { longitude: -43.2104872, latitude: -22.951916, name: 'Christ Redeemer, Rio de janeiro, Brazil' },
                        ],
                        shape: 'Balloon',
                        fill: '#E13E40',
                        height: 20,
                        width: 15,
                        tooltipSettings: {
                            visible: true,
                            valuePath: 'name'
                        },
                    }
                ],
            }
        ]
    });
    maps.appendTo('#container');
    document.getElementById('projectiontype').onchange = () => {
        maps.projectionType = document.getElementById('projectiontype').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="projection-data.js"></script>
    <script src="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>
    


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>