How do I get from code maps and publish to ArcGIS Online?

Question

I am trying to learn more about making offline maps for use with Field Maps for forestry and environmental work in the field. I work for a natural resources agency in Northern California.

So I started learning how to make a vector tile base map to publish online and then an editable layer file also to publish, and then combining them into a downloadable map for the tablet.

Now I am working on these mapping coding things and running through the tutorials which is where I find myself now.

I am not a coder, but I get the gist of what is happening here on these tutorials, to a point, but as I've told others, I play the piano, I don't build 'em, fix 'em  or tune 'em (yet).

Currently I am stuck here with six tutorial maps on codepen and I don't know how to get them back on ArcGIS Online. Can you help me publish them, please?

Here's what they look like: As you can see "Display basemap"  did not print up. "Find places" started showing hotels and restaurants, etc after George showed me how to add places to the API Key. The tutorials are a trip, and I'm liking the journey, and as before in my esri GIS journey, there are places where one gets stuck. I would appreciate your help.

Here's the tutorial for "Find places in a bounding box" to show you what kind of tutorials I'm doing: MapLIbre and Codepen. https://developers.arcgis.com/maplibre-gl-js/places/find-places-in-bounds/

Thanks!

John-Foster · Accepted Answer

@RonaldHaugGreat to see you made so much progress with the developer tutorials. I'm not sure what you mean by getting these apps back on ArcGIS Online. These code samples are designed to be run from your own app or website. If you want to run these on ArcGIS Online you should try to use Instant Apps or one of the other app builders.

For the Display Basemap, we would need to review your Codepen, but your screenshot looks like the API key used is invalid or not correctly set to scope basemap privileges, so check your API key setting on that one.

For the Places sample, you will need an API key scoped to basemaps, geocoding, and places. I ran the tutorial directly off the page you referenced and added my API key and it works without any other changes.