JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customization in JavaScript Maps control

25 Oct 2021 / 7 minutes to read

Setting the size for Maps

The width and height of the Maps can be set using the width and height properties in Maps. Percentage or pixel values can be used for the height and width values.

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

let map: Maps = new Maps({
    height: '200px',
    width: '500px',
    layers: [{
        shapeData: world_map,
        shapeSettings: {
            autofill: true
        }
    }]
});

map.appendTo('#element');
Copied to clipboard
<!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>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>
</body>

</html>

Maps title

The title for the Maps can be set using the titleSettings. It can be customized using the following properties.

  • alignment - To customize the alignment for the text in the title for the Maps. The possible values can be Center, Near and Far.
  • description - To set the description of the title in Maps.
  • text - To set the text for the title in Maps.
  • textStyle - To customize the text of the title in Maps.
  • subtitleSettings - To customize the subtitle for the Maps.
Source
Preview
index.ts
index.html
Copied to clipboard
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';

let map: Maps = new Maps({
titleSettings: {
    text: 'Maps Control',
    textStyle: {
        color: 'red',
        fontStyle: 'italic',
        fontWeight: 'regular',
        fontFamily: 'arial',
        size: '14px'
    },
    alignment: 'Center'
},
layers: [{
    shapeData: world_map,
    shapeSettings: {
        autofill: true
    }
}]
});

map.appendTo('#element');
Copied to clipboard
<!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>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>
</body>

</html>

Setting theme

The Maps control supports following themes.

  • Material
  • Fabric
  • Bootstrap
  • Highcontrast
  • MaterialDark
  • FabricDark
  • BootstrapDark
  • Bootstrap4
  • HighContrastLight

By default, the Maps are rendered by the Material theme. The theme of the Maps component is changed using the theme property.

Source
Preview
index.ts
index.html
Copied to clipboard
import { Maps, MapsTheme } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';

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

map.appendTo('#element');
document.getElementById('theme').onchange = () => {
var value = (<HTMLInputElement>document.getElementById('theme')).value;
map.theme= <MapsTheme>value;
map.refresh();
}
Copied to clipboard
<!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="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="theme" id="theme" style="margin-left: -25px">
                        <option value="Material">Material</option>
                        <option value="Fabric">Fabric</option>                    
                        <option value="Bootstrap">Bootstrap</option>
                        <option value="Highcontrast">Highcontrast</option>
                        <option value="MaterialDark">MaterialDark</option>
                        <option value="FabricDark">FabricDark</option>
                        <option value="BootstrapDark">BootstrapDark</option>                    
                        <option value="Bootstrap4">Bootstrap4</option>
                    </select>
                </td>
            </tr>
        </tbody></table>
    </div>
</body>

</html>

Customizing Maps container

The following properties are available to customize the container in the Maps.

  • background - To apply the background color to the container in the Maps.
  • border - To customize the color, width and opacity of the border of the Maps.
  • margin - To customize the margins of the Maps.
Source
Preview
index.ts
index.html
Copied to clipboard
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';

let map: Maps = new Maps({
background: '#CCD1D1',
border: {
    color: 'green',
    width: 2
},
margin: {
    bottom: 10,
    left: 20,
    right: 20,
    top: 10
},
layers: [{
    shapeData: world_map,
    shapeSettings: {
        autofill: true
    }
}]
});

map.appendTo('#element');
Copied to clipboard
<!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>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>
</body>

</html>

Customizing Maps area

By default, the background color of the shape maps is set as white. To modify the background color of the Maps area, the background property in the mapsArea is used. The border of the Maps area can be customized using the border property in the mapsArea.

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

let map: Maps = new Maps({
mapsArea: {
    background: '#CCD1D1',
    border: {
        width: 2,
        color: 'green'
    }
},
layers: [{
    shapeData: world_map,
    shapeSettings: {
        autofill: true
    }
}]
});

map.appendTo('#element');
Copied to clipboard
<!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>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>
</body>

</html>

Customizing the shapes

The following properties are available in shapeSettings property to customize the shapes of the Maps component.

  • fill - To apply the color to the shapes.
  • autofill - To apply the palette colors to the shapes if it is set as true.
  • palette - To set the custom palette for the shapes.
  • border - To customize the color, width and opacity of the border of the shapes.
  • dashArray - To define the pattern of dashes and gaps that is applied to the outline of the shapes.
  • opacity - To customize the transparency for the shapes.
Source
Preview
index.ts
index.html
Copied to clipboard
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';

let map: Maps = new Maps({
layers: [{
    shapeData: world_map,
    shapePropertyPath: 'continent',
    shapeDataPath: 'continent',
    dataSource: [
        { continent: "North America", color: '#71B081', borderColor: '#CCFFE5', width: 2 },
        { continent: "South America", color: '#5A9A77', borderColor: 'red', width: 2 },
        { continent: "Africa", color: '#498770', borderColor: '#FFCC99', width: 2 },
        { continent: "Europe", color: '#39776C', borderColor: '#66B2FF', width: 2 },
        { continent: "Asia", color: '#266665', borderColor: '#999900', width: 2 },
        { continent: "Oceania", color: '#124F5E', borderColor: 'blue', width: 2 }
    ],
    shapeSettings: {
        borderColorValuePath: 'borderColor',
        borderWidthValuePath: 'width',
        colorValuePath: 'color'
    }
}]
});

map.appendTo('#element');
Copied to clipboard
<!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>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>
</body>

</html>

Projection type

The Maps control supports the following projection types:

  • Mercator
  • Equirectangular
  • Miller
  • Eckert3
  • Eckert5
  • Eckert6
  • Winkel3
  • AitOff

By default, the Maps are rendered by the Mercator projection type in which the Maps are rendered based on the coordinates. So, the Maps is not stretched. To change the type of projection in the Maps, the projectionType property is used.

Source
Preview
index.ts
index.html
Copied to clipboard
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({
projectionType: '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'))
map.projectionType = <ProjectionType>ele.value;
map.refresh();
}
Copied to clipboard
<!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