better HTMX docs

docs/content/articles/htmx.md

@@ -24,12 +24,14 @@ The principles that govern HTMX development also hold for Leaflet-HTML.
 A button that requests HTML to replace part of the document should update the map.
 
 ```html
+<!-- Initial map -->
 <l-map center="[55,-5]" zoom="4">
   <l-tile-layer
     url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
   ></l-tile-layer>
 </l-map>
 
+<!-- Tiles -->
 <button hx-get="/tile-osm.html" hx-target="l-tile-layer" hx-swap="outerHTML">
   OSM
 </button>
@@ -39,6 +41,14 @@ A button that requests HTML to replace part of the document should update the ma
 <button hx-get="/tile-esri.html" hx-target="l-tile-layer" hx-swap="outerHTML">
   ESRI
 </button>
+
+<!-- Marker -->
+<button hx-get="/marker.html" hx-target="l-map" hx-swap="beforeend">
+  Add marker
+</button>
+<button hx-get="/marker.html" hx-target="l-marker" hx-swap="delete">
+  Delete marker
+</button>
 ```
 
 <l-map center="[55,-5]" zoom="4">
@@ -56,6 +66,12 @@ A button that requests HTML to replace part of the document should update the ma
 <button hx-get={{ url(path='htmx/tile-esri.html') }} hx-target="l-tile-layer" hx-swap="outerHTML">
   ESRI
 </button>
+<button hx-get={{ url(path='htmx/marker.html') }} hx-target="l-map" hx-swap="beforeend">
+  Add marker
+</button>
+<button hx-get={{ url(path='htmx/marker.html')}} hx-target="l-marker" hx-swap="delete">
+  Delete marker
+</button>
 
 The above approach works by triggering the change handlers in the `<l-tile-layer>` custom element.
 The additional HTML tags generated by Leaflet are also inside the `<l-map>` tag.
@@ -65,3 +81,4 @@ All Leaflet-HTML tags, e.g. `<l-marker>`, `<l-icon>`, etc. can be swapped howeve
 It is just the contents of `<l-map>` that needs careful consideration.
 
 A more elegant mechanism in the future will make it clear which part of the document is controlled by Leaflet.
+