Leaflet Basic

HTML

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

CSS

html, body {
    width: 100%; 
    height: 100%;
}

#leaflet-map {
  position:fixed; 
  height:calc(100vh - 15px);
  width:calc(100vw - 15px);
 }

JavaScript

var map = L.map('leaflet-map', {
    center: [40.7128, -74.0059],
    zoom: 10
})

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
      }).addTo(map)
      
var hess = {
  "type": "Feature",
  "properties": {
    "name": "Hess' Triangle"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      -74.00306,
      40.73349
    ]
  }
}

L.geoJSON(hess, {
	pointToLayer: function (feature, latlng) {
  	return L.circleMarker(latlng, {
      radius: 10,
      opacity: 0,
      fillColor: "steelblue",
      fillOpacity: 0.7
    })
	}
}).addTo(map)