Rails 7 importmap leaflet-css images path fix?

Question

What I'd like to do:

I would like to have a leaflet layers control in my Rails 7 app.

What I get:

Leaflet works fine, but the control appears without the icon, like this:

and in the browser console I get this error:

GET http://my_ip/trial_models/undefined/layers.png 404 (Not Found)

and in my server log the error is presented like this:

Started GET "/trial_models/undefined/layers.png" for my_ip at 2022-03-30 06:50:43 +0000
ActionController::RoutingError (No route matches [GET] "/trial_models/undefined/layers.png"):

I've replaced the actual ip address with "my_ip". The 'undefined' is really there in the error messages.

How I did it:

First I created a Rails 7 app and imported leaflet like this:

./bin/importmap pin leaflet
./bin/importmap pin leaflet-css

I then created a TrialModel using standard rails g scaffold. I then added the following stimulus div in trail_models\show.html.erb :

<div data-controller="trialmap" data-trialmap-target="trial" style="height:600px" class="leaflet-container"></div>

I created \app\javascript\controllers\trialmap_controller.js with the following contents:

import { Controller } from "@hotwired/stimulus";
import "leaflet-css";

export default class extends Controller {
    static targets = [ "trial" ]

    connect(){
        import("leaflet").then( L => {
            this.map = L.map(this.trialTarget).setView([ 51.472814, 7.321673 ], 14);
            var base_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | <a href="https://www.swmmgo.com">SwmmGo</a>',
                transparency: true,
                opacity: 0.5
            }).addTo(this.map);
            var landMap = L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {attribution: 'attributions'});
            var layersControl = new L.Control.Layers({
                "Street Map": base_map,
                "Landscape": landMap
            });
            this.map.addControl(layersControl);
        });
    }

    disconnect(){
        this.map.remove()
    }
}

What I've explored:

I tried downloading leaflet-css like this:

./bin/importmap pin leaflet-css --download

but same result.

I can see that there is a references background-image:url(images/layers.png); in the imported/ downloaded file vendor/javascript/leaflet-css.js. But there doesn't seem be any images folder anywhere like vendor/javascript/images/ or the like.

The stringify version of L.Control.prototype.options is just {"position":"topright"}.

I tried setting L.Control.prototype.options.iconUrl = "layers.png" (and "/layers.png") in the js controller and then placing a manually downloaded layers.png file in public. But this changed neither the results nor the error messages.

My questions:

1. How can I get the icon to show and the error to disappear? (a work-around would be ok too)
2. What is the "correct way" to handle assets and asset paths which css files reference when using importmap?

Any help would be much appreciated! Thanks!

Answer 1

I had similiar problems when using markers, my solution was not using leaflet-css and just using the leaflet CSS from CDN

Answer 2

I did like Luis - put the leaflet.css downloaded from https://leafletjs.com in vendor/assets/stylesheets and the images in public/images - that solved my issues with broken marker/layer images