Switching from LeafletJS to ArcGIS JS or Using LeafletJS to run private ArcGIS map/scene view

[the5solae]

I'm working on a project where the maps I need are created and published in ArcGIS. I was wondering if anyone has worked on moving the code base from LeafletJS to ArcGIS JS. Is this even feasible? Alternatively, can I use LeafletJS to load private ArcGIS resources?

I've tried moving the code base but I get these errors and a blank map:
404 GET /local/MapModule/external/arcgis.js/esri/views/MapView.js (127.0.0.1) 1.09ms
404 GET /local/MapModule/external/arcgis.js/esri/layers/GeoJSONLayer.js (127.0.0.1) 0.92ms
404 GET /local/MapModule/external/arcgis.js/esri/layers/TileLayer.js (127.0.0.1) 1.40ms
404 GET /local/MapModule/external/arcgis.js/esri/layers/WMSLayer.js (127.0.0.1) 0.69ms

The arcgis.js file is copied from https://js.arcgis.com/4.28/ (Is there a way to include js&css files as links directly without having to resort to copy and paste?)

[wang-boyu]

It should be feasible but will probably involve lots of work. How to use custom js/css is supported by Mesa as documented in its advanced tutorial. Basically this is how Mesa-Geo organizes its frontend with Leaflet.js. There is a MapModule.js which is in javascript using Leaflet.js, and a corresponding MapVisualization.py that connects python code to javascript code. So if you want to use ArcGIS js, I guess you will need to do something similar - a js file that uses ArcGIS js, and a corresponding python file that connects python code to this js file. The MapModule.js and MapVisualization.py files from Mesa-Geo can be used as a kind of guide on how to do it.

Another option is with Mesa's recent changes for Jupyter notebook support using Solara. I had a small demo on how to possibly use it for Mesa-Geo: https://github.com/wang-boyu/mesa-examples/blob/gis%2Fsolara-frontend/gis/geo_schelling_points/app.ipynb. However, this is purely python. Maybe it's possible to develop a customer Solara component using ArcGis js, and then use it in similar ways as in the simple demo. But this is something that I am not very familiar with.

[rht]

This might be relevant widgetti/solara#271.

[the5solae]

Hi @wang-boyu and @rht thank you for your responses. I looked through the advanced tutorial link that you directed me towards. It mentions the local_includes and package_includes. package_includes is a list of JavaScript files that are part of Mesa itself that the visualization element relies on and the local_includes is what I tried but when I ran the using the copied over js/css file, the errors I shared in my post was what I received (only core esri libraries were part of the js file). The below is kinda what I want to reproduce:

<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.28/"></script>

Will editing the mesa_viz_tornado module and using that to rebuild Mesa work better?

As you may infer already, I am exploring creating a different MapModule.js and MapVisualization.py. I also found esri-leaflet and that might be an easier switch over than to ArcGIS JS. I'm not too familiar with Solara, I had played around with it for a bit when I was using just Mesa and wanted to change the look and feel. But I'll see.

I'll leave this open just in case I have further questions or need any guidance.

[wang-boyu]

Yes local_includes is the right option, and you'll probably also need local_dir to specify the directory storing the js/css files. You can follow how it is done in Mesa-Geo here. The js/css files need to be saved locally in the project directory, in similar ways as how files are organized in mesa_geo/visualization. If they are not saved in similar folder structure, local_dir needs to be set as the right directory.

I don't think you'll need to edit the mesa_viz_tornado module, because these code from mesa_viz_tornado will try to find the local js/css files and put them into html template. So the resulting html won't be exactly what you want to reproduce

<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.28/"></script>

but instead pointing to locally saved js/css files such as

<script src="/local/your_local_js_file.js" type="text/javascript"></script>

Or, the user defined ArcGIS widget in Solara might be an easier option : )

[the5solae]

...

[the5solae]

Just an update: I ended using a Webscoket+StreamLayer. Websocket to send the positions of all agents to the streamLayer which was over my private arcgis map.

Thank you.

[wang-boyu]

Great! Thanks for the update!