2

I am trying to implement an OpenStreetMap via Leaflet in my JHipster application and use the locally installed leaflet files. Using the link to leaflet.css and leaflet.js online files works fine. Installing leaflet as node_module and importing leaflet into my application is faulty. I am using maven for my application and trying to reproduce the example from Leaflet homepage.

This approach works:

Simply including the following lines in the head section of my index.html works fine. (This is explained in the tutorial on Leaflet homepage.) index.html

<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="crossorigin=""></script>
...
</head>

This approach doesn't work:

Installing the leaflet node_module via npm like:

npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet

and subsequently, include the locally installed module in the head section of my index.html file

<head>
...
<link rel="stylesheet" href="../../../node_modules/leaflet/dist/leaflet.css">
<script src="../../../node_modules/leaflet/dist/leaflet.js"></script>
...
</head>

does not work at all. No map is displayed. Why is that not straight forward as with the link to online files?

This approach is incomplete:

Following the README from Jhipster and installing the leaflet node_module via npm like:

npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet

then adding following lines to import leaflet.js and leaflet.css. In src/main/webapp/app/vendor.ts adding:

import 'leaflet/dist/leaflet.js';

and in src/main/webapp/content/css/vendor.css adding:

@import '~leaflet/dist/leaflet.css';

This will display me the map BUT the marker icon is displayed as a broken image. In README they say that there are still a few steps to do but I can not find anything about those steps. Can anyone tell what needs to be done additionally?

oleggutgutgut
  • 41
  • 6

1 Answers1

2

The behavior is known for combining leaflet with webpack, see Leaflet issue #4698.

Here is the configuration that solves it for me:

Following the README from Jhipster and installing the leaflet node_module via npm like:

npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet

then adding following lines to import leaflet.js and leaflet.css, and to explicitly specify the default icon images resource. In src/main/webapp/app/vendor.ts adding:

import 'leaflet/dist/leaflet.js';
declare let L;
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

and in src/main/webapp/content/css/vendor.css adding:

@import '~leaflet/dist/leaflet.css';
oleggutgutgut
  • 41
  • 6