We Keep Coding

I'm struggling to import remotely hosted GeoJSON data via URL as a layer in Leaflet (HTML, JS)

I can't get GeoJSON data from a URL to work properly.
I'm trying to create an overlay layer in Leaflet consisting of US counties, and this is what I have done to do so:
var overlays = {
"Counties": L.geoJson('https://github.com/zeke/us-counties/blob/master/county.geo.json?raw=true', {async: true}).on('loaded', function(e) {map.fitBounds(e.target.getBounds());
}
)}
// This adds all layers together.
L.control.layers(baseMaps, overlays).addTo(map);
But it doesn't work at all. The JS console error Looks like this:
Is there any good way to get this working?

L.GeoJSON don't support request, you need to first to load your data manually or use a library like Leaflet.Ajax
var overlays = {
"Counties": L.geoJson.ajax('https://github.com/zeke/us-counties/blob/master/county.geo.json?raw=true').on('data:loaded', function(e) {map.fitBounds(e.target.getBounds());
}
)}

OpenLayers Filters for GeoJSON Source

I'm using OpenLayers (v6.3.1) with ol-ext extensions (to handle animated clustering) on a simple html/javascript/jquery project.
I succeeded displaying data from a geojson with a vector source passed to cluster source then added to a layer.
My goal is now to add/remove filters (by user interaction) to the geojson fields displayed on the map.
The code of vector/cluster sources and the cluster layer :
const clusterSource = new ol.source.Cluster({
distance: 40,
source: new ol.source.Vector({
url: `${URL_PATH}`,
format: new ol.format.GeoJSON(),
})
});
const clusterLayer = new ol.layer.AnimatedCluster({
name: 'Cluster',
source: clusterSource,
animationDuration: $("#animatecluster").prop('checked') ? 700 : 0,
// Cluster style
style: getStyle
});
I'm stuck on the filtering part : should I filter the features array and replace the source of my layer? Or is there a easier way to do it with Openlayers?
Thanks for any help!

IF not working after ELSE has been accepted (potential Leaflet.Draw issue)

I have a Leaflet map that uses the Leaflet.Draw library and allows a user to draw a geoJSON polygon and download the file (after it has been converted to .KML format). I had an issue where the download function would still run if no polygon was drawn, so I tried to fix that using an IF/ELSE statement that looks at the length of the geoJSON file.
document.getElementById('export').onclick = function(e) {
//extract GeoJson from featureGroup
var data = featureGroup.toGeoJSON();
console.log(data.features.length);
if (data.features.length === 0) {
alert('Your drawn feature is not valid!');
} else {
//convert to KML
var kml = tokml(data);
//convert to dataURL format
var convertedData = 'application/vnd.google-earth.kml+xml;charset=utf-8,' +
encodeURIComponent(kml);
//create export
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download','3DroneMapping_AOI.kml');
}
}
At first the above code seemed to work well. Clicking the download button without drawing a polygon feature would log 0 to the console and the alert would appear. Where as drawing a polygon feature and clicking the download button would log 1 to the console and the file would download.
The issue happens after drawing a polygon feature, downloading it and the deleting it with the delete button:
document.getElementById('delete').onclick = function(e) {
featureGroup.clearLayers();
}
Now that the polygon feature has been deleted, the download button should trigger the alert again. But what happens is that although the console still logs 0 and the alert is triggered, after clicking "ok" on the alert the ELSE section of the code still runs and the same geoJSON file that was apparently "cleared" still downloads (contains the same coordinates).
Is this a simple mistake in my code, or is it something related to the Leaflet.Draw library?
Thanks

In your else part, you set attributes href and download. Consider removing them in the if part or they'll remain there forever and since the first download every new click would trigger the download

PNG as KML layer on google maps overlapping everything

I'm using KMZ file, that has png file as layer, plus kml file itself with coordinates. However i'm having issue with PNG overlapping an actual map (city names, country names, etc), everything is behind KML layer.
Code:
let kml = new google.maps.KmlLayer('https://***.com/2g.kmz?dummy=' + (new Date()).getTime(), {suppressInfoWindows: true, preserveViewport: false})
this.kml.setMap(this.map)
Fiddle: http://jsfiddle.net/webcoderkz/x7jgr9n4/6/

Solved this:
img[src*="kmz"] {
opacity: 0.5;
}

my .json file is not accessible from d3.json

Here is my script to create a line chart. The json file is not accessible from the d3.json () command. I am new to d3.js in general and I am using Dimple.js for plotting charts picking data from back end. I have also listed the json content below from my file.
var svg = dimple.newSvg("#charts", 800, 600);
d3.json("C:/dev/reports/data1.json", function (jsonfile) {
// Create a new chart object based on this data and svg
var myChart = new dimple.chart(svg, data);
myChart.addCategoryAxis("x", "Word");
myChart.addMeasureAxis("y", "Awesomeness");
myChart.addSeries(null, dimple.plot.line);
myChart.draw();
});
JSON content:
[
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
]

If you're using Chrome, it may prevent you from opening the file properly because of cross domain security restrictions. Try Firefox to see if that's the case (it will probably let you load the file correctly).
If that is the problem, you will want to install a local web server like WAMP (if you're running Windows) or follow instructions on the wiki page here.
It may help to use relative addressing to locate your data1.json file. if its in the same directory as your html file, just use;
d3.json("data1.json", function (jsonfile) {