What I would like to do: I would like to use Leaflet in a Rails 7 app.

What I did: I created my rails app and generated a model (with controller and views) called map with only a title. I then added a single map record.

I added leaflet to the app like this:

./bin/importmap pin leaflet

I added a map div with stimulus attributes in app/views/map/show.html.erb which now looks like this:

<p style="color: green"><%= notice %></p>
<%= render @map %>

<div data-controller="map" data-target="map.placeholder">

<div><%= link_to "Edit this map", edit_map_path(@map) %> | <%= link_to "Back to maps", maps_path %>
<%= button_to "Destroy this map", @map, method: :delete %> </div>

I then created app/javascript/controllers/map_controller.js looking like this:

// map_controller.js
import { Controller } from "@hotwired/stimulus"

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

  connect(){
    import("leaflet").then( L => {
      this.map = L.map(this.placeholderTarget,{zoomDelta:0.5,zoomSnap:0.5}).setView([ 50.1960, -6.8712 ], 10);

      L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href=";>OpenStreetMap</a> contributors'
      }).addTo(this.map);
    });
  }

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

}

What I got: I got random tiles here and there like this:

I can click on the tiles and move and zoom, and then they flicker, are still messy and even overlay the rails html text like this:

What I've tried:

1. Installing leaflet-css with importmap
2. And adding a class attribute with 'leaflet-container'

but nothing seems to change.

Any suggestions for how I could get Leaflet working in Rails 7 would be greatly appreciated! (I would really like to get it to work with the default hotwire and stimulus). Thanks.

What I would like to do: I would like to use Leaflet in a Rails 7 app.

What I did: I created my rails app and generated a model (with controller and views) called map with only a title. I then added a single map record.

I added leaflet to the app like this:

./bin/importmap pin leaflet

I added a map div with stimulus attributes in app/views/map/show.html.erb which now looks like this:

<p style="color: green"><%= notice %></p>
<%= render @map %>

<div data-controller="map" data-target="map.placeholder">

<div><%= link_to "Edit this map", edit_map_path(@map) %> | <%= link_to "Back to maps", maps_path %>
<%= button_to "Destroy this map", @map, method: :delete %> </div>

I then created app/javascript/controllers/map_controller.js looking like this:

// map_controller.js
import { Controller } from "@hotwired/stimulus"

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

  connect(){
    import("leaflet").then( L => {
      this.map = L.map(this.placeholderTarget,{zoomDelta:0.5,zoomSnap:0.5}).setView([ 50.1960, -6.8712 ], 10);

      L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap/copyright">OpenStreetMap</a> contributors'
      }).addTo(this.map);
    });
  }

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

}

What I got: I got random tiles here and there like this:

I can click on the tiles and move and zoom, and then they flicker, are still messy and even overlay the rails html text like this:

What I've tried:

1. Installing leaflet-css with importmap
2. And adding a class attribute with 'leaflet-container'

but nothing seems to change.

Any suggestions for how I could get Leaflet working in Rails 7 would be greatly appreciated! (I would really like to get it to work with the default hotwire and stimulus). Thanks.

• javascript
• leaflet
• stimulusjs
• ruby-on-rails-7
• hotwire-rails

1 Answer 1

Ok found the answer myself: Leaflet was missing its css files.

When installing leaflet-css with importmap (as I mentioned above) the following line is automatically added to config/importmap.rb :

pin "leaflet-css", to: "https://ga.jspm.io/npm:[email protected]/dist/leaflet.css.min.js"

I then added the following line in the top of the map_controller.js file:

import "leaflet-css"

and added the following to the div tag (The style tag is just for testing here. I'll be using tailwind):

 class="leaflet-container" style="min-height: 800px;" 

And then it works as expected:

Easy and logical in the end. I have a feeling I'm going to like Rails 7!