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() {
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


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

 * @file
 * Contains 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;


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',

1 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.

  • Excellent thank you! Now helloworld/helloworld is in that drupal setting json path but im still not getting the behaviour I want - I will use drupal behaviours and comment back!
    – Sean
    Jun 17, 2020 at 14:15
  • Thanks so much buddy i just got it working based on this
    – Sean
    Jun 17, 2020 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.