JSFiddle - React, Tailwind, and code Playground

HTML

<!-- MAP -->
    <div id="map">
    </div>
<button id='load'>Click</button><br/>

CSS

#map {
    height:400px;
    width: 400px;
}

JavaScript

var map;
var feature;

function load_map() {
  
  var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© Colaboradores de <a href="http://openstreetmap.org">OpenStreetMap</a>'
  });

  var baseLayers = {
    "OpenStreetMap": osm,
  };

  // Obtain parameters from url
  var url_paramas = get_params();

  // Initialize map
  map = new L.map('map', {
    center: [12.136,-86.254],
    zoom: 14,
    layers: baseLayers[url_paramas.layers] || osm
  });

  // Adding hash for position in url
  var hash = new L.Hash(map);

  // Adding layer functionality
  var layers = L.control.activeLayers(baseLayers);
  map.addControl(layers);

}

function get_params(search) {
  var params = {};
  search = (search || window.location.search).replace('?', '').split(/&|;/);
  for (var i = 0; i < search.length; ++i) {
    var pair = search[i],
    j = pair.indexOf('='),
    key = pair.slice(0, j),
    val = pair.slice(++j);
    params[key] = decodeURIComponent(val);
  }
  return params;
}



$(document).ready(function() {

  load_map();

  $("#load").click (function() {
    $.ajax({
      type: "POST",
      url: "./data/test.geojson",
      dataType: 'json',
      success: function (response) {
          console.log(response);

          geojsonLayer = L.geoJson(response, {
            onEachFeature: function (feature, layer) {
              layer.bindPopup(feature.properties.name);
          }});

          map.addLayer(geojsonLayer);
      }
    });
  });
});