Es5 getting started in EJ2 JavaScript Maps control

20 Dec 202424 minutes to read

The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.

You can explore some useful features in the Maps component using the following video.

Control Initialization

The Essential JS 2 JavaScript controls can be initialized by using either of the following ways.

  • Using local script and style references in a HTML page.
  • Using CDN link for script and style reference.

Using local script and style references in a HTML page

Step 1: Create a folder quickstart for getting started application.

Step 2: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

Syntax:

Dependency Script: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js

Control Script: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js

Control Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\material.css

Example:

Dependency Script: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\20.1.0.58\Web (Essential JS 2)\JavaScript\ej2-base\dist\global\ej2-base.min.js

C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\20.1.0.58\Web (Essential JS 2)\JavaScript\ej2-data\dist\global\ej2-data.min.js

C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\20.1.0.58\Web (Essential JS 2)\JavaScript\ej2-svg-base\dist\global\ej2-svg-base.min.js

Control Script: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\20.1.0.58\Web (Essential JS 2)\JavaScript\ej2-maps\dist\global\ej2-maps.min.js

The below located script file contains all Syncfusion JavaScript (ES5) UI control resources.

Scripts: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific controls. This web tool is useful to combine the required control scripts and styles in a single file.

Step 3: Create a folder ~/quickstart/resources and copy/paste the global scripts and styles from the above installed location to ~/quickstart/resources/scripts for script files and ~/quickstart/resources/styles for styles.

Step 4: Create a HTML page (index.html) in ~/quickstart/index.html and add the Essentials JS 2 script and style references.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Essential JS 2</title>
        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
        <script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
        <script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>
        <!-- Essential JS 2 Maps's global script (Control Script) -->
        <script src="resources/scripts/ej2-maps.min.js" type="text/javascript"></script>
    </head>
    <body>
    </body>
</html>

Step 5: Now, add a div element to initiate the Syncfusion JavaScript (ES5) Maps control in the ~/quickstart/index.html by using following code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
        <script src="resources/base/ej2-data.min.js" type="text/javascript"></script>
        <script src="resources/base/ej2-svg-base.min.js" type="text/javascript"></script>
        <!-- Essential JS 2 maps's global script (Control Script) -->
        <script src="resources/maps/ej2-maps.min.js" type="text/javascript"></script>
    </head>
    <body>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>
</html>

Step 6: Add the Maps control to the div element with id attribute as “element” using the below code. The below code can be added in a separate script file (index.js) in ~/quickstart/index.js and refer it in the script tag within the body tag.

var map = new ej.maps.Maps({
   layers: [
        {
            shapeData: world_map
        }
    ]
});
map.appendTo('#element');

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    //..
    //..
    <body>
    <div id='container'>
        <div id='element'></div>
        <!-- Add the Maps script -->
        <script src="index.js"></script>
    </div>
</body>
</html>

Step 7: Add the data world_map.js as a script file within the head tag of the HTML code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- Add the worldmap -->
        <script src="world_map.js"></script>
    </head>
</html>

Note: Refer the data values for world_map here. These data must be referred as script file in the HTML code.

Step 8: Now, run the index.html in web browser, it will render the Syncfusion JavaScript maps control.

Step 1: Create a folder quickstart for getting started application.

Step 2: The Essential JS 2 controls’ global scripts are already hosted in the below CDN link formats.

Common Control Script:

Syntax: https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js

Example:

Script: https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js

or

Individual Control Scripts:

Syntax

http://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Maps Script: https://cdn.syncfusion.com/ej2/23.1.36/ej2-maps/dist/global/ej2-maps.min.js

Dependency Scripts

https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/dist/global/ej2-base.min.js

https://cdn.syncfusion.com/ej2/23.1.36/ej2-data/dist/global/ej2-data.min.js

https://cdn.syncfusion.com/ej2/23.1.36/ej2-svg-base/dist/global/ej2-svg-base.min.js

https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdf-export/dist/global/ej2-pdf-export.min.js

Step 3: Create an HTML page called index.html in the quickstart folder and add the following CDN link references for the common control script.

<script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js" type="text/javascript"></script>

Alternatively, you can also refer the following CDN links for individual control scripts.

<script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-maps/dist/global/ej2-maps.min.js"></script>

Please replace {RELEASE_VERSION} with the latest version number of the script file referenced in the sample.

Step 4: Now, add the div element for initiating the Syncfusion JavaScript (ES5) Maps control in the index.html by using following code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
        <script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
        <script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
        <script src="https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/ej2-maps/dist/global/ej2-maps.min.js"></script>
    </head>
    <body>
        <div id='container'>
            <div id='element'></div>
        </div>
    </body>
</html>

Step 5: Add the data world_map.js as a script file within the head tag of the HTML code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- Add the worldmap -->
        <script src="world_map.js"></script>
    </head>
</html>

Note: Refer the data values for world_map here.

Step 6: Add the Maps control to the div element with id attribute as “element” using the below code. The below code can be added as separate script file (index.js) in ~/quickstart/index.js and refer it in the script tag within the body tag. The JSON object in the world_map.js must be added to the shapeData property of the layers property in the Maps control to render the world map.

var map = new ej.maps.Maps({
   layers: [
        {
            shapeData: world_map
        }
    ]
});
map.appendTo('#element');

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    //..
    //..
    <body>
        <div id='container'>
            <div id='element'></div>
            <!-- Add the Maps script -->
            <script src="index.js"></script>
        </div>
    </body>
</html>

Step 7: Now, run the index.html in web browser, it will render the Syncfusion JavaScript maps control.

The following example shows a basic Maps control.

var map = new ej.maps.Maps({
   layers: [
        {
            shapeData: world_map
        }
    ]
});
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="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Bind data source to map

The following properties in layers are used for binding data source to map.

  • dataSource
  • shapeDataPath
  • shapePropertyPath

The dataSource property takes collection value as input. For example, the list of objects can be provided as input. This data is further used in tooltip, data label, bubble, legend and in color mapping.

The shapeDataPath property used to refer the data ID in dataSource. Where as, the shapePropertyPath property is used to refer the column name in shapeData to identify the shape. Both the properties are related to each other. When the values of the shapeDataPath property in the dataSource property and the value of shapePropertyPath in the shapeData property match, then the associated object from the dataSource is bound to the corresponding shape.

The JSON object “UnCountries” is used as data source below.

var map = new ej.maps.Maps({
   layers: [
        {
            shapeData: world_map,
            dataSource: [{  "Country": "China", "Membership": "Permanent"},
            {"Country": "France","Membership": "Permanent" },
            { "Country": "Russia","Membership": "Permanent"},
            {"Country": "Kazakhstan","Membership": "Non-Permanent"},
            { "Country": "Poland","Membership": "Non-Permanent"},
            {"Country": "Sweden","Membership": "Non-Permanent"}],
            shapePropertyPath: 'name',
            shapeDataPath: 'Country',
        }
    ]
});
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="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Note: Refer the data values for world_map here.

Apply Color Mapping

The Color Mapping feature supports customization of shape colors based on the underlying value of shape received from bounded data. Specify the field name from which the values have to be compared for the shapes in colorValuePath property in shapeSettings.

var map = new ej.maps.Maps({
   layers: [
        {
            shapeData: world_map,
            dataSource: [{  "Country": "China", "Membership": "Permanent"},
            {"Country": "France","Membership": "Permanent" },
            { "Country": "Russia","Membership": "Permanent"},
            {"Country": "Kazakhstan","Membership": "Non-Permanent"},
            { "Country": "Poland","Membership": "Non-Permanent"},
            {"Country": "Sweden","Membership": "Non-Permanent"}],
            shapePropertyPath: 'name',
            shapeDataPath: 'Country',
            shapeSettings: {
                colorValuePath: 'Membership',
                colorMapping: [
                {
                    value: 'Permanent', color: '#D84444'
                },
                {
                    value: 'Non-Permanent', color: '#316DB5'
                }]
            }
        }
    ]
});
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="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Add Title for Maps

You can add a title using titleSettings property to the map to provide quick information to the user about the shapes rendered in the map.

var map = new ej.maps.Maps({
    titleSettings: {
        text: 'Members of the UN Security Council',
    },
   layers: [{
        shapeData: world_map,
        dataSource: [
            {  "Country": "China", "Membership": "Permanent"},
            {"Country": "France","Membership": "Permanent" },
            { "Country": "Russia","Membership": "Permanent"},
            {"Country": "Kazakhstan","Membership": "Non-Permanent"},
            { "Country": "Poland","Membership": "Non-Permanent"},
            {"Country": "Sweden","Membership": "Non-Permanent"}
        ],
        shapePropertyPath: 'name',
        shapeDataPath: 'Country',
        shapeSettings: {
            colorValuePath: 'Membership',
            colorMapping: [
            {
                value: 'Permanent', color: '#D84444'
            },
            {
                value: 'Non-Permanent', color: '#316DB5'
            }]
        }
        }
    ]
});
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="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Enable Legend

You can show legend for the maps by setting true to the visible property in legendSettings object.

var map = new ej.maps.Maps({
    titleSettings: {
        text: 'USA Election Results - 2016'
    },
    layers: [
        {
            shapeData: world_map,
            dataSource: [
                { "Country": "China", "Membership": "Permanent" },
                { "Country": "France", "Membership": "Permanent" },
                { "Country": "Russia", "Membership": "Permanent" },
                { "Country": "Kazakhstan", "Membership": "Non-Permanent" },
                { "Country": "Poland", "Membership": "Non-Permanent" },
                { "Country": "Sweden", "Membership": "Non-Permanent" }
            ],
            shapePropertyPath: 'name',
            shapeDataPath: 'Country',
            shapeSettings: {
                colorValuePath: 'Membership',
                colorMapping: [
                    { value: 'Permanent', color: '#D84444' },
                    { value: 'Non-Permanent', color: '#316DB5' }
                ]
            }
        }
    ],
    legendSettings: {
        visible: 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="world-map.js"></script>


    <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Add Data Label

You can add data labels to show additional information of the shapes in map. This can be achieved by setting visible property to true in the dataLabelSettings object.

var map = new ej.maps.Maps({
    layers: [
        {
            shapeData: usa_map,
            shapeSettings: {
                autofill: true
            },
            dataLabelSettings: {
                visible: true,
                labelPath: 'name',
            }
        }
    ]
});
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="usa.js"></script>

    <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>

Enable Tooltip

The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the visible property as true in tooltipSettings object.

var map = new ej.maps.Maps({
    layers: [{
        shapeData: world_map,
        tooltipSettings: {
            visible: true,
            valuePath: 'name'
        }
    }]
});
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="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>