As has been pointed out, this is solved by importing the CSS files.

Classically, you include the link to your CSS stylesheet in the head section of your document:

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

Or, in my case, stumbling across this problem while adapting Vue CLI's Webpack template, by adding

import "leaflet/dist/leaflet.css";

into the main.js file.

As has been pointed out, this is solved by importing the CSS files.

Classically, you include the link to your CSS stylesheet in the head section of your document:

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

Or, in my case, stumbling across this problem while adapting Vue CLI's Webpack template, by adding

import "leaflet/dist/leaflet.css";

into the main.js file.

The key lines of CSS appear to be these:

.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
    }

so knowing that you can insert them at whatever point in your project suits your style.

As has been pointed out, this is solved by importing the CSS files.

Specifically, by adding

import "leaflet/dist/leaflet.css";

into the main.js file.

As has been pointed out, this is solved by importing the CSS files.

Classically, you include the link to your CSS stylesheet in the head section of your document:

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

Or, in my case, stumbling across this problem while adapting Vue CLI's Webpack template, by adding

import "leaflet/dist/leaflet.css";

into the main.js file.