leaflet marker problem

marker does not display

HTML

<link rel="stylesheet" href="cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<link rel="stylesheet" href="api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.4.0/mapbox-gl.js"></script>
<div id="map"></div>

CSS

html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 600px;
			height: 400px;
		}

JavaScript

var historicalMarkers = {
    "type": "Feature",
    "properties": {
        "popupContent": "Jeb Stuart"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [38.932090, -77.313660]
    }
};
  
  // create map and center around Mosby's
	var map = L.map('map').setView([38.932090, -77.313660], 11);

	var basemap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia3RwbW01IiwiYSI6ImNqbGZjd3M0dDBzMTUzcHF6ZGc4ZDdtaXcifQ.b3seUETi4fxj_lkGI3RmRw', {
	  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	  maxZoom: 15,
	  id: 'mapbox.streets'
	}).addTo(map);

	// gets called on each feature before adding to GeoJSON layer
	function onEachFeature(feature, layer) {
	  var popupContent = "<p>Put Title Here</p>" + feature.geometry.type;

	  if (feature.properties && feature.properties.popupContent) {
	    popupContent += feature.properties.popupContent;
	  }

	  layer.bindPopup(popupContent);
	}

	var geojsonMarkerOptions = {
	  radius: 8,
	  fillColor: "#ff7800",
	  color: "#000",
	  weight: 1,
	  opacity: 1,
	  fillOpacity: 0.8
	};

	L.geoJSON(historicalMarkers, {
	  pointToLayer: function(feature, latlng) {
	    return L.circleMarker(latlng, geojsonMarkerOptions);		
	  },
	  onEachFeature: onEachFeature
	}).addTo(map);