This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-09-27
Channels
- # announcements (2)
- # asami (25)
- # babashka (124)
- # beginners (46)
- # calva (55)
- # cljdoc (70)
- # clojure (68)
- # clojure-australia (2)
- # clojure-dev (63)
- # clojure-europe (38)
- # clojure-nl (1)
- # clojure-spec (1)
- # clojure-uk (8)
- # clojurescript (56)
- # community-development (4)
- # conjure (1)
- # copenhagen-clojurians (1)
- # core-async (1)
- # cursive (3)
- # datahike (5)
- # datomic (183)
- # depstar (2)
- # figwheel-main (10)
- # fulcro (20)
- # honeysql (2)
- # hyperfiddle (1)
- # integrant (68)
- # jobs (6)
- # jobs-discuss (5)
- # juxt (1)
- # malli (13)
- # off-topic (8)
- # pathom (2)
- # rdf (10)
- # reagent (11)
- # remote-jobs (1)
- # rum (1)
- # shadow-cljs (69)
- # spacemacs (1)
- # sql (5)
- # tools-build (51)
- # tools-deps (6)
- # xtdb (24)
here's what the react code looks like
const Map = ReactMapboxGl({
accessToken:
'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A'
});
// in render()
<Map
style=""
containerStyle={{
height: '100vh',
width: '100vw'
}}
>
<Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
<Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
</Layer>
</Map>;
here's what my code looks like
(defn map-component
[]
(let [token "pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A"
Map (ReactMapboxGl (clj->js {"accessToken" token}))]
[:> Map {:style ""
:accessToken token
:containerStyle {:height "100vh"
:width "100vh"}}]))
I get this error
mapbox-gl.js:33 Uncaught Error: An API access token is required to use Mapbox GL. See
at t.RequestManager._makeAPIURL (mapbox-gl.js:33)
at t.RequestManager.normalizeStyleURL (mapbox-gl.js:33)
at Ze.loadURL (mapbox-gl.js:37)
at Map._updateStyle (mapbox-gl.js:37)
at Map.setStyle (mapbox-gl.js:37)
at new Map (mapbox-gl.js:37)
at ReactMapboxGl.componentDidMount (map.js:122)
at commitLifeCycles (react-dom.development.js:20664)
at commitLayoutEffects (react-dom.development.js:23427)
at HTMLUnknownElement.callCallback (react-dom.development.js:3946)
That still doesn't look right, even if it works.
• The original JS code doesn't pass the token to Map
- only to ReactMapboxGl
• Reagent already converts CLJS maps to JS property objects for you
Have you tried changing the above CLJS code by simiply removing :accessToken
from the Map
properties?
Also, you don't have to use clj->js
with shallow objects that are known at compile time - you can just use the #js
reader tag.
is it possible to use react’s forwardRef
in a reagent component? https://reactjs.org/docs/forwarding-refs.html
Yes, a quick search in the Reagent repo shows that there's an example that uses it: https://github.com/reagent-project/reagent/tree/c214466bbcf099eafdfe28ff7cb91f99670a8433/examples/react-mde