├── icons ├── favicon.png ├── twitter.svg ├── slack.svg ├── mail.svg └── github.svg ├── README.md ├── index.html ├── styles.css ├── script.js └── logo.svg /icons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamtrask/Team-Map/HEAD/icons/favicon.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OpenMined Team Members Map 2 | 3 | Check it out here - [MAP!](https://openmined.github.io/Team-Map/) 4 | 5 | If you would like to be included on this map, please complete the [New Contributors Survey](https://goo.gl/forms/86y61YQx6bIAI8TF3). 6 | 7 | If you would like any of your info window's information to be changed, please send a direct message via Slack to 4mber. 8 | 9 | ## How to Help 10 | 11 | There are a number of ways this map can be improved upon, and as always, it is a work in progress. If you would like to help make it better, please check out the existing issues (or submit any of your own) and submit a pull request that references any issues that it may resolve. 12 | 13 | #### This map is based on the MapBox API, and also incorporates the Google Timezone and GitHub APIs. 14 | -------------------------------------------------------------------------------- /icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OpenMined Team Map 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | 18 |

19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /icons/slack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | h1, h2, h3, h4 { 6 | letter-spacing: 1px; 7 | margin: 0; 8 | line-height: 1.0; 9 | } 10 | h1, h2, h3 { 11 | font-family: "PT Mono", monospace; 12 | } 13 | h1 { 14 | font-size: 2rem; 15 | margin-left: -1px; 16 | } 17 | h2 { 18 | font-size: 1.5rem; 19 | } 20 | h3 { 21 | font-size: 1rem; 22 | } 23 | h4 { 24 | font-size: 0.8rem; 25 | color: #969696; 26 | } 27 | h4, p, .active, .view-none, .view-all { 28 | font-family: "Overpass", sans-serif; 29 | } 30 | p { 31 | font-size: 1.3em; 32 | margin: 0 0 20px 0; 33 | } 34 | a { 35 | text-decoration: none; 36 | } 37 | #filter-container { 38 | bottom: 0; 39 | position: fixed; 40 | z-index: 1; 41 | padding: 30px 50px 15px 50px; 42 | background-color: rgba(255, 255, 255, 0.75); 43 | margin: 10px; 44 | } 45 | #map { 46 | z-index: 0; 47 | position: absolute; 48 | top: 0; 49 | width: 100%; 50 | height: 100%; 51 | } 52 | .active, .view-none, .view-all { 53 | text-decoration: none; 54 | padding: 5px 10px; 55 | color: #fff; 56 | margin: 0 10px 15px 12px; 57 | border-radius: 3px; 58 | display: inline-block; 59 | } 60 | .active { 61 | background: #767ea1; /* For browsers that do not support gradients */ 62 | background: -webkit-linear-gradient(left top, #767ea1, #62a4ae); /* For Safari 5.1 to 6.0 */ 63 | background: -o-linear-gradient(bottom right, #767ea1, #62a4ae); /* For Opera 11.1 to 12.0 */ 64 | background: -moz-linear-gradient(bottom right, #767ea1, #62a4ae); /* For Firefox 3.6 to 15 */ 65 | background: linear-gradient(to bottom right, #767ea1, #62a4ae); /* Standard syntax */ 66 | } 67 | .active:hover { 68 | background: #5cb5a4; /* For browsers that do not support gradients */ 69 | background: -webkit-linear-gradient(left top, #5cb5a4, #9bcc9a); /* For Safari 5.1 to 6.0 */ 70 | background: -o-linear-gradient(bottom right, #5cb5a4, #9bcc9a); /* For Opera 11.1 to 12.0 */ 71 | background: -moz-linear-gradient(bottom right, #5cb5a4, #9bcc9a); /* For Firefox 3.6 to 15 */ 72 | background: linear-gradient(to bottom right, #5cb5a4, #9bcc9a); /* Standard syntax */ 73 | } 74 | .inactive { 75 | font-family: "Overpass", sans-serif; 76 | background: #969696; 77 | text-decoration: none; 78 | padding: 5px 10px; 79 | color: #fff; 80 | margin: 0 10px 15px 12px; 81 | border-radius: 3px; 82 | display: inline-block; 83 | } 84 | .view-all, .view-none { 85 | background: #C3707C; /* For browsers that do not support gradients */ 86 | background: -webkit-linear-gradient(left top, #C3707C, #EF996B); /* For Safari 5.1 to 6.0 */ 87 | background: -o-linear-gradient(bottom right, #C3707C, #EF996B); /* For Opera 11.1 to 12.0 */ 88 | background: -moz-linear-gradient(bottom right, #C3707C, #EF996B); /* For Firefox 3.6 to 15 */ 89 | background: linear-gradient(to bottom right, #C3707C, #EF996B); /* Standard syntax */ 90 | } 91 | .view-all:hover, .view-none:hover { 92 | background: #F1BF7A; /* For browsers that do not support gradients */ 93 | background: -webkit-linear-gradient(left top, #F1BF7A, #ED986C); /* For Safari 5.1 to 6.0 */ 94 | background: -o-linear-gradient(bottom right, #F1BF7A, #ED986C); /* For Opera 11.1 to 12.0 */ 95 | background: -moz-linear-gradient(bottom right, #F1BF7A, #ED986C); /* For Firefox 3.6 to 15 */ 96 | background: linear-gradient(to bottom right, #F1BF7A, #ED986C); /* Standard syntax */ 97 | } 98 | .mapboxgl-ctrl-attrib a, a.mapboxgl-ctrl-logo { 99 | background: transparent; 100 | } 101 | .mapboxgl-popup-content { 102 | width: 425px; 103 | height: 250px; 104 | overflow: scroll; 105 | padding: 28px 25px; 106 | } 107 | .mapboxgl-popup-close-button { 108 | font-size: 2rem; 109 | width: 48px; 110 | height: 48px; 111 | text-align: center; 112 | line-height: 48px; 113 | padding: 0px; 114 | } 115 | #main-logo { 116 | width: 300px; 117 | } 118 | .logo-link { 119 | background: transparent; 120 | display: inline-block; 121 | padding: 15px; 122 | margin: 0; 123 | position: fixed; 124 | z-index: 1; 125 | } 126 | .social-icon { 127 | width: 30px; 128 | margin-left: 3px; 129 | } 130 | .social-icon:hover { 131 | filter: brightness(90%); 132 | } 133 | .social-container { 134 | margin: 5px 0 15px -5px; 135 | } 136 | .website { 137 | font-family: "PT Mono", monospace; 138 | font-size: 1.4em; 139 | color: #fff; 140 | } 141 | .website-contain { 142 | border-radius: 3px; 143 | width: 110px; 144 | height: 18px; 145 | padding: 15px; 146 | text-align: center; 147 | margin-bottom: 25px; 148 | background: #767ea1; /* For browsers that do not support gradients */ 149 | background: -webkit-linear-gradient(left top, #767ea1, #62a4ae); /* For Safari 5.1 to 6.0 */ 150 | background: -o-linear-gradient(bottom right, #767ea1, #62a4ae); /* For Opera 11.1 to 12.0 */ 151 | background: -moz-linear-gradient(bottom right, #767ea1, #62a4ae); /* For Firefox 3.6 to 15 */ 152 | background: linear-gradient(to bottom right, #767ea1, #62a4ae); /* Standard syntax */ 153 | } 154 | .website-contain:hover { 155 | background: #5cb5a4; /* For browsers that do not support gradients */ 156 | background: -webkit-linear-gradient(left top, #5cb5a4, #9bcc9a); /* For Safari 5.1 to 6.0 */ 157 | background: -o-linear-gradient(bottom right, #5cb5a4, #9bcc9a); /* For Opera 11.1 to 12.0 */ 158 | background: -moz-linear-gradient(bottom right, #5cb5a4, #9bcc9a); /* For Firefox 3.6 to 15 */ 159 | background: linear-gradient(to bottom right, #5cb5a4, #9bcc9a); /* Standard syntax */ 160 | } 161 | 162 | /* Responsiveness */ 163 | @media screen and (max-width: 750px) { 164 | #filter-container { 165 | height: 20%; 166 | overflow: scroll; 167 | padding: 22px 10px 10px 10px; 168 | } 169 | .mapboxgl-popup-content { 170 | width: 80vw; 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Initializes map: 2 | mapboxgl.accessToken = 'pk.eyJ1IjoiNG1iZXIiLCJhIjoiY2o2NnQ0cTl4MmdwcDM0bndlbHJhYTFncCJ9.GahchQU-fM2Yemdup7m0tQ'; 3 | var map = new mapboxgl.Map({ 4 | container: 'map', 5 | style: 'mapbox://styles/4mber/cj69sle4h2nzn2sl82plyqb50', 6 | center: [-25.972,22.415], 7 | zoom: 1.4 8 | }); 9 | 10 | // Loads layers source: 11 | map.on('load', function() { 12 | map.addSource('source-contribute', { 13 | type: 'vector', 14 | url: 'mapbox://4mber.cjfpm0r4f1pz72xrs8kk4tkkg-2utav' 15 | }); 16 | }); 17 | 18 | // Creates repo buttons to sort layers: 19 | var toggleableLayerIds = ['Adapters', 'CampX', 'Docs', 'Grid', 'mine-ui', 'ml-agents', 'OpenMined', 'openmined-website', 'openmined-ui', 'PySonar', 'PySyft', 'Sonar', 'syft.js', 'Team-Map', 'tutorials', 'Other Contributions']; 20 | var id = ''; 21 | var link = ''; 22 | 23 | for (var i = 0; i < toggleableLayerIds.length; i++) { 24 | id = toggleableLayerIds[i]; 25 | link = document.createElement('a'); 26 | link.href = '#'; 27 | link.className = 'active'; 28 | link.textContent = id; 29 | link.onclick = function(e) { 30 | var clickedLayer = this.textContent; 31 | var visibility = map.getLayoutProperty(clickedLayer, 'visibility'); 32 | if (visibility === 'visible') { 33 | map.setLayoutProperty(clickedLayer, 'visibility', 'none'); 34 | this.className = 'inactive'; 35 | } else { 36 | this.className = 'active'; 37 | map.setLayoutProperty(clickedLayer, 'visibility', 'visible'); 38 | } 39 | }; 40 | var layers = document.getElementById('menu'); 41 | layers.appendChild(link); 42 | } 43 | 44 | // Creates View None button: 45 | var noneLink = document.createElement('a'); 46 | noneLink.href = '#'; 47 | noneLink.className = 'view-none'; 48 | noneLink.textContent = 'View None'; 49 | noneLink.onclick = function(e) { 50 | toggleableLayerIds.forEach(function(id) { 51 | map.setLayoutProperty(id, 'visibility', 'none'); 52 | if ($('#filter-container a').is(".active")) { 53 | $('#filter-container a').addClass("inactive"); 54 | } 55 | }); 56 | }; 57 | layers.appendChild(noneLink); 58 | 59 | // Creates View All button: 60 | var allLink = document.createElement('a'); 61 | allLink.href = '#'; 62 | allLink.className = 'view-all'; 63 | allLink.textContent = 'View All'; 64 | allLink.onclick = function(e) { 65 | toggleableLayerIds.forEach(function(id) { 66 | map.setLayoutProperty(id, 'visibility', 'visible'); 67 | if ($('#filter-container a').is(".inactive")) { 68 | $('#filter-container a').removeClass("inactive"); 69 | $('#filter-container a').addClass("active"); 70 | } 71 | }); 72 | }; 73 | layers.appendChild(allLink); 74 | 75 | // Creates all markers & pop up windows, including all functionality: 76 | map.on('click', function(e) { 77 | var features = map.queryRenderedFeatures(e.point, { 78 | layers: ['Other Contributions', 'Adapters', 'CampX', 'Docs', 'Grid', 'mine-ui', 'ml-agents', 'OpenMined', 'openmined-website', 'openmined-ui', 'PySonar', 'PySyft', 'Sonar', 'syft.js', 'Team-Map', 'tutorials'] 79 | }); 80 | if (!features.length) { 81 | return; 82 | } 83 | var feature = features[0]; 84 | 85 | // Looks for social media links and adds icons only if they're available: 86 | var myHTML = '

' + feature.properties.Name + ' ' + feature.properties.Surname + '

'; 87 | myHTML += feature.properties.Location + '

' + 101 | feature.properties.About + '

Domain Expertise:

' + 102 | feature.properties.DomainExpertise + '

Languages/ Frameworks:

' + 103 | feature.properties.LanguagesFrameworks + '

Familiarities:

' + 104 | feature.properties.Familiarities + '

'; 105 | if (feature.properties.WebsiteURL.length != 0) { 106 | myHTML += '

MY WEBSITE

'; 107 | } 108 | var popup = new mapboxgl.Popup({ 109 | offset: [0, -15] 110 | }) 111 | .setLngLat(feature.geometry.coordinates) 112 | .setHTML(myHTML) 113 | .setLngLat(feature.geometry.coordinates) 114 | .addTo(map); 115 | 116 | // Calculates and adds local time to each popup: 117 | var loc = feature.properties.LatPrint + ',' + feature.properties.LngPrint; // Location expressed as lat,lng tuple 118 | var targetDate = new Date(); // Current date/time of user computer 119 | var timestamp = targetDate.getTime() / 1000 + targetDate.getTimezoneOffset() * 60; // Current UTC date/time expressed as seconds since midnight, January 1, 1970 UTC 120 | var apikey = 'AIzaSyAkthwn8BINkq9EoU-mrsyXVSwHcho6E_M'; 121 | var apicall = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + loc + '×tamp=' + timestamp + '&key=' + apikey; 122 | var xhr = new XMLHttpRequest(); // create new XMLHttpRequest2 object 123 | xhr.open('GET', apicall); // open GET request 124 | xhr.onload = function() { 125 | if (xhr.status === 200) { // if Ajax request successful 126 | var output = JSON.parse(xhr.responseText); // convert returned JSON string to JSON object 127 | if (output.status == 'OK') { // if API reports everything was returned successfully 128 | var offsets = output.dstOffset * 1000 + output.rawOffset * 1000; // get DST and time zone offsets in milliseconds 129 | var localdate = new Date(timestamp * 1000 + offsets); // Date object containing current time of Location (timestamp + dstOffset + rawOffset) 130 | document.getElementById('time').innerHTML = 'Local Time: ' + localdate.toLocaleString(); 131 | } else { 132 | alert('Request failed. Returned status of ' + xhr.status); 133 | } 134 | } 135 | }; 136 | xhr.send(); // send request 137 | 138 | // Finds GitHub repos each person has contributed to and adds to popup: 139 | if (feature.properties.GitHub.length != 0) { 140 | var githubID = feature.properties.GitHub; 141 | var contributions = []; 142 | var repos = ['Adapters', 'CampX', 'Docs', 'Grid', 'mine-ui', 'ml-agents', 'OpenMined', 'openmined-website', 'openmined-ui', 'PySonar', 'PySyft', 'Sonar', 'syft.js', 'Team-Map', 'tutorials']; 143 | repos.forEach(function(repo) { 144 | var githubcall = 'https://api.github.com/repos/OpenMined/' + repo + '/contributors?client_id=ac576b085ce24d8ce500&client_secret=00110f8b95ee6bac4abd27a36d58d804695a2a19'; 145 | var git = new XMLHttpRequest(); 146 | git.open('GET', githubcall); // open Get request 147 | git.onload = function() { 148 | if (git.status === 200) { // if Ajax request successful 149 | var output = JSON.parse(git.responseText); // convert returned JSON string to JSON object 150 | console.log(output); // log output for debugging purposes 151 | function _isContains(json, value) { 152 | let contains = false; 153 | Object.keys(json).some(key => { 154 | contains = typeof json[key] === 'object' ? _isContains(json[key], value) : json[key] === value; 155 | return contains; 156 | }); 157 | return contains; 158 | } 159 | if (_isContains(output, githubID) === true) { 160 | contributions.push(' ' + repo); 161 | document.getElementById('repo-contributes').innerHTML = '

GitHub Contributions:

' + contributions + '

'; 162 | } 163 | } 164 | }; 165 | git.send(); // send request 166 | }); 167 | }; 168 | }); 169 | -------------------------------------------------------------------------------- /logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 155 | --------------------------------------------------------------------------------