JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="//unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css">
<div id="company-map"></div>

CSS

#company-map {
  position: relative;
  height: 100vh;
}

JavaScript

var mapID = 'company-map',
    zoomControl = false,
    dragging = true,
    locations = [
      {
        "title": "Pasewalk",
        "latitude": "53.508275",
        "longitude": "13.998706"
      },
      {
        "title": "Torgelow",
        "latitude": "53.635439",
        "longitude": "14.005614"
      },
      {
        "title": "Strasburg",
        "latitude": "53.515988",
        "longitude": "13.745074"
      }
    ];

if( $('#' + mapID).length > 0 ) {

  var tileUrl		= 'https://api.mapbox.com/styles/v1/13grad/cjd2qb55g3mgj2roecfzfgwqu/tiles/256/{z}/{x}/{y}',
      accessToken = 'pk.eyJ1IjoiMTNncmFkIiwiYSI6ImNqZDJxMzBseDVvcWUyeGxnZWN4eXI5ODQifQ.Yxldls00-T6xeBi5S-D2jw';

  if( L.Browser.touch === true ) {
    zoomControl = true;
    dragging = false;
  }

  // init Map
  var map = L.map('company-map', {
    scrollWheelZoom: true,
    zoomControl: zoomControl,
    dragging: dragging
  });

  // set tile provider
  L.tileLayer(tileUrl + '?access_token=' + accessToken, {
    attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);


  var bounds = [];

  $(locations).each(function(){

    var company = this,
        latitude = parseFloat(this.latitude),
        longitude = parseFloat(this.longitude),
        content = '';

    content += '<h3 class="marker-popup-title">' + this.title + '</h3>';
    content += '<p class="marker-popup-address">' + this.street_number + '<br>' + this.zipcode_city + '</p>';

    L.marker([latitude, longitude]).addTo(map).bindPopup(content, {
      className: 'marker-popup'
    });

    bounds.push([latitude, longitude]);

  });

  map.fitBounds(bounds);

}