Three js + open layers + d3 - d3.js

I'm trying to create a globe where I can zoom, rotate, and interact with.
I need to highlight countries on hover and I have special locations with markers (like google maps). How can i achieve this ? Three JS, d3, open layers, Planetary.js. Any tips ?
I have a full working globe in Three JS only. But I need to map (x, y, z) coordinates to Lat/Lon pairs. You guys know what's the best way to approach this? Thanks.

I would advise d3.js as a framework to use your map.
Here is a page where you'll find a demo and code to use a zoom on a map :
http://bl.ocks.org/marcneuwirth/2865882
And here is a globe demo and code where you may select countries and so on :
http://bl.ocks.org/KoGor/5994804
I wouldn't use the other framework/libraries that you mentioned, not because that are worse but because I'm working usually on a virtual machine and no graphic card installed and that webgl is just a pain on such machines. d3.js is working smoothly compared to the other solutions.

Related

How to make hovering text for a custom coordinates in Rust using egui?

I'm trying to make visualization for iterative algorithm, using macroquad and egui. Pure plot on macroquad looks like this:
Note that each circle or vertice is a struct instance with N fields, content from which I want to appear with hovering over the circle's perimeter?
How can I do it? Which way is more elegant/better to use? I think of writing custom widget for each circle and therefore hovering on this widget. But it seems complicated — I have a lot of circles thus need a lot of widgets. Probably better would be using some fields, where if user clicked, window appeared with information.
Any help is really appreciated

Add a masking overlay to highlight certain areas on an interactive mapboxgl map

I am building a website where users can search for specific places or areas on a map with some filters like "park", "supermarket", "cafe", etc. For example, a user should be able to find all suitable areas in a city that are near a park but also are at least 1 km away from a highway (for some reason). To do so, after the user has specified some filters, I want to add an overlay that masks all areas that don't satisfy these filters while still allowing the user to zoom and pan freely. I am using MapboxGL for building the map.
My first attempt was to use Turf on my geojson data to perform the necessary operations, i.e. converting the current viewport to a bounding box polygon, union all needed geojson features to one polygon and mask the difference between them and then simply add the result as a Fill-Layer on the mapbox map as seen in the image below.
While this approach does work for simple overlays it doesn't scale and needs a lot of time to perform the necessary operations on the data when used with a lot of geojson data and more filters.
Instead of working with the geojson directly I thought it might be better to use a canvas overlay and render the mask layer with webgl to improve the performance. I found a mapbox example for overlaying a custom style layer on a map, but unfortunately, I have never used webgl before and I'm not really sure how I would render such an overlay with this custom layer.
Is using a custom overlay with webgl the right approach to solve my problem? Or is there an obvious option (or another library) for this task I haven't considered yet?

vector tiles map viewer for own data and with interaction

there are same solutions for rendering vector tiles on client-side webbrowser. But i don't find one for my expectations.
I want to display a huge amount data (points, polygons) in a map viewer. I need vector data because of dynamic styling and interactions of the features. Its too much to load all in Google Maps and from my perspective its the right way to use vector tiles, because only nessesary and aggregated data for the viewpoint will be load.
So i dont need to style the basemap like i found thousands of examples. I only want to load my data as a vector tile layer on a raster (google satelite). But my features should by stylable, need to have normal events like clicking or mouseover and store properties. And last but not least it should be really fast ;-)
What viewer i need? And what is the workflow to create and serve the data as vector tiles?
I have been working on a similar problem, strech - technologies are evolving, but mapbox-gl.js is one viewer you can use. You might be able to use mapzen's system as well, but I haven't tried their system with large amounts of features, whereas I know mapbox does work better than leaflet and openlayers for your scenario.

Leaflet.js+d3.js circles with transition

I am trying to plot circles in Leaflet.js (a webmapping app), following http://bost.ocks.org/mike/leaflet/ seems not to be dificult, but I'm having strange problems :.( that you can see here: http://bl.ocks.org/3047025
In fact here you can see simple circles and works fine if zooming (double click on map) and so on. But I want these features to be circles instead of paths. I think it is not possible (?)
I would like to have circles so I can apply transitions (from radius 0 to X, change color, gravities), events and so on.
Are these transitions in Circles+Leaflet.js possible?? as far as I tested, with paths it is not.
thanks in advance,
Pere
Ziggy Johnson kindly answered my question in the d3.js googlegroup.
You can take a look how it's correctly done in http://bl.ocks.org/3087431
thanks again, Ziggy!

Drawing atop a scrollable, zoomable image in Qt

I'm sorry if my question is somewhat vague. It's been a few years since I did anything with Qt, and back then I never did any fancy image stuff. What I'm asking for below is just some general suggestions on which classes to consider using. I'm trying to avoid barking up the wrong tree from the very start.
The situation: I'm writing a Qt-based program in which I need to display a somewhat large (let's say 5000x5000) raster image. The user should be able to zoom (quickly) in and out, and pan around the image in a way similar to for example Google maps. So far, this is not very different from the Qt ImageViewer example, except perhaps for the requirement that zooming happens quickly. However, I need to draw on the order of 50k simple geometric shapes (let's say circles) on top of the image, and be able to add and remove some of these in a simple way. The circles should have the same size no matter the zoom level, and should thus either be redrawn whenever the user zooms, or should be drawn with vector graphics. Think of the circles as map annotations. These should look the same at any zoom level, and also behave nicely with respect to panning.
I guess my question is twofold:
Can Qt draw vector graphics on top of a raster image?
In general, which classes should I consider for the above?
Thanks in advance. I don't like answering vague questions myself, but maybe someone with experience with Qt's graphics capabilities has an answer.
I suggest you use QGraphicsView and friends for this. It helps handling all the view/world transformation and the vector items can be achieved with various QGraphicsItems.
You can change the sizes of the items whenever the zoom level changes to maintain constant apparent sizes.

Resources