SOTM Events 2017

by rasagy

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css">
<div id='map'></div>
<div id='header-box'>
<div id='header'>
  <h1>State of the Map events across the world</h1>
  <h6>Hover for more details, and click to view the official website</h6>
</div>
</div>

CSS

/*! Minimal Normalize.css | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
  padding: 0;
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
  font-size: 1.25em;
  margin: 0.1em 0;
}
h4, h5, h6 {
  font-size: 1.1em;
  margin: 0 0;
  font-weight: normal;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
#header-box {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 5px;
    text-align: center;
}
#header {
    display: inline-block;
    background: #f8f8f8;
    padding: 0.25em 1em 0.5em;
    border: 1px solid #eee;
    border-radius: 3px;
}
#header > h6 {
    font-size: 0.9em;
    font-style: italic;
    line-height: 1.2;
    margin: 0.25em;
}
.marker {
    display: block;
    border: 3px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px;
    height: 50px;
    background: #fff;
    font-size: 10px;
    line-height: 1.3;
}
.marker:after,
.marker:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.marker:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #fff;
    border-width: 5px;
    margin-top: -5px;
}
.marker:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: #ddd;
    border-width: 10px;
    margin-top: -10px;
}
.marker img {
    height: 50px;
}
.marker .details {
    display: block;
    max-width: 0px;
    height: 50px;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s;
}
.marker:hover .details {
    display: block;
    width: auto;
    max-width: 200px;
    margin-left: 10px;
    opacity: 1;
}
.marker a,
.marker a:visited,
.marker a:hover,
.marker a:active {
    text-decoration: none !important;
    color: inherit...

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoicmFzYWd5IiwiYSI6ImNqNHR0cjMyaTA3NDUzM211c2hsM3draG8ifQ.Ke3QD4Grwe1ZlDPJn37Ntg';
var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "HOT Summit 2017",
        "location": "Ottawa, Canada",
        "url": "http://summit.hotosm.org/",
        "date": "Sep 14th – Sep 15th",
        "logo": "HOT-Canada.png",
        "zoom": 19
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-75.72800, 45.40988]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "State of the Map",
        "location": "Fukushima, Japan",
        "url": "http://2017.stateofthemap.org/",
        "date": "Aug 18th – Aug 20th",
        "logo": "SOTM-Japan.svg",
        "zoom": 19
      },
      "geometry": {
        "type": "Point",
        "coordinates": [139.93473, 37.48583]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "SotM France",
        "location": "Avignon, France",
        "url": "https://openstreetmap.fr/sotmfr2017",
        "date": "Jun 2nd – Jun 4th",
        "logo": "SOTM-France.png",
        "zoom": 18
      },
      "geometry": {
        "type": "Point",
        "coordinates": [4.81901, 43.95009]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "SotM Africa",
        "location": "Kampala, Uganda",
        "url": "https://sotmafrica.org/",
        "date": "Jul 8th – Jul 10th",
        "logo": "SOTM-Uganda.png",
        "zoom": 17
      },
      "geometry": {
        "type": "Point",
        "coordinates": [32.5608, 0.3357]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "SotM Asia",
        "location": "Kathmandu, Nepal",
        "url": "http://stateofthemap.asia/",
        "date": "Sept 23rd – Sept 24th",
        "logo": "SOTM-Nepal.png",
        "zoom": 18
      },
      "geometry": {
        "type":...