Javascript file is being included but console.log wont work

Question

So I THINK I have configured my javascript right in that i want to inlude two files. leaflet.js and mappingsource.js and currently on the page source there exists this:

<script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/web\/","scriptPath":null,"pathPrefix":"","currentPath":"hello\/world","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"ajaxPageState":{"libraries":"bartik\/global-styling,big_pipe\/big_pipe,classy\/base,classy\/messages,contextual\/drupal.contextual-links,contextual\/drupal.contextual-toolbar,core\/drupal.active-link,core\/html5shiv,core\/normalize,helloworld\/leaflet,helloworld\/mappingsource,quickedit\/quickedit,shortcut\/drupal.shortcut,system\/base,toolbar\/toolbar,toolbar\/toolbar.escapeAdmin,tour\/tour,user\/drupal.user.icons","theme":"bartik","theme_token":null},"ajaxTrustedUrl":{"\/web\/search\/node":true},"bigPipePlaceholderIds":{"callback=Drupal%5CCore%5CRender%5CElement%5CStatusMessages%3A%3ArenderMessages\u0026args%5B0%5D\u0026token=_HAdUpwWmet0TOTe2PSiJuMntExoshbm1kh2wQzzzAA":true,"callback=user.toolbar_link_builder%3ArenderToolbarLinks\u0026\u0026token=xssKdKFVFD7N0FUPPcC1C7LrqMHpQFVzUhrI4cOeEgs":true,"callback=user.toolbar_link_builder%3ArenderDisplayName\u0026\u0026token=-MH2NzEnTzbzMk0ZGfGgoiw7G3j_-Q1ILWBRVhIOKLI":true,"callback=shortcut.lazy_builders%3AlazyLinks\u0026\u0026token=N1997Wch59v-LxHku3-dD44wjkSNmhegNzlZ8jS0L5I":true},"toolbar":{"breakpoints":{"toolbar.narrow":"only screen and (min-width: 16.5em)","toolbar.standard":"only screen and (min-width: 38.125em)","toolbar.wide":"only screen and (min-width: 61em)"},"subtreesHash":"fFW4IHdcFxAYeqwFjFGFpjKbwADtToCo9LEGFmDLWwY"},"user":{"uid":"1","permissionsHash":"3e05456fe0e0014e93091ef2c6ad9fbbe0e5c07d9303f114c638bbc071d789d2"}}</script>

Whih both have settings? for the files that i want however the file mapping source looks like this

$( document ).ready(function() {
    console.log( "ready!" );
});

window.onload = "test()";

function test() {
    console.log('123');
}
console.log('test');
var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

Which should be console logging SOMETHING surely? Is there something I'm missing?

Additional files look like this

helloworld.libraries.yml

helloworld:
  version: 1.x
  js:
    js/leaflet.js: {}
    js/mappingsource.js: {}

<?php

/**
 * @file
 * Contains helloworld.module.
 */

helloworld.module
use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function helloworld_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    // Main module help for the helloworld module.
    case 'help.page.helloworld':
      $output = '';
      $output .= '<h3>' . t('About') . '</h3>';
      $output .= '<p>' . t('Hello World example module') . '</p>';
      return $output;

    default:
  }
}

function helloworld_page_attachments(array &$attachments) {

  // Unconditionally attach an asset to the page.
  $attachments['#attached']['library'][] = 'helloworld/leaflet';
    $attachments['#attached']['library'][] = 'helloworld/mappingsource';

}

/**
 * Implements hook_theme().
 */
function helloworld_theme() {
  return [
    'helloworld' => [
      'render element' => 'children',
    ],
  ];
}

Answer 1

You need to attach complete libraries, not single library files. Your module has the name helloworld, this is the first part before the slash. In your libraries.yml you have defined the top key helloworld, this is the library name and the second part after the slash:

$attachments['#attached']['library'][] = 'helloworld/helloworld';

This line will attach all JS and all CSS listed under that specific library.

Sidenote: Try to use Drupal.behaviors instead of $(document).ready, this is the Drupal-way to do stuff like this. Otherwise you might run into problems with Ajax-calls or lazy-rendered blocks rendered with BigPipe module.