Leaflet Map code copied from View-source: not working

Question

I was trying to use a ready Leaflet Map example, based here:

http://www.gistechsolutions.com/leaflet/DEMO/Select/SelectPoints3.html

It hovers all points within 150 miles from the mouse click on the map. As you can see the link on the website works perfectly. unlike to my local file.

I copied a whole code from this example into my local file and save it as a .html code. All javascript files has been deliberately copied (however, they appear as a links, so it wasn't necessary to copy them onto my hard drive.

One file, that I had to copy was BaseBallFinal.json, including the data of all placemarks provided.

I am really confused, because the file extension .html means, that there is no php code there, so everything should be transferred easily. Unfortunately I have a blank map with clear marker once click somewhere. On the contrary the map provided under the link above features everything what I need.

Could you explain me, what is wrong in this operation? Why the var url = "BaseBallFinal.json"; is not working at all?

It looks like this part of the code affect a latter sections, being unavailable and invisible.

Answer 1

After copy pasting the JSON via console's network you do not need to use jquery at all. Just import the GEOJSON like this:

import json from "./BaseBallFinal.json";

and use this code

sites = L.geoJson(json, {
  pointToLayer: function(feature, latlng) {
    return L.circleMarker(latlng, {
      radius: 4, //expressed in pixels circle size
      color: "red",
      stroke: true,
      weight: 7, //outline width  increased width to look like a filled circle.
      fillOpcaity: 1
    });
  }
});

instead of

var promise = $.getJSON(url);
    promise.then(function(data) {

        sites = L.geoJson(data, {

            pointToLayer: function(feature, latlng) {
                return L.circleMarker(latlng, {
                radius: 4, //expressed in pixels circle size
                color: "red", 
                stroke: true,
                weight: 7,      //outline width  increased width to look like a filled circle.
                fillOpcaity: 1
                });
                }
        });
   ...
}

The rest of code remains pretty much the same. I used es6. Just for your notice I downloaded and tested it locally and it works as expected.

Demo