OpenStreet map not rendering correctly

Question

I am new to openstreetmap.Ihave included the code.The picture i get is

I have used leaflet.js.

I am very much new to open street map.Please help me.I am very much fond of openstreetmap. I want to add a part of map with latitude and longitude position

<div id="map" class="map">
  <script src="js/lightbox-plus-jquery.min.js"></script>

  <script src="js/lightbox.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

  <script src="https://www.openlayers.org/api/OpenLayers.js"></script>

  <script src="js/leaflet.js"></script>

  <script>
    // initialize the map
    var map = L.map("map").setView(new L.LatLng(76.6710662, 8.8668519), 13);

    // load a tile layer
    L.tileLayer("https://tiles.mapc.org/basemap/{z}/{x}/{y}.png", {
      attribution:
        'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 9,
    }).addTo(map);
  </script>
</div>