Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"

m
Line 1: Line 1:
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
−
 
 
<html>
 
<html>
  
 
<head>
 
<head>
−
        <script src="https://www.amcharts.com/lib/3/ammap.js"></script>
 
−
    <script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
 
−
    <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
 
−
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
 
−
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
 
 
     <style>
 
     <style>
−
         #chartdiv {
+
         .full-masthead {
 
             width: 100%;
 
             width: 100%;
−
            height: 500px;
 
 
         }
 
         }
  
−
         .map-marker {
+
         .full-masthead img {
−
             /* adjusting for the marker dimensions
+
             width: 100%;
−
    so that it is centered on coordinates */
+
−
            margin-left: -8px;
+
−
            margin-top: -8px;
+
 
         }
 
         }
  
−
         .map-marker.map-clickable {
+
         #collabs {
−
             cursor: pointer;
+
             width: 100%;
 +
            height: auto;
 +
            background: #70c27c;
 +
            z-index: 1;
 +
            display: block;
 +
            position: relative;
 
         }
 
         }
  
−
         .pulse {
+
         #meetings {
−
             width: 10px;
+
             width: 100%;
−
             height: 10px;
+
             height: auto;
−
             border: 5px solid #f7f14c;
+
             background: #2a4081;
−
             -webkit-border-radius: 30px;
+
             z-index: 1;
−
             -moz-border-radius: 30px;
+
             display: block;
−
            border-radius: 30px;
+
             position: relative;
−
            background-color: #716f42;
+
−
            z-index: 10;
+
−
             position: absolute;
+
 
         }
 
         }
  
−
         .map-marker .dot {
+
         .collab-container {
−
             border: 10px solid #fff601;
+
             width: 90%;
−
            background: transparent;
+
             height: auto;
−
            -webkit-border-radius: 60px;
+
             left: 5%;
−
            -moz-border-radius: 60px;
+
             top: 5%;
−
            border-radius: 60px;
+
             background: black;
−
             height: 50px;
+
             position: relative;
−
             width: 50px;
+
             display: flex;
−
             -webkit-animation: pulse 3s ease-out;
+
−
             -moz-animation: pulse 3s ease-out;
+
−
            animation: pulse 3s ease-out;
+
−
            -webkit-animation-iteration-count: infinite;
+
−
            -moz-animation-iteration-count: infinite;
+
−
            animation-iteration-count: infinite;
+
−
             position: absolute;
+
−
            top: -20px;
+
−
            left: -20px;
+
−
            z-index: 1;
+
−
             opacity: 0;
+
 
         }
 
         }
  
−
         @-moz-keyframes pulse {
+
         .container-left {
−
             0% {
+
             margin: 1.5% 0 1.5% 1.5%;
−
                -moz-transform: scale(0);
+
            background: white;
−
                opacity: 0.0;
+
            display: flex;
−
             }
+
             width: 33.33%;
 +
        }
  
−
            25% {
+
        .container-center {
−
                -moz-transform: scale(0);
+
            margin: 1.5% 0 1.5% 0;
−
                opacity: 0.1;
+
            background: white;
−
             }
+
             display: inline-block;
 +
            width: 33.33%;
 +
        }
  
−
            50% {
+
        .container-right {
−
                -moz-transform: scale(0.1);
+
            margin: 1.5% 1.5% 1.5% 0;
−
                opacity: 0.3;
+
            background: white;
−
             }
+
             display: flex;
 +
            width: 33.33%;
 +
        }
  
−
            75% {
+
        .column-container {
−
                -moz-transform: scale(0.5);
+
            width: 50%;
−
                opacity: 0.5;
+
        }
−
            }
+
  
−
             100% {
+
        .team-logo {
−
                -moz-transform: scale(1);
+
             width: 90%;
−
                opacity: 0.0;
+
            height: 120px;
−
             }
+
            background: blue;
 +
             margin: 10px 5%;
 
         }
 
         }
  
−
         @-webkit-keyframes "pulse" {
+
         .tec-logo {
−
             0% {
+
             width: 100%;
−
                -webkit-transform: scale(0);
+
            height: 90%;
−
                opacity: 0.0;
+
            margin: 5% 0;
−
             }
+
             background: blue;
 +
        }
  
−
            25% {
+
        .collab-info {
−
                -webkit-transform: scale(0);
+
            width: 80%;
−
                opacity: 0.1;
+
            height;
−
             }
+
             500px;
−
 
+
             left: 10%;
−
             50% {
+
            margin: 10% 0;
−
                -webkit-transform: scale(0.1);
+
            background: white;
−
                opacity: 0.3;
+
             position: relative;
−
             }
+
            display: inline-block;
−
 
+
             z-index: 2;
−
            75% {
+
−
                -webkit-transform: scale(0.5);
+
−
                opacity: 0.5;
+
−
             }
+
−
 
+
−
            100% {
+
−
                -webkit-transform: scale(1);
+
−
                opacity: 0.0;
+
−
            }
+
 
         }
 
         }
 
     </style>
 
     </style>
−
    <script>
+
</head>
−
        /**
+
−
* This example uses pulsating circles CSS by Kevin Urrutia
+
−
* http://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle
+
−
*/
+
  
−
var map = AmCharts.makeChart( "chartdiv", {
+
<body>
−
  "type": "map",
+
    <header class="full-masthead">
−
  "theme": "light",
+
−
  "projection": "miller",
+
  
−
  "imagesSettings": {
+
     </header>
−
     "rollOverColor": "#089282",
+
−
    "rollOverScale": 3,
+
−
    "selectedScale": 3,
+
−
    "selectedColor": "#089282",
+
−
    "color": "#13564e"
+
−
  },
+
  
−
  "areasSettings": {
+
     <section id="collabs">
−
     "unlistedAreasColor": "#15A892"
+
        <div class="collab-container">
−
  },
+
            <div class="container-left">
−
 
+
                <div class="column-container">
−
  "dataProvider": {
+
                    <div class="team-logo">
−
    "map": "worldLow",
+
                    </div>
−
    "images": [ {
+
                    <div class="team-logo">
−
      "zoomLevel": 5,
+
                    </div>
−
      "scale": 0.5,
+
                    <div class="team-logo">
−
      "title": "Brussels",
+
                    </div>
−
      "latitude": 50.8371,
+
                </div>
−
      "longitude": 4.3676
+
                <div class="column-container">
−
    }, {
+
                    <div class="team-logo">
−
      "zoomLevel": 5,
+
                    </div>
−
      "scale": 0.5,
+
                    <div class="team-logo">
−
      "title": "Copenhagen",
+
                    </div>
−
      "latitude": 55.6763,
+
                    <div class="team-logo">
−
      "longitude": 12.5681
+
                    </div>
−
    }, {
+
                </div>
−
      "zoomLevel": 5,
+
            </div>
−
      "scale": 0.5,
+
            <div class="container-center">
−
      "title": "Paris",
+
                <div class="tec-logo">
−
      "latitude": 48.8567,
+
                </div>
−
      "longitude": 2.3510
+
            </div>
−
    }, {
+
            <div class="container-right">
−
      "zoomLevel": 5,
+
                <div class="column-container">
−
      "scale": 0.5,
+
                    <div class="team-logo">
−
      "title": "Reykjavik",
+
                    </div>
−
      "latitude": 64.1353,
+
                    <div class="team-logo">
−
      "longitude": -21.8952
+
                    </div>
−
    }, {
+
                    <div class="team-logo">
−
      "zoomLevel": 5,
+
                    </div>
−
      "scale": 0.5,
+
                </div>
−
      "title": "Moscow",
+
                <div class="column-container">
−
      "latitude": 55.7558,
+
                    <div class="team-logo">
−
      "longitude": 37.6176
+
                    </div>
−
    }, {
+
                    <div class="team-logo">
−
      "zoomLevel": 5,
+
                    </div>
−
      "scale": 0.5,
+
                    <div class="team-logo">
−
      "title": "Madrid",
+
                    </div>
−
      "latitude": 40.4167,
+
                </div>
−
      "longitude": -3.7033
+
            </div>
−
    }, {
+
        </div>
−
      "zoomLevel": 5,
+
     </section>
−
      "scale": 0.5,
+
−
      "title": "London",
+
−
      "latitude": 51.5002,
+
−
      "longitude": -0.1262,
+
−
      "url": "http://www.google.co.uk"
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Peking",
+
−
      "latitude": 39.9056,
+
−
      "longitude": 116.3958
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "New Delhi",
+
−
      "latitude": 28.6353,
+
−
      "longitude": 77.2250
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Tokyo",
+
−
      "latitude": 35.6785,
+
−
      "longitude": 139.6823,
+
−
      "url": "http://www.google.co.jp"
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Ankara",
+
−
      "latitude": 39.9439,
+
−
      "longitude": 32.8560
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Buenos Aires",
+
−
      "latitude": -34.6118,
+
−
      "longitude": -58.4173
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Brasilia",
+
−
      "latitude": -15.7801,
+
−
      "longitude": -47.9292
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Ottawa",
+
−
      "latitude": 45.4235,
+
−
      "longitude": -75.6979
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Washington",
+
−
      "latitude": 38.8921,
+
−
      "longitude": -77.0241
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Kinshasa",
+
−
      "latitude": -4.3369,
+
−
      "longitude": 15.3271
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Cairo",
+
−
      "latitude": 30.0571,
+
−
      "longitude": 31.2272
+
−
    }, {
+
−
      "zoomLevel": 5,
+
−
      "scale": 0.5,
+
−
      "title": "Pretoria",
+
−
      "latitude": -25.7463,
+
−
      "longitude": 28.1876
+
−
    } ]
+
−
  }
+
−
} );
+
−
 
+
−
// add events to recalculate map position when the map is moved or zoomed
+
−
map.addListener( "positionChanged", updateCustomMarkers );
+
−
 
+
−
// this function will take current images on the map and create HTML elements for them
+
−
function updateCustomMarkers( event ) {
+
−
  // get map object
+
−
  var map = event.chart;
+
−
 
+
−
  // go through all of the images
+
−
  for ( var x in map.dataProvider.images ) {
+
−
    // get MapImage object
+
−
    var image = map.dataProvider.images[ x ];
+
−
 
+
−
    // check if it has corresponding HTML element
+
−
    if ( 'undefined' == typeof image.externalElement )
+
−
      image.externalElement = createCustomMarker( image );
+
−
 
+
−
    // reposition the element accoridng to coordinates
+
−
    var xy = map.coordinatesToStageXY( image.longitude, image.latitude );
+
−
    image.externalElement.style.top = xy.y + 'px';
+
−
    image.externalElement.style.left = xy.x + 'px';
+
−
  }
+
−
}
+
−
 
+
−
// this function creates and returns a new marker element
+
−
function createCustomMarker( image ) {
+
−
  // create holder
+
−
  var holder = document.createElement( 'div' );
+
−
  holder.className = 'map-marker';
+
−
  holder.title = image.title;
+
−
  holder.style.position = 'absolute';
+
−
 
+
−
  // maybe add a link to it?
+
−
  if ( undefined != image.url ) {
+
−
    holder.onclick = function() {
+
−
      window.location.href = image.url;
+
−
    };
+
−
    holder.className += ' map-clickable';
+
−
  }
+
−
 
+
−
  // create dot
+
−
  var dot = document.createElement( 'div' );
+
−
  dot.className = 'dot';
+
−
  holder.appendChild( dot );
+
−
 
+
−
  // create pulse
+
−
  var pulse = document.createElement( 'div' );
+
−
  pulse.className = 'pulse';
+
−
  holder.appendChild( pulse );
+
−
 
+
−
  // append the marker to the map container
+
−
  image.chart.chartDiv.appendChild( holder );
+
−
 
+
−
  return holder;
+
−
}
+
−
   
+
−
    </script>
+
−
</head>
+
−
 
+
−
<body>
+
−
     <div id="chartdiv"></div>
+
  
 +
    <section id="meetings">
 +
        <div class="collab-container">
 +
        </div>
 +
        <div class="collab-info">
 +
        </div>
 +
    </section>
 
</body>
 
</body>
  
 
</html>
 
</html>
−
 
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}

Revision as of 05:56, 26 September 2018

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors