I'm trying to write a custom component using Leaflet.js so that I can display two differently colored sets of points on a map. I am able to get the map to render and when I hard code the coordinates into the iframe code.
. However, when I try to use data from the model to create the points, the map won't render at all. The only thing I'm changing in the iframe code is var points = [[29.3, -95.4], [29.4, -95.2]....] to var points = {model.points} where points is just an array of coordinates. Any idea why this might be?
Look at the value of the points object you are passing to the model. When I encounter issues like this it is usually that the object I am passing into the model is either undefined or the structure is not the same, for instance maybe it is an array of objects rather than an array of arrays.
A couple of ways I do this is to inspect at the value of the object you are passing in the left panel. Saves me more than I care to admit. If that looks correct, place debugger in a line of the module’s js code. This will break execution of the code so you can inspect the value of model.points that is actually being seen by leaflet.
Hopefully that gives you some strings to pull.
@bradlymathews Thanks for the suggestion, I gave that a look and the model is an array of arrays like I hoped but I guess that doesn’t help explain why the map won’t render. Even creating the variable var points = {model.points} breaks the map without even trying to add markers at those points. As soon as I add that line into my iframe code it goes blank (no tiles even).
Oh, the tile going blank means there is an error in your code. f12 to open the dev tools and if yor code is in the script/babel tag, the browser will display most code errors (just learned that a couple days ago.)
But I think you may just need to get rid of the curly braces - they are only for interpolation when you are making a js template. If you are just doing straight JS, you do not need them. I also made that mistake a couple of days ago as I was making my first component. I’m a vue.js guy, not react but they are more similar than different.
@bradlymathews I think we are getting somewhere, I checked developer tools and the error I’m getting is that model is not defined. Is this because I haven’t subscribed to the Retool environment? I had seen a forum posts about that.
I’ve got it working, I had to put it all inside window.Retool.subscribe. Thank you so much for your help @bradlymathews!
1 Like