JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css">
<div id='map'></div>

CSS

body { 
  margin:0; 
  padding:0; 
}

#map { 
  position:absolute; 
  top:0; 
  bottom:0; 
  width:100%; 
}

.mapboxgl-marker.price-point-marker {
    top: -30px;
    cursor: default;
    z-index: 0;
}

.mapboxgl-marker {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.price-point-wrapper {
    position: relative;
    left: -50%;
    height: 28px;
    bottom: 15px;
    -webkit-transition: bottom .2s ease-out;
    transition: bottom .2s ease-out;
}

.price-point-wrapper .price-point {
    position: relative;
    bottom: 0;
    color: #30363d;
    font-weight: 700;
    font-size: 14px;
}

.price-point-wrapper .price-point:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    bottom: -32px;
    left: -webkit-calc(50% - 4px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
}

.price-point-wrapper .price-point:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fff;
    bottom: -32px;
    left: -webkit-calc(50% - 4px);
    left: calc(50% - 4px);
    box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, .1);
}

.price-point-wrapper .price-point .price-point-content {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
    background-color: #fff;
    white-space: nowrap;
    border-radius: 3px;
    z-index: 1;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .22), 
                0 1px 1px 0 rgba(44, 73, 22, .18), 
                inset 0 1px 0 0 rgba(255, 255, 255, .1);
}

.price-point-wrapper .price-point .price-point-content .price-point-price, 
.price-point-wrapper .price-point .price-point-content-back .price-point-price {
    float: left;
    padding-top: 4px;
   ...

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiYm9vbS1vZmZlciIsImEiOiJjajR2Y29ncGIwbHd3MzNvMXRkc2l6dThwIn0.BSPTNE61MAH5zJ5Vat93bw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
    center: [91.23, 56.12], // starting position [lng, lat]
    zoom: 6 // starting zoom
});

var places = {
  "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "price": "350"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [91.2356599359079, 56.1285329629292]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "price": "598"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [92.78144424137008, 56.023145682399814]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "price": "256"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [89.48055342275978, 55.51840183877431]
        }
      }
    ]
}

map.on('load', function () {

	places.features.forEach(function(feature) {
  
  	var elMarker = document.createElement("div");
        elMarker.className = "price-point-marker";
    
        var elWrap = document.createElement("div");
            elWrap.className = "price-point-wrapper",
            elMarker.appendChild(elWrap);
        
            var elPoint = document.createElement("div");
                elPoint.className = "price-point",
                elWrap.appendChild(elPoint);

                var elContent = document.createElement("div");
                    elContent.className = "price-point-content",
                    elPoint.appendChild(elContent);

                    var elPrice = document.createElement("div");
                        elPrice.className = "price-point-price",
                        elContent.appendChild(elPrice);

                        var...