Correct image path not being found on localhost

, ,
1

Product/components used and version/fix level:

1016.0.214
we are using the Cumulocity data points map widget open source (github com/SoftwareAG/cumulocity-data-points-map-widget)

Detailed explanation of the problem:

I have added an external plugin called leaflet-search, in the process of this, I noticed I has to import the seperate leaflet-search.js files and .css into my gp-data-map-components.ts. This is an issue for two problems…

  1. I am not able to use the remaining .js and .css files for mobile compatibility (my question to this is if there is a way for me to import the full plugin from my node_modules)

  2. The second problem I am facing is the image file path not being found, as shown below in the .css for the leaflet-search, the image file path correctly finds the image within my repository. However, when starting a localhost to see it on the application, the file path changes and uses the website’s URL instead.

    image
    image821×442 22 KB

Error messages / full error message screenshot / log file:

Console Log → Failed to load resource: the server responded with a status of 404 (Not Found)

URL that shows on Cumulocity → http: localhost:9000/apps/images/search-icon.png

Question related to a free trial, or to a production (customer) instance?

Production

2

Hi @Amish,

1016.0.x is out of maintenance and I would suggest upgrading to a newer version.

Please provide details on how you have added the leaflet-search package to your application and how you’ve imported it’s files.

Regards,
Tristan

3

I used npm i leaflet-search and then in the gp-map-components I did

import 'leaflet-search';

templateURLs [../../node_modules/leaflet-search/src/leaflet-search.css]
4

hey @Tristan_Bastian , just wanted to follow up and check to see if you had any solutions regarding this issue?

5

You might be able to fix this with a customized webpack configuration which processes your leaflet-search css file, but you will be on your own regarding that.

This might work with 1019+ versions of the Web SDK that are based on the angular cli.