admin管理员组文章数量:1026989
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: '© <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:
- Installing
leaflet-css
with importmap - 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: '© <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:
- Installing
leaflet-css
with importmap - 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.
Share Improve this question asked Mar 15, 2022 at 8:18 Morten GrumMorten Grum 1,0311 gold badge11 silver badges26 bronze badges1 Answer
Reset to default 8Ok 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!
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: '© <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:
- Installing
leaflet-css
with importmap - 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: '© <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:
- Installing
leaflet-css
with importmap - 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.
Share Improve this question asked Mar 15, 2022 at 8:18 Morten GrumMorten Grum 1,0311 gold badge11 silver badges26 bronze badges1 Answer
Reset to default 8Ok 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!
本文标签: javascriptHow do I use Leaflet in Rails 7Stack Overflow
版权声明:本文标题:javascript - How do I use Leaflet in Rails 7? - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745518156a2154180.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论