Loading the leaflet Map in Lightning Web Component
L.map(<String> id, <Map options> options?)
is the initialization factory, in which you provide the ID of your element for the component to initialize, LWC doesn't seem to support passing in the id for leaflet to init since (from the doc):
Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.
leaflet also supports passign in the ELEMENT, so, if you pass the element rather than the string id, you should be fine (for the most part):
L.map(<HTMLElement> el, <Map options> options?)
if you change your code to
const mapRoot = this.template.querySelector(".map-root")
var map = L.map(mapRoot).setView([39.7392, -104.991531], 14);
you will be able to pass the instantiated HTML element to the factory. You will need to add a class name to your div in order to use it as a query selector, since id's are not supported. Ex:
<template>
<div class="map-root" lwc:dom="manual"></div>
</template>
and one last thing, dont forget your css file, if you dont add a component height, the component will load but will appear with a height of 0px:
.map-root{
height: 180px;
}
Leaflet Documentation
LWC Documentation - Access Elements the Component Owns