wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Maps</title>
  <link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
  <style>
    ul {
      padding: 0;
      list-style: none;
    }

    .jvectormap-legend .jvectormap-legend-tick-sample {
      height: 26px;
    }

    .jvectormap-legend-icons {
      background: white;
      border: black 1px solid;
    }

    .jvectormap-legend-icons {
      color: black;
    }
  </style>

  <script src="assets/jquery-1.8.2.js"></script>
  <script src="../jquery-jvectormap.js"></script>
  <script src="../lib/jquery-mousewheel.js"></script>

  <script src="../src/jvectormap.js"></script>

  <script src="../src/abstract-element.js"></script>
  <script src="../src/abstract-canvas-element.js"></script>
  <script src="../src/abstract-shape-element.js"></script>

  <script src="../src/svg-element.js"></script>
  <script src="../src/svg-group-element.js"></script>
  <script src="../src/svg-canvas-element.js"></script>
  <script src="../src/svg-shape-element.js"></script>
  <script src="../src/svg-path-element.js"></script>
  <script src="../src/svg-circle-element.js"></script>
  <script src="../src/svg-image-element.js"></script>
  <script src="../src/svg-text-element.js"></script>

  <script src="../src/vml-element.js"></script>
  <script src="../src/vml-group-element.js"></script>
  <script src="../src/vml-canvas-element.js"></script>
  <script src="../src/vml-shape-element.js"></script>
  <script src="../src/vml-path-element.js"></script>
  <script src="../src/vml-circle-element.js"></script>
  <script src="../src/vml-image-element.js"></script>

  <script src="../src/map-object.js"></script>
  <script src="../src/region.js"></script>
  <script src="../src/marker.js"></script>

  <script src="../src/vector-canvas.js"></script>
  <script src="../src/simple-scale.js"></script>
  <script src="../src/ordinal-scale.js"></script>
  <script src="../src/numeric-scale.js"></script>
  <script src="../src/color-scale.js"></script>
  <script src="../src/legend.js"></script>
  <script src="../src/data-series.js"></script>
  <script src="../src/proj.js"></script>
  <script src="../src/map.js"></script>

  <script src="assets/jquery-jvectormap-us-aea-en.js"></script>
  <script>
    $(function(){
      var markers = [
            [61.18, -149.53],
            [21.18, -157.49],
            {latLng: [40.66, -73.56], name: 'New York City', style: {r: 8, fill: 'yellow'}},
            {latLng: [41.52, -87.37], style: {fill: 'red', r: 10}},
            {latLng: [35.22, -80.84]},
            {latLng: [31.52, -87.37]}
          ],
          values1 = [408, 512, 550, 781],
          values2 = [1, 2, 3, 4],
          values3 = {
            '4': 'bank',
            '5': 'factory'
          };

      var map = new jvm.Map({
        container: $('.map'),
        map: 'us_aea_en',
        labels: {
          regions: {
            render: function(code){
              var doNotShow = ['US-RI', 'US-DC'];

              if (doNotShow.indexOf(code) === -1) {
                return code.split('-')[1];
              }
            },
            offsets: function(code){
              return {
                'CA': [-10, 10],
                'ID': [0, 40],
                'OK': [25, 0],
                'LA': [-20, 0],
                'FL': [45, 0],
                'KY': [10, 5],
                'VA': [15, 5],
                'MI': [30, 30],
                'AK': [50, -25],
                'HI': [25, 50]
              }[code.split('-')[1]];
            }
          },
          markers: {
            render: function(index){
              return 'Marker '+index;
            }
          }
        },
        markers: markers,
        series: {
          markers: [{
            attribute: 'fill',
            scale: ['#C8EEFF', '#0071A4'],
            normalizeFunction: 'polynomial',
            values: values1,
            legend: {
              vertical: true
            }
          },{
            attribute: 'r',
            scale: [5, 20],
            normalizeFunction: 'polynomial',
            values: values2
          },{
            attribute: 'image',
            scale: {
              bank: 'assets/icon-bank.png',
              factory: 'assets/icon-factory.png'
            },
            values: values3,
            legend: {
              horizontal: true,
              cssClass: 'jvectormap-legend-icons',
              title: 'Business type'
            }
          }],
          regions: [{
            scale: {
              red: '#ff0000',
              green: '#00ff00'
            },
            attribute: 'fill',
            values: {
              "US-KS": 'red',
              "US-MO": 'red',
              "US-IA": 'green',
              "US-NE": 'green'
            },
            legend: {
              horizontal: true,
              title: 'Color'
            }
          },{
            values: {
              "US-NY": 'blue',
              "US-FL": 'blue'
            },
            attribute: 'fill'
          },{
            scale: {
              redGreen: 'assets/bg-red-green.png',
              yellowBlue: 'assets/bg-yellow-blue.png'
            },
            values: {
              "US-TX": 'redGreen',
              "US-CA": 'yellowBlue'
            },
            attribute: 'fill',
            legend: {
              horizontal: true,
              cssClass: 'jvectormap-legend-bg',
              title: 'Pattern',
              labelRender: function(v){
                return {
                  redGreen: 'Low',
                  yellowBlue: 'High'
                }[v];
              }
            }
          }]
        },
        regionsSelectable: true,
        markersSelectable: true,
        markersSelectableOne: true,
        selectedRegions: JSON.parse( window.localStorage.getItem('jvectormap-selected-regions') || '[]' ),
        selectedMarkers: JSON.parse( window.localStorage.getItem('jvectormap-selected-markers') || '[]' ),

        onMarkerTipShow: function(event, tip, index){
          tip.html(tip.html()+' (modified marker)');
        },
        onMarkerOver: function(event, index){
          console.log('marker-over', index);
        },
        onMarkerOut: function(event, index){
          console.log('marker-out', index);
        },
        onMarkerClick: function(event, index){
          console.log('marker-click', index);
        },
        onMarkerSelected: function(event, index, isSelected, selectedMarkers){
          console.log('marker-select', index, isSelected, selectedMarkers);
          if (window.localStorage) {
            window.localStorage.setItem(
              'jvectormap-selected-markers',
              JSON.stringify(selectedMarkers)
            );
          }
        },

        onRegionTipShow: function(event, tip, code){
          tip.html(tip.html()+' (modified)');
        },
        onRegionOver: function(event, code){
          console.log('region-over', code, map.getRegionName(code));
        },
        onRegionOut: function(event, code){
          console.log('region-out', code);
        },
        onRegionClick: function(event, code){
          console.log('region-click', code);
        },
        onRegionSelected: function(event, code, isSelected, selectedRegions){
          console.log('region-select', code, isSelected, selectedRegions);
          if (window.localStorage) {
            window.localStorage.setItem(
              'jvectormap-selected-regions',
              JSON.stringify(selectedRegions)
            );
          }
        },
        onViewportChange: function(e, scale, transX, transY){
            console.log('viewportChange', scale, transX, transY);
        }
      });

      $('.list-markers :checkbox').change(function(){
        var index = $(this).closest('li').attr('data-marker-index');

        if ($(this).prop('checked')) {
          map.addMarker( index, markers[index], [values1[index], values2[index], values3[index]] );
        } else {
          map.removeMarkers( [index] );
        }
      });
      $('.button-add-all').click(function(){
        $('.list-markers :checkbox').prop('checked', true);
        map.addMarkers(markers, [values1, values2, values3]);
      });
      $('.button-remove-all').click(function(){
        $('.list-markers :checkbox').prop('checked', false);
        map.removeAllMarkers();
      });
      $('.button-clear-selected-regions').click(function(){
        map.clearSelectedRegions();
      });
      $('.button-clear-selected-markers').click(function(){
        map.clearSelectedMarkers();
      });
      $('.button-remove-map').click(function(){
        map.remove();
      });
      $('.button-change-values').click(function(){
        map.series.regions[1].clear();
        map.series.regions[1].setValues({
          "US-TX": "black",
          "US-CA": "black"
        });
      });
      $('.button-reset-map').click(function(){
        map.reset();
      });
    });
  </script>
</head>
<body>
  <div class="map" style="width: 800px; height: 500px"></div>
  <ul class="list-markers">
    <li data-marker-index="0"><label><input checked type="checkbox"/> Marker 1</label></li>
    <li data-marker-index="1"><label><input checked type="checkbox"/> Marker 2</label></li>
    <li data-marker-index="2"><label><input checked type="checkbox"/> Marker 3</label></li>
    <li data-marker-index="3"><label><input checked type="checkbox"/> Marker 4</label></li>
    <li data-marker-index="4"><label><input checked type="checkbox"/> Marker 5</label></li>
    <li data-marker-index="5"><label><input checked type="checkbox"/> Marker 6</label></li>
  </ul>
  <input type="button" value="Add all" class="button-add-all"/>
  <input type="button" value="Remove all" class="button-remove-all"/>
  &nbsp;&nbsp;&nbsp;
  <input type="button" value="Clear selected regions" class="button-clear-selected-regions"/>
  <input type="button" value="Clear selected markers" class="button-clear-selected-markers"/>
  &nbsp;&nbsp;&nbsp;
  <input type="button" value="Remove map" class="button-remove-map"/>
  &nbsp;&nbsp;&nbsp;
  <input type="button" value="Change values" class="button-change-values"/>
  &nbsp;&nbsp;&nbsp;
  <input type="button" value="Reset map" class="button-reset-map"/>
</body>
</html>