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)
Related
I'm new to leafletjs. Been working on cesiumjs for a while and we are trying leaflet now. The main reason for the switch is to see if there's a huge performance difference.
In Cesium, I had a collection of primitive points that I plotted. What's the most efficient way of plotting 140K points in leafletjs? Using markers or creating individual little circles?
I am also thinking of using the clustering plugin (http://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released.html), so please share any thoughts on performance.
You have 2 common options:
Display your points in a Canvas-based layer, like using Circle Markers and force rendering them on a Canvas instead of SVG (see also Leaflet MaskCanvas plugin). Circle Markers, even on a canvas, still emit events, so you can detect "click" etc.
Use a clustering plugin, like Leaflet.markercluster plugin that you mention for exampe. It can handle your 140k points, depending on the client's computer performance (see https://github.com/Leaflet/Leaflet.markercluster#handling-lots-of-markers and demo http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html with 50k points, but note that the demo uses an old version of the plugin, whereas the current version is even faster).
Trying to display your 140k points without Canvas or clustering will crash your browser for sure.
If you want to render more than 100k markers, you can use Supercluster library, because Leaflet.markercluster loading of >100k markers could take more than 30 seconds.
I created a github repo to compare initial loading of Leaflet.markercluster and Supercluster.
I am using React Mapbox GL in my project and as i use Marker for about 10000 data points and performance is not that good. I have read the documentation and it says
Note: When rendering many objects, avoid using Markers as it will negatively affect performance. Use Layers and Features instead.
How to use Layers and Feature to display markers?
To render something with layers and features, put one or more Feature components inside of a Layer component. You can give each Feature a position using the coordinates prop.
Now, what's left over is to style these features. How you do this depends on what your markers previously contained, but for example, if you'd like to draw circles for each of the positions, you can set the Layer's type to circle and under the paint prop, provide values for circle-color and circle-radius (these are described in the mapbox-gl API docs.
For drawing images for each coordinate, you can use the icon-image layout property on the Layer (you would have to either use a preexisting icon or upload one to Mapbox Studio).
You can see some sample code in the demos, for example the all-shapes demo styles data with circles.
So, basic gist is, I have my own tiles of not the real world I'd like to display with the Google Maps viewer. I've found examples of how to split an existing single image into tiles for use with it, but nothing that deals with setting up your own tiler.
I have map data such as this:
https://dl.dropboxusercontent.com/u/44766482/superimage/index.html
Which right now is just a bunch of 1600x1600 images in an html table. This naive method works, but I'd like to switch to the more robust google api for better zooming and smarter streaming of the image data.
I've been unable to find a good example of how to generate your own tiles for the zoom levels and bring it together with some html/js.
If you want some more information for the goal process;
I have a python script that can output any size tiles of the map, at any zoom level. I'd like to bundle those together into a google maps api website. But in my own efforts I have not found a good example or documentation of how to do that. For one, I can only find examples of how the zoom levels work for the real world map, but not for a custom one.
Edit:
Got most things working as I want them, but I'm still confused regarding the "center" that can be set, as it's in lat and lng, which don't apply. I'd also like to set boundaries as currently it tries to load .png files outside of the maps range.
My current progress:
https://dl.dropboxusercontent.com/u/44766482/googlemapspreview/index.html
I think what you are looking for is the google maps imageMapTypes:
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
Basically, each zoom level is the 4 lower zoom tiles combined. A Projection function can be skipped to get orthogonal mapping.
I'm interested in showing a heatmap in my Cesium application. On the heatmap.js website they have a number of demos such as the leaflet demo which adds the heatmap object as a layer. I'm wondering if there is a way to do such a thing in Cesium.js. I've seen people mention rendering a (or multiple) PNG(s) and showing that as a layer, that's a viable option if there is a way that I can do it on the fly and add them to my Cesium instance.
I have seen examples of heatmaps in Cesium but it's never explained how they did that (I don't even know if they used heatmap.js). There is also an issue on the Cesium.js GitHub about this, but they don't seem to be actively pursuing it.
Because there was nothing to my liking I created 2 libraries to incorporate heatmap.js into Cesium. Both can be found on my GitHub. They are called:
CesiumHeatmap
This is a library that uses either a Entity.Rectangle or the SingleTileImageryProvider to show the heatmap on the globe.
HeatmapImageryProvider
This is a library that uses a custom Cesium.ImageryProvider to show the heatmap on the globe.
I am using the Zingchart library to add a map and charts to my website.
For the Map there are some predefined maps included in the library. Is there a way I can define my own map? I am looking for a way to enter the coordinates of the polygons
I want with their name, and they get loaded.
I tried too see how they are done by looking at the source code but I have the minified version and its not very intuitive to figure out how to modify them.
The Zingchart Maps Module docs include a handful country maps as demos. As you said, these are the predefined maps the library comes with. If you load up one of the maps (on their docs page) and right click, their custom context menu should show the option "view source", amongst other export options. Within the result window, you will see the Parsed JSON tab. This JSON object defines the map. For example, an excerpt of Argentina's map definition looks like this:
...
{
"type":"poly",
"id":"NQ",
"points":[[183,180],
[183,181],
[184,182],
[185,182],
[185,183],
[185,184],
[186,185],
[186,185],
...
In order to define you own map, you simply need to mirror this structure. Start by cloning any of the included maps and substitute in your own values for points.
Hope that helps.