Demos of OpenLayers and Leaflet Using Rails 7 With HotWire Stimulus

I put this together to gather what I'm learning works for me with Rails 7 (7.0.4) and integrating OpenLayers and Leaflet. I am trying to upgrade another app and kept running into problems. An old app made by a rank amateur (me). Tried Import Maps with various combinations. Kept getting thrown because Bootstrap forces esbuild (may be workaround, but that is the default). And it seemed plugins to Leaflet or OpenLayers didn't work well or required additional steps. Unfortunately I started to update the app as Rails 7 was coming out and Stimulus was evolving which was too early.

Settling on esbuild (node_modules and yarn, etc.). See the ReadMe at Gitbub for build details and code. Postgres database setup, but no databases are used in this app, but I use Postgres so wanted this app to mimic that.

Why Stimulus? I'm not using sprinkles of JavaScript; I'm using large chunks. But I felt Stimulus isolates the JavaScript to one div (controller and target). With Webpack(er), my JavaScript would step on other parts of the page or other pages. Of course, someone who knew what they were doing could avoid this. Stimulus may be more verbose, but controller and targets are clearly identified (with the caveat below about targets).

Currently (Jan. 2023), Rails Guides, Working with JavaScript in Rails does not mention Stimulus and barely touches on esbuild.

OpenLayers seems to be changing the canonical way to import, for example, import {Group as LayerGroup, Tile as TileLayer, Image as ImageLayer} from 'ol/layer.js'; typical now. '.js' and 'Something as Something'.

One gotcha is that Stimulus has a 'target' and so does OpenLayers and Leaflet. I haven't developed a consistent naming convention which can make debugging difficult. This gets more complicated if two maps are on the same web page. For that reason I try not to use the generic `map` for the OpenLayers/Leaflet 'target' (the 'id=map'. I also thought I had issues with the Stimulus 'targets' getting confused with more than one map per page. Maybe use the same name for both targets or is the Stimulus `targets` being used at least as long as only using the controller on one page.?

Another gotcha is with copy and pasting the html.erb. Stimulus controller name is repeated and easy to misread with all the hyphens, but longer, more descriptive controller names are useful. For example:

	
    <div id="mapolg" 
     	data-controller="ol-layer-group" 
     	data-ol-layer-group-target="lgmap" 
     	style="height:400px">
    </div>
 	

Something else I don't understand is that Leaflet code can be plugged into Stimulus without change as long as import L from "leaflet" is included in the Stimulus controller and
@import 'leaflet/dist/leaflet'
@import 'ol-layerswitcher/dist/ol-layerswitcher';
is added to `application.bootstrap.scss`. (And why is the default not `application.scss` with `bootstrap` imported? ) With OpenLayers referenced to `map` need to be changed to `this.map`. No doubt those with a better understanding of Rails and JavaScript will know why this is.

I just discovered Stimulus debugging which should prove useful. But this is for an older stimulus?

The left sidebar lists the demos I put together to help me sort this out (The list below may not be up to date). I tried to do this in my existing apps but ran into conflicts. Most of the examples come from elsewhere and are linked in the headings. Of course, other pieces from Stackoverflow and several early blogs on Stimulus. (The naming of some of the controllers should be refactored since I had used what at the time was a good name, but now not so much.)