I would like to render a geographical map inside my web page using the ECharts library. ECharts needs a third party service to retrieve the images of the geographical region that it must display and I would like to use OpenStreetMap.

The only available implementation that does something similar to what I need is this echarts-leaflet repository, which uses ECharts + Leaflet + OpenStreetMap and is not really up to date (it targets ECharts 3.6.2 while the current version is 5.2.2).

However, using both ECharts and Leaflet seems unnecessary to me (and increases the final bundle size) since ECharts and Leaflet should (?) do the same things and - as far as I can see - Leaflet and OpenStreetMap are two separate projects that does not depend on each other (am I wrong?).

Is there a way to use just ECharts and OpenStreetMaps avoiding Leaflet?

Bonus: the geographical map must be embedded inside a web page built with Angular 12. I tried to merge the code contained in ngx-echarts together with the one from echarts-leaflet but there are two issues:

• my code still requires Leaflet to run
• when I load the code inside echarts-leaflet I cannot manage to avoid Angular/Zone to hook into the event listeners set by Leaflet and this triggers a lot of unnecessary change detection cycles (it triggers on each mousemove event)