JSFiddle - React, Tailwind, and code Playground

by atifoxon

HTML

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css">
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<body>

  <script>
    function createMap(mapPlaceHolderId) {
      var OSM_MAP_TILE_SERVER_URL = 'http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png';

      var DEFAULT_MAP_CENTER = L.latLng(25.296854389343867, 51.48811340332031);
      var DEFAULT_MAP_ZOOM = 12;
      var MAP_ZOOM_MAX = 19;
      var MAP_ZOOM_SEARCH = 17;

      var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
      var osm = new L.TileLayer(osmUrl, {
        minZoom: 8,
        maxZoom: 12,
        attribution: osmAttrib
      });


      var map = L.map(mapPlaceHolderId).setView([51.505, -0.09], 13);

      map.addLayer(osm);

      return map;

    }

  </script>
  <div id="vrSubReportContainer">
    <div class="mapPopupTableContainer">
      <div class="mapPopupTableData"><b>Plate Number:</b> 009-001GL-297286, <b>Driver Name:</b> Unknown driver
        <br><b>Latitude,Longitude</b>: 25.215238,51.605439</div>

    </div>
    <div id="mapContainer" class="map-container">
      <div class="map" id="fd_map_canvas"></div>
    </div>
  </div>

  <script>
    (function() {
      createMap('fd_map_canvas');

    })();

  </script>


</body>

CSS

#fd_map_canvas {
  height: 380px;
}