Loading GeoJSON data to Leaflet overlay?

Question

I am trying to get GeoJSON data from an API URL to an overlay.

Code;

// - GET GEOJSON DATA WITH AJAX TO OVERLAY REGION - //
// Get the data
var regions = $.ajax({
    url:"https://public.opendatasoft.com/api/records/1.0/search/?dataset=sverige-lan-counties-of-sweden&q=&lang=en&rows=37&start=0&facet=id&facet=lan_namn&facet=geo_point_2d",
    dataType: "json",
    success: console.log("Data successfully loaded!"),
    error: function (xhr) {
        alert(xhr.statusText)
    }
})

$.when(regions).done(function() {
    var regions = document.getElementById('lan_namn');
    L.geoJSON(regions, {
        pointToLayer: function (latlng) {
            return L.circleMarkers(latlng, {
                radius:6,
                opacity: .8
            })            
            .bindPopup("<p><b> " + records.fields.lan-namn + "</b></p>");
        }
    })        
});
regions.addLayer(regions);

{
  "nhits": 21,
  "parameters": {},
  "records": [
{
  "datasetid": "sverige-lan-counties-of-sweden",
  "recordid": "2bf8cfbfbd622b8d44987da4a8fdc5f957d2ed01",
  "fields": {
  "geo_shape": {},
  "id": "08",
  "lan_namn": "Kalmar län",
  "geo_point_2d": [
    57.2009990015,
    16.1929043382
  ]
},
"geometry": {
  "type": "Point",
  "coordinates": [
    16.1929043382,
    57.2009990015
  ]
},
"record_timestamp": "2019-07-15T12:39:19.034000+00:00"
},
{
  "datasetid": "sverige-lan-counties-of-sweden",
  "recordid": "b55c4a362b22739db2cdc4896ce10d1be93feb7c",
  "fields": {
    "geo_shape": {
      "type": "MultiPolygon",
      "coordinates": [
      [
        [
          [
            15.401945130895863,
            62.00965766023548
          ]
      ............

Answer 1

Your data are not in the correct geojson format, so you have to parse it by your self:

var fg = L.featureGroup().addTo(map);
fetch("https://public.opendatasoft.com/api/records/1.0/search/?dataset=sverige-lan-counties-of-sweden&q=&lang=en&rows=37&start=0&facet=id&facet=lan_namn&facet=geo_point_2d%22")
      .then(response => response.json())
      .then(data =>{
        data.records.forEach((d)=>{
          var geojson = d.fields.geo_shape;
          console.log(geojson);
          var layer = L.GeoJSON.geometryToLayer(geojson);
          fg.addLayer(layer);


          var point = L.GeoJSON.coordsToLatLng(d.geometry.coordinates);
          var circle = L.circleMarker(point,{
            radius:6,
            opacity: .8
          }).bindPopup("<p><b> " + d.fields.lan_namn + "</b></p>");
          fg.addLayer(circle);
        });
        map.fitBounds(fg.getBounds())
      })

Answer 2

There are at least five reasons why your code cannot work:

1. API you are using to get data for GeoJSON layer does return JSON data, but this data does not have GeoJSON structure (see https://geojson.org/). To get required GeoJSON data you have to add parameter format=geojson to your API.
2. With var regions = document.getElementById('lan_namn'); you assign DOM element to regions and then use this as input to creating GeoJSON layer. That makes no sense, input has to be GeoJSON object.
3. Your definition of pointToLayer function is wrong. It should have two paramters, first is point feature and second point coordinates.
4. In your popup definition you are using records.fields.lan-namn, which does not exist.
5. Statement regions.addLayer(regions); makes no sense, you cannot add something to itself.

Below is code that works:

var regions = L.geoJSON(null, {
 pointToLayer: function (pointFeature, latlng) {
      return L.circleMarker(latlng, {
          radius:6,
          opacity: .8
      })            
      .bindPopup("<p><b> " + pointFeature.properties.lan_namn + "</b></p>");
  }  
});


$.ajax({
  dataType: "json",
  url: "https://public.opendatasoft.com/api/records/1.0/search/?dataset=sverige-lan-counties-of-sweden&q=&lang=en&rows=37&start=0&facet=id&facet=lan_namn&facet=geo_point_2d&format=geojson",
  success: function(data) {
    $(data.features).each(function(key, data) {
        regions.addData(data);
    });
    regions.addTo(map);
    map.fitBounds(regions.getBounds());
  },
  error: function(err) {
    console.log('error geojson')
  }
});