I want to use a cluster plugin for Leaflet. Since I am using ClojureScript I guess I need a React implementation. I have tried all of the available packages at npm. They all fail at one point or another, sometimes bable throws an error or some unexpected EOF happens.
If for some packages I am able to compile my app using shadow-cljs I get the following error in the browser-console (for this example I used greenatoms version @greenatom/react-leaflet-markercluster):
Uncaught Error: Assert failed: Invalid Hiccup form: [nil]
(in map_runes.views.main_panel)
(valid-tag? tag)
It stems from
(def MarkerClusterGroup (r/adapt-react-class react-leaflet-cluster/MarkerClusterGroup))
My require looks like this:
(:require
[reagent.core :as r]
[re-frame.core :as re-frame]
[leaflet :as leaflet]
[react-leaflet :as react-leaflet]
["@greenatom/react-leaflet-markercluster" :as react-leaflet-cluster]
[react-leaflet-heatmap-layer-v3 :as react-leaflet-heatmap])
I installed the packages via npm. My package.json looks like this:
"dependencies": {
"@greenatom/react-leaflet-markercluster": "^3.0.0-rc4",
"highlight.js": "11.1.0",
"leaflet": "^1.7.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-leaflet": "^3.2.2",
"react-leaflet-heatmap-layer-v3": "^3.0.3-beta-1"
},
What am I missing? Are all of the packages broken or what did I do wrong? If I can tackle this task in any other way using ClojureScript I would also be happy. At the moment I want to use the Cluster function like this to wrap Marker inside my Map:
[(if (= display-option :cluster) MarkerClusterGroup LayerGroup)
[Marker]
;Here are multiple markers which are displayed normally if display-option is not cluster
]
It looks like the package is using a "default" export, which has special meaning in JS.
Taking the line of code out of the example of the official package and translating it to CLJS:
import MarkerClusterGroup from 'react-leaflet-cluster'
This does NOT translate to
(:require
["@greenatom/react-leaflet-markercluster" :as react-leaflet-cluster])
;; and
(def MarkerClusterGroup (r/adapt-react-class react-leaflet-cluster/MarkerClusterGroup))
;; or specifically
react-leaflet-cluster/MarkerClusterGroup
It does translate to
(:require
["react-leaflet-markercluster$default" :as MarkerClusterGroup])
;; and then just using this in reagent hiccup
[:> MarkerClusterGroup ...]
This is all documented with a lot of examples. My suspicion is that you just tried a bunch of variants that didn't work. Also don't try random packages on npm, stick to the official variant. People often put "forked" versions online, but then don't update it. The version you picked as such seems outdated.