Where should I put JS & CSS files that I need to reference in my ionic app?

Ionic Framework
1

I am trying to add the leaflet-icon-pulse plugin to my ionic app.

The readme says

Include the CSS and JavaScript files located in \dist directory.

<script src="../L.Icon.Pulse.js" /> 

  <link rel="stylesheet" href="../L.Icon.Pulse.css" />

Here are the 2 things I don’t know:

  1. Where do I put the above scripts? I thought I should put them inside the head tag in index.html

  2. Where should I find the above JS & CSS files mentioned? Do I have to create a folder & copy those in there?

2

just put those all files in assets folder and import that path in index file. it will work fine

3

Hi, thanks for getting back.

So I ran npm install @ansur/leaflet-pulse-icon

Then inside my assets folder, I created 2 sub-folders: JS & CSS, & copied the files into those.

Here is the current structure:

structure

Then I copied the paths into the bottom of my head section of index.html:

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
  <base href="/" />
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <!-- PULSING ICON -->
  <script src="assets/JS/L.Icon.Pulse.js" />
  <link rel="stylesheet" href="assets/CSS/L.Icon.Pulse.css" />
</head>

And then added the code to include the market at the end of my method below:

private initMap(lat, lng): void {
    this.lat = lat;
    this.lng = lng;
    this.map = L.map('map', {
      center: [lat, lng],
      zoom: 15
    });
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    tiles.addTo(this.map);

    var pulsingIcon = L.icon.pulse({ iconSize: [20, 20], color: 'red' });
    var marker = L.marker([50, 15], { icon: pulsingIcon }).addTo(this.map);

  }

So before making these changes the map displays as expected, but if I run this now, here is the console error:

Uncaught ReferenceError: L is not defined
at L.Icon.Pulse.js:3
at L.Icon.Pulse.js:77