quiz globe component sample

by kordarei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.1.0/mapbox-gl.js"></script>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <map-component></map-component>
    </div>

    <template id="mapComponent">
      <div id="map"></div>  
    </template>
  </body>

</html>

SCSS

#app {
  height: 100vh;
  #map {
    min-height: 100vh;
    .mapboxgl-ctrl-attrib-inner {
      display: none;
    }
  }
}

.marker {
  background-image: url('https://pngimage.net/wp-content/uploads/2018/06/map-marker-png.png');
  background-size: cover;
  width: 50px;
  position: relative;
  top: -50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

JavaScript

let MapComponent = Vue.component('map-component', {
  template: '#mapComponent',
  mounted() {
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleDk4OSIsImEiOiJjandzeHdmdjUxeml2NDlvNjRieW4zendlIn0.HR0QsMRdbgYr_i99YxiSCQ';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/alex989/cjwt18jxu1cfc1cpo8tnvmeo2',
      center: [
        0,
        0
      ],
      zoom: 0.5,
      pitch: 20, // pitch in degrees
      bearing: 0, // bearing in degrees
      tileLayer: {
        // this map option disables world wrapping. by default, it is false.
        continuousWorld: false,
        // this option disables loading tiles outside of the world bounds.
        noWrap: true
      }
    });




    map.on('load', function() {
      map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": {
          "type": "geojson",
          "data": {
            "type": "FeatureCollection",
            "features": [{
              "type": "Feature",
              "geometry": {
                "type": "Point",
                "coordinates": [-100.166666, 40.166666]
              },
              "properties": {
                "title": "Beaver",
                "icon": "car"
              }
            }, {
              "type": "Feature",
              "geometry": {
                "type": "Point",
                "coordinates": [-105.750596, 55.585901]
              },
              "properties": {
                "title": "Moose",
                "icon": "beer"
              }
            }, {
              "type": "Feature",
              "geometry": {
                "type": "Point",
                "coordinates": [
                  18.423300, -13.918861
                ]
              },
              "properties": {
                "title": "Lion",
                "icon": "beer"
              }
            }, {
              "type": "Feature",
              "geometry": {
                "type": "Point",
               ...