JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <title>Mapbox Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <!-- Mapbox JS GL API Library -->
    <!--
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
    -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />


    <!-- Mapbox JS GL Geocoding API Library -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.2/mapbox-gl-geocoder.min.js'></script>
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.2/mapbox-gl-geocoder.css' type='text/css' />
  </head>

  <body>
    <div id='map'></div>
    <script>
      var map;
      
      map = new MBMap('United Kingdom', 'country');
      //map = new MBMap('CB3 0RB', 'postcode');
      map.setPOI('london eye, london, uk', 'address');
    </script>
  </body>

</html>

CSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
}

#map {
  display: block;
  width: 95%;
  height: 90%;
  margin: 20px;
  border: 3px solid #eee;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.marker {
  background-image: url('https://pintpicker.co.uk/newdesign/design/images/pp-logo-sml.png');
  background-size: cover;
  width: 25px;
  height: 25px;
  border: 0;
  cursor: pointer;
}

JavaScript

var mbMap;

class mapboxMap {

  constructor(target = null, type = null) {

    if (target !== null) {
      this.mapZoom = 6;
      this.mapboxAccessToken = 'pk.eyJ1IjoicmFhZCIsImEiOiJjanNvbDM3ZzAwbHU1NDRqdmx3eHJoaTk2In0.rbYFCJ-zYFcfi8tkA8U1ng';
      this.mapboxGCstart = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
      this.GCTarget = [target,  type];
      this.mapboxGCend = '&autocomplete=true&access_token=' + this.mapboxAccessToken;
      this.geocodeURL = this.mapboxGCstart + this.GCTarget + this.mapboxGCend;

      $.getJSON(this.geocodeURL)
        .done(function(data) {
          initMap(data, this.mapZoom);
        });
    } else {
      var dataJSON = '{"features":[{"center":[0,0]}]}';
      var data = JSON.parse(dataJSON);
      initMap(data, 0);
    }
  }

  get mapZoom() {
    return this._mapZoom;
  }
  
  set mapZoom(zoom) {
    this._mapZoom = zoom;
  }
  
  get mapboxGCstart() {
    return this._mapboxGCstart;
  }

  set mapboxGCstart(gcstart) {
    this._mapboxGCstart = gcstart;
  }

  get mapboxGCend() {
    return this._mapboxGCend;
  }

  set mapboxGCend(gcend) {
    this._mapboxGCend = gcend;
  }

  get GCTarget() {
    return this._GCTarget;
  }

  set GCTarget(arrTargetType) {
    this._GCTarget = encodeURIComponent(arrTargetType[0]) + '.json?country=gb&types=' + arrTargetType[1];
  }

  makeGCURL() {
   return this._mapboxGCstart + this._GCTarget + this._mapboxGCend;
  }

  setPOI(target, type, fly=false) {
    this.mapboxAccessToken = 'pk.eyJ1IjoicmFhZCIsImEiOiJjanNvbDM3ZzAwbHU1NDRqdmx3eHJoaTk2In0.rbYFCJ-zYFcfi8tkA8U1ng';
    this.mapboxGCstart = 'https://api.mapbox.com/geocoding/v5/mapbox.places/';
    this.mapboxGCend = '&autocomplete=true&access_token=' + this.mapboxAccessToken;
    this.GCTarget = [target, type];
    var poiURL = this.makeGCURL();

    $.getJSON(poiURL)
      .done(function(data) {
        showPOI(data, null, fly);
      });
  }

}


class MBMap {

  constructor(target = null, type = null) {

    if...