Maps > Methods > loadGeoJSON()

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    zingchart.loadModules('maps, maps-geojson', function(e) { //Required. Load the maps-geojson module.
      zingchart.maps.loadGeoJSON({ //Required. Add the loadGeoJSON() method.
        id: 'customMapName', //Required. Provide the id name, which will  correspond to the name below.
        url: 'https://storage.googleapis.com/zingchart-com.appspot.com/maps/sd-boundaries.json', //Required. Provide the GeoJSON file source.
        //Source: https://github.com/blackmad/neighborhoods/blob/master/gn-san-diego.geojson?short_path=c5454cc
        mappings: { //Recommended. Allows you to property names from the GeoJSON file to ZingChart.
          id: 'name',
          name: 'name'
        },
        style: { //Optional.

        },
        callback: function() { //Recommended. Use the function to render the map.
          zingchart.render({
            id: 'myChart',
            data: {
              shapes: [{
                type: 'zingchart.maps',
                options: {
                  name: 'customMapName', //This corresponds with the id above.

                  style: {
                    controls: {
                      visible: false
                    },
                    label: {
                      visible: false
                    },
                    items: {
                      PACIFIC_BEACH: {
                        backgroundColor: 'red',
                        label: {
                          visible: true
                        }
                      }
                    }
                  },
                  zoom: false,
                  zooming: false,
                  panning: false,
                }
              }]
            },
            height: '100%',
            width: '100%'
          });
        }
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
zingchart.loadModules('maps, maps-geojson', function(e) { //Required. Load the maps-geojson module.
  zingchart.maps.loadGeoJSON({ //Required. Add the loadGeoJSON() method.
    id: 'customMapName', //Required. Provide the id name, which will  correspond to the name below.
    url: 'https://storage.googleapis.com/zingchart-com.appspot.com/maps/sd-boundaries.json', //Required. Provide the GeoJSON file source.
    //Source: https://github.com/blackmad/neighborhoods/blob/master/gn-san-diego.geojson?short_path=c5454cc
    mappings: { //Recommended. Allows you to property names from the GeoJSON file to ZingChart.
      id: 'name',
      name: 'name'
    },
    style: { //Optional.

    },
    callback: function() { //Recommended. Use the function to render the map.
      zingchart.render({
        id: 'myChart',
        data: {
          shapes: [{
            type: 'zingchart.maps',
            options: {
              name: 'customMapName', //This corresponds with the id above.

              style: {
                controls: {
                  visible: false
                },
                label: {
                  visible: false
                },
                items: {
                  PACIFIC_BEACH: {
                    backgroundColor: 'red',
                    label: {
                      visible: true
                    }
                  }
                }
              },
              zoom: false,
              zooming: false,
              panning: false,
            }
          }]
        },
        height: '100%',
        width: '100%'
      });
    }
  });
});