Search code examples
javascriptleafletstimulusjsruby-on-rails-7hotwire-rails

How do I use Leaflet in Rails 7?

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.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(this.map);
    });
  }

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

}

What I got: I got random tiles here and there like this: enter image description here

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: enter image description here

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.

Solution

  • 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: enter image description here

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