manyi/static/angular-mod/tpl/ui_jvectormap.html

<div class="wrapper-md" ng-controller="JVectorMapDemoCtrl">
  <div class="panel b-a">
    <div class="panel-heading b-b b-light">World Map</div>
    <div class="panel-body">
      <div class="h3 m-b font-thin">World Map with information</div>
      <p class="m-b-lg text-muted">This map is based on data available at <a href="http://www.naturalearthdata.com/downloads/110m-cultural-vectors/110m-admin-0-countries/">http://www.naturalearthdata.com</a>. Data is in <a href="http://www.naturalearthdata.com/about/terms-of-use/">public domain</a>.</p>
      <div class="row">
        <div class="col-sm-8">
          <div style="height:240px;" ui-jq="vectorMap" ui-options="{            
            map: 'world_mill_en',
            markers: {{world_markers}},
            normalizeFunction: 'polynomial',
            backgroundColor: '#fff',
            regionStyle: {
              initial: {
                fill: '{{app.color.light}}'
              },
             hover: {
                fill: '{{app.color.primary}}'
              },
            },
            markerStyle: {
              initial: {
                fill: '{{app.color.info}}',
                stroke: '#fff'
              }
            }
          }" >
          </div>
          <div class="m-t-xl m-b clearfix">
            <i class="i i-local i-2x text-info pull-left m-r m-l m-t-xs"></i>
            <div class="clear text-sm">
              Countries distinguish between metropolitan (homeland) and independent and semi-independent portions of sovereign states.
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="h4 m-b font-thin">Statistics</div>
          <p class="m-b-xs">Population growth</p>
          <div class="progress progress-xs">
            <div class="progress-bar progress-bar-info" data-toggle="tooltip" data-original-title="80%" style="width: 80%"></div>
          </div>
          <p class="m-b-xs">Desertification</p>
          <div class="progress progress-xs">
            <div class="progress-bar progress-bar-success" data-toggle="tooltip" data-original-title="60%" style="width: 60%"></div>
          </div>
          <p class="m-b-xs">Natural Disasters</p>
          <div class="progress progress-xs">
            <div class="progress-bar progress-bar-warning" data-toggle="tooltip" data-original-title="70%" style="width: 70%"></div>
          </div>
          <p class="m-b-xs">World Forest</p>
          <div class="progress progress-xs">
            <div class="progress-bar progress-bar-primary lter" data-toggle="tooltip" data-original-title="50%" style="width: 50%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel b-a">
    <div class="panel-heading b-b b-light">USA Map</div>
    <div class="panel-body">
      <div class="h3 m-b font-thin">Map with selection</div>
      <p class="m-b-lg text-muted">This map is based on data available at <a href="http://www.naturalearthdata.com/downloads/10m-cultural-vectors/10m-admin-1-states-provinces/">http://www.naturalearthdata.com</a>. Data is in <a href="http://www.naturalearthdata.com/about/terms-of-use/">public domain</a>.</p>
      <div class="row m-b-xl">
        <div class="col-sm-8">                      
          <div style="height:240px;" ui-jq="vectorMap" ui-options="{
            map: 'us_aea_en',
            markers: {{usa_markers}},
            backgroundColor: '#fff',
            regionsSelectable: true,
            markersSelectable: true,
            markerStyle: {
              initial: {
                fill: '{{app.color.warning}}'
              },
              selected: {
                fill: '#ffffff'
              }
            },
            regionStyle: {
              initial: {
                fill: '{{app.color.info}}'
              },
              selected: {
                fill: '{{app.color.success}}'
              }
            },
            series: {
              markers: [{
                attribute: 'r',
                scale: [5, 15],
                values: [
                  187.70,
                  255.16,
                  310.69,
                  605.17,
                  248.31,
                  107.35,
                  217.22
                ]
              }]
            }
          }" >
          </div>
        </div>
        <div class="col-sm-4">
          <div class="h4 m-b font-thin">Statistics</div>
          <p>Internal administrative boundaries</p>
          <div>
            <div class="inline text-center">
              <div ui-jq="easyPieChart" ui-options="{
                      percent: 60,
                      lineWidth: 4,
                      trackColor: '{{app.color.light}}',
                      barColor: '{{app.color.info}}',
                      scaleColor: '#fff',
                      size: 100,
                      lineCap: 'butt',
                      animate: 1000
                    }">
                <div>
                  <span class="step">60</span>%
                </div>
              </div>
              <p class="text-info font-bold">data</p>
            </div>
            <div class="inline text-center">
              <div ui-jq="easyPieChart"  ui-options="{
                      percent: 30,
                      lineWidth: 4,
                      trackColor: '{{app.color.light}}',
                      barColor: '{{app.color.warning}}',
                      scaleColor: '#fff',
                      size: 100,
                      lineCap: 'butt',
                      animate: 1000
                    }">
                <div>
                  <span class="step">30</span>%
                </div>
              </div>
              <p class="text-warning font-bold">info</p>
            </div> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>