How to integrate mapx in react app

[samareshdas]

I am working on creating a spatial dashboard using React. To enhance the mapping functionalities in my application, I'm interested in integrating MapX, which offers various features. Is it feasible to incorporate MapX into my React-based web application?

[fxi]

Hi,

We've set up a demo site to showcase various integrations with our SDK, which can be found here: MapX SDK Demo Site.

Among these, there's a specific example demonstrating integration with React: React Integration Example, with the source code available at: React Example Source Code.

For comprehensive details on the SDK, please refer to the documentation: MapX SDK Documentation.

Please be aware that MapX is primarily designed for desktop use, offering limited support for smaller screens. We are generally open to improvements requests.

If you're aiming to integrate MapX into a dashboard, the 'static' mode might be the most suitable option for you.

[samareshdas]

Hello,
Thank you for your response. I have examined the React example, and it was well done. I am interested in delving deeper into it. I noticed that it directly imports JavaScript rather than using NPM. In our system, we manage layers in GeoServer, and GeoServer requires an authorization token in the header for security with each request. How can I extend this functionality in the context of MapX?

[fxi]

You can also use the npm package @fxi/mxsdk. The way it's currently built, we recommend keeping the SDK version in sync with the target MapX instance. For example, if app.mapx.org is on version 1.12.7, then the SDK version should also be 1.12.7.

Are you familiar with the project/view/role system in MapX? To add sources and create "views" (configuration objects), you must be registered within a project as publisher, or create and host your own MapX instance.

For the GeoServer WMS part, there is currently no way to add headers in the HTTP request for authentication in MapX. You will likely need to set up a proxy to handle this or use URL-based authentication (which is less secure). Note that GeoServer sources in MapX are handled using a "raster view," which manages WMS endpoints and stores them in a config object. All query parameters can be customized. If your use case requires it, feel free to open an issue. Mapbox GL JS offers a transformRequest option that could be useful for this; however, implementing it requires some changes in our platform to build a UI around that feature.

If you need direct interaction with a map object or to add your own layer system, you can also import the MapX base map style into your own mapbox/maplibre instance. Access to a style/boilerplate is available using the "code share" button in vector views. Example in jsfiddle : https://jsfiddle.net/fxi/091x6oyq/

[samareshdas]

Hello,
Your guidance has been valuable. While exploring the SDK, I came across the export manager for map rendering. However, I didn't identify a dedicated component for incorporating my custom WMS catalog. Could you provide assistance on how to integrate the catalog into the map during rendering map using the manager?

[samareshdas]

Hello,
From my observations, it seems that MapX uses Mapbox as its base map, which typically requires a Mapbox access token and subscription. Is there a way to use MapX without relying on the Mapbox base map?

[thomaspiller]

Hi @samareshdas,

Thanks for your interest in MapX!

It seems you're seeking a library to seamlessly integrate WMS into a web page which is not a one step process with MapX. MapX serves as a online cartographic platform where a community of users shares spatial and tabular data, organized by project. While the MapX SDK offers methods to integrate and pilot MapX content into external web pages or platforms, it currently lacks a method to dynamically add WMS to the map. So to utilize the SDK, data/web services must be published onto the MapX platform first.

If your aim is just to integrate WMS into a map without additional publishing steps, I recommend exploring OpenLayers or Leaflet, both of which are well-suited for this purpose.

If, however, you are interested in the functionalities offered by MapX, could you please contact the MapX team at the following address info@mapx.org for further assistance.

[samareshdasglobal]

Thanks for your response. UN biodiversitylab map url https://unbiodiversitylab.org/en/unbl-workspaces/ https://map.unbiodiversitylab.org/earth is very nice. Anybody know they used Mapx or not? is there open code repository available ?

[thomaspiller]

The UN Biodiversity Lab does not use MapX as a spatial data visualization tool. I recommend that you contact them directly at support@unbiodiversitylab.org.

[thomaspiller]

I'm closing this discussion as it seems that your initial request has been answered. You can contact the MapX team at the following address info@mapx.org for further assistance.