• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src='https://cdn.zingchart.com/zingchart.min.js'></script>
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-maps.min.js"></script>
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/modules/zingchart-maps-geojson.min.js"></script>
    10.  
    11.   <style></style>
    12. </head>
    13.  
    14. <body style="margin: 0px;">
    15.   <div id='myChart'></div>
    16.   <script>
    17.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    18.     var myJson = {};
    19.     zingchart.maps.loadGeoJSON({
    20.       id: 'africa', // Give the map an id
    21.       url: 'https://www.zingchart.com/resources/calif_geo.json', // GeoJSON object for Africa
    22.       style: { //Optional styling options
    23.         poly: {
    24.           label: {
    25.             visible: false
    26.           }
    27.         }
    28.       },
    29.       callback: function() { // Function called when GeoJSON is loaded
    30.         zingchart.render({
    31.           id: 'myChart',
    32.           width: 722,
    33.           height: 500,
    34.           data: {
    35.             "shapes": [{
    36.               "type": "zingchart.maps", // Set shape to map type
    37.               "options": {
    38.                 "name": "africa", // Reference to the id set in loadGeoJSON()
    39.                 "scale": true // Automatically scale to correct proportions
    40.               }
    41.             }]
    42.           }
    43.         });
    44.       }
    45.     });
    46.   </script>
    47. </body>
    48.  
    49. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src='https://cdn.zingchart.com/zingchart.min.js'></script>
    8.   <script src="https://cdn.zingchart.com/modules/zingchart-maps.min.js"></script>
    9.   <script src="https://cdn.zingchart.com/modules/zingchart-maps-geojson.min.js"></script>
    10.  
    11. </head>
    12.  
    13. <body style="margin: 0px;">
    14.   <div id='myChart'></div>
    15. </body>
    16.  
    17. </html>
    1.  
    1. var myJson = {};
    2. zingchart.maps.loadGeoJSON({
    3.   id: 'africa', // Give the map an id
    4.   url: 'https://www.zingchart.com/resources/calif_geo.json', // GeoJSON object for Africa
    5.   style: { //Optional styling options
    6.     poly: {
    7.       label: {
    8.         visible: false
    9.       }
    10.     }
    11.   },
    12.   callback: function() { // Function called when GeoJSON is loaded
    13.     zingchart.render({
    14.       id: 'myChart',
    15.       width: 722,
    16.       height: 500,
    17.       data: {
    18.         "shapes": [{
    19.           "type": "zingchart.maps", // Set shape to map type
    20.           "options": {
    21.             "name": "africa", // Reference to the id set in loadGeoJSON()
    22.             "scale": true // Automatically scale to correct proportions
    23.           }
    24.         }]
    25.       }
    26.     });
    27.   }
    28. });