Leaflet Map Code Copied From View-source: Not Working

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 m

Solution 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