I'm currently working on creating a web map and I am having issues doing any styling with a polygon geojson file. I assume the issue is in the L.geoJSON(counties, {... section because when I replace it with counties.addTo(map) it draws just fine with the default rendering. I've been trying different things for the better part of the day and still haven't it right yet. Any thoughts?
<html>
<head>
<title>Testing Web Mapping</title>
<link rel="stylesheet" href="leaflet/leaflet.css" />
</head>
<body>
<script src="leaflet/leaflet.js"></script>
<div id="map" style="width:700px; height: 850px"></div>
<script>
var map = L.map('map',{center:[44.4340101, -90.0139754], zoom:7});
varusgs = L.tileLayer.wms("http://basemap.nationalmap.gov/ArcGIS/services/USGSImageryOnly/MapServer/WMSServer", {layers:'0', format: 'image/png', transparent: true, attribution: "USGS"}).addTo(map);
</script>
<script src="leaflet/leaflet.ajax.min.js"></script>
<script>
var counties = new L.geoJSON.ajax('GIS/Counties_geojson.geojson');
var CountiesStyle = {
"color": "#ffffff",
"fillColor": "#ffffff",
"weight": 1,
"opacity": 1,
"fillOpacity": 0
};
L.geoJSON(counties, {
style: CountiesStyle
}).addTo(map);
counties.on('data:loaded', function(){map.fitBounds(counties.getBounds())});
</script>
</body>
</html>