I'm looking for a way to create relative size text-labels using mapbox-gl js. My goal is to create a label that will always have the same size relative to the map (so the label would actually get bigger when you zoom in).
Is there any way that this could be achieved?
The best way to implement this behaviour currently is to use a zoom function whose output grows in powers of 2 (example)
Related
I read a couple of posts on position nodes in force layout but didn't find an answer to what I was looking for.
I have an object with nodes and links.
I' trying to create a graph which would show all the nodes top to bottom.
I was looking at the example code from here:
https://github.com/danielstern/force-graph-example
Here's a screenshot of the result:
I'm trying to find a way to position each node so the nodes without parents would be on the top and the ones connecting to them would be under them and so forth.
Here's an image to illustrate it:
Right now, all the nodes are scattered randomly.
I wanted to if I need to actually calculate the position of each node in a vertical view or is there a smarter/built-in way to achieve it.
I looked at this example which looked promising:
How to organise node positions in D3 Force layout
But in my case I don't have a way to differentiate between nodes levels so I don't think the yPostion would help.
I was also looking at thes post:
d3.js - How can I expand force directed graph horizontally?
According to #Lars Kotthoff:
"The point of the force layout is to automatically lay out a graph like this so that you don't have to specify the positions of the nodes yourself".
Since my graph is not really a tree, I don't think the tree view would match.
What would be my best approach to position the nodes?
Or perhaps there's a better library to achieve what I need?
I found this package:
d3-dag
It basically supports what I need:
"Often data sets are hierarchical, but are not in a tree structure..."
Here's an exmaple:
exmaple
I am converting a full-screen effect to a compute shader so that I can take advantage of some features of compute that can't be done with fragment shaders. Right now, this full-screen effect uses stenciling to avoid writing to pixels which it should not affect, and I would like to mimic that behavior with my compute shader.
I know that I can write this info to a color channel somewhere, but I'm hoping to avoid that and instead just read the stencil bit directly in the compute shader. However, I can't find any way to bind a D24S8 buffer to a compute shader such that I can actually read the stencil bit. It seems to only provide the depth information.
Is there any way to do this? Google is failing me, because everyone calls it the depth/stencil buffer when talking about sampling depth values.
This is possible.
Create your D24S8 depth buffer Texture with the typeless format DXGI_FORMAT_R24G8_TYPELESS.
Create your DepthStencilView of the resource in Step 1 using the strongly typed format of DXGI_FORMAT_D24_UNORM_S8_UINT.
Create a ShaderResourceView of the stencil buffer for binding to the Compute Shader using the strongly typed format of DXGI_FORMAT_X24_TYPELESS_G8_UINT.
[Optional] Create a ShaderResourceView of the "depth" part of the resource using the strongly typed format DXGI_FORMAT_R24_UNORM_X8_TYPELESS.
Make sure you declare your stencil SRV in HLSL to be Texture2D<uint2> so you can access the Green channel (G8) which is where the stencil data will come from.
Note since Depth and Stencil are separate SRVs you'd need to declare two Texture2Ds in HLSL, one for each. eg:
Texture2D<float> depthBuffer; // Red contains depth.
Texture2D<uint2> stencilBuffer; // Green contains stencil. Red is unused.
I am going to build an interactive Choropleth map for Bangladesh. The goal of this project is to build a map system and populate different type of data. I read the documentations of the Openlayers, Leaflet and D3. I need some advice to find the right path. The solution must be optimized enough.
The map i am going to create will be something like the following http://nasirkhan.github.io/bangladesh-gis/asset/base_files/bd_admin_3.html. It is prepared based on leaflet js. But it is not mandatory to work with this library. I tried with Leaflet because it is easy to use and found the expected solution within a very short time.
The requirement of the project is to prepare a Choropleth map where i can display the related data. for example i have to show the population of all the divisions of Bangladesh. at the same time there should be some options so that i can show the literacy rate, male-female ratio and so on.
the solution i am working now have some issues. like the load time is huge and if i want to load the 2nd dataset then i have to load the same huge geolocation data, how can i optimize or avoid this situation?
Leaflet has a layers control feature. If you cut down your data to just what is required, split it into different layers and allow the user to select that layers they are interested in viewing that might cut down on the loading of the data. Another option is to simplify the shape of the polygons.
Firstly,I use google static map API to get the image to display on html/wml.
And then, I want to get the point's GPS position where user pressed on the image.
Is there some way to get the GPS position if I got the co-ordinates on the image?
The short answer is probably not. You can't be sure exactly what the static map's dimensions are (the server might change the location slightly to fit things better, etc.). If you're just asking for a map by center and zoom then you stand a slightly better chance, but it will still be tricky.
If you're trying to add dynamic behaviour to a static map, have you considered instead the Maps JavaScript API? Finding the coordinates of where a user clicks is trivial there. (Also, you can disable the zooming, panning, controls, etc. if you want so that it still feels like it's static).
I have a map that I converted from a raster graphic into an SVG file by converting the differently coloured areas into paths.
I know how to do a basic point-in-polygon check given an array of edges, but the svg:path elements represent multiple polygons as well as masks (to account for seas etc) and extracting that information by parsing the d attribute seems rather heavy-handed.
Is there a JS library that allows me to simplify that check? I basically want to create random points and then check whether they are on land (i.e. inside the polygons) or water (i.e. outside).
As SVG elements seem to allow for mouse event handling, I would think that this shouldn't be much of a problem (i.e. if you can tell whether the mouse pointer is on top of an element, you are already solving the point-in-polygon problem).
EDIT: Complicating the matter a bit, I should mention that the svg:path elements seem to be based on curves rather than lines, so just parsing the d attribute to create an array of edges doesn't seem to be an option.
As the elements can take a fill attribute, a ghetto approach of rendering the SVG on a canvas and then finding the colour value of the pixel at the given point could work, but that seems like a really, really awful way to do it.
The answers on Hit-testing SVG shapes? may help you in this quest. There are issues with missing browser support, but you could perhaps use svgroot.checkIntersection to hit test a small (perhaps even 0 width/height would work?) rectangle within your polygon shape.
The approach I suggested as a last resort seems to be the easiest solution for this problem.
I found a nice JS library that makes it easy to render SVG on a canvas. With the SVG rendered, all it takes is a call to the 2D context's getImageData method for a 1x1 region at the point you want to check. I guess it helps to create a copy of the SVG with colour coding to make the check easier if your SVG is more complex than the one I'm using (you'll have to check the RGBA value byte-by-byte).
This feels terribly hackish as you're actually inspecting the pixels of a raster image, but the performance seems to be decent enough and the colour checks can be written in a way that allows for impurities (e.g. near the edges).
I guess if you want relative coordinates you could try creating a 1-to-1 sized canvas and then divide the pixel coordinates by the canvas dimensions.
If somebody comes up with a better answer, I'll accept it instead. Until then, this one serves as a placeholder in case someone comes here with the same problem looking for an easy solution.