How do I prevent layers from rendering in 3d with Mapbox? - reactjs

Layers are being rendered in 3d, making them difficult to click, and look bad in general.
As you can see in the image, the dots are rendered about 500 ft off the ground. I'm not aware of any configuration changes I made to enable this, and I can't figure out how to prevent it from happening, although it only seems to happen to some layers (as you can see in the screenshot)
I've tried reordering the layers in Mapbox Studio, but I don't know what else I would change, as this seems to happen regardless of any js changes.

It seems like this was an issue with react-map-gl not being able to render 3d styles correctly. Setting the map to "2d" in Mapbox Studio and using a raster source to generate the 3d terrain seems to have fixed the issue.
https://visgl.github.io/react-map-gl/examples/terrain

Related

How do resize images easily in the browser/before they get to the database?

I'm trying to do what I thought would be a super simple thing. I have users uploading images to my site, they can upload any images. I'm using a react carousel to render them. I noticed whilst testing that obviously images different sizes and this makes the carousel a bit weird when rendering them as it can jump between rectangles and squares. so I figured the best way would be resize all the images to the correct size. however, I'm having issues with this.
I've seen lots of answers online like so: resize image before upload using javascript
but I don't want to copy 50~ lines of code and just use if I don't know what it's doing. I searched for packages and found this: https://www.npmjs.com/package/jimp which looks perfect but I got some errors with this I couldn't figure out.
all I want when uploading them is to simply check if width != height and then resize to say 300x300. I am using firebase and I am using their resize image tool. again it's really good but you specify dimensions but I think it treats them as maximum rather than actual. obviously I don't want to lose image quality too and stretch the image. so I'm wondering the best way to achieve this.

Rendering over 1000 markers using React Map GL

I am experiencing a problem with rendering large amount of markers. Each marker is displayed as a SVG. Everything is fine until the number of markers increases to more than 1000. The map start lagging and there is delay when zoom in or zoom out, even moving the map. As I saw from this post: Stylable marker/feature in react-mapbox-gl?
Is there any other methods that I can render and interact smoothly without changing from react-map-gl to react-mapbox-gl? Because Feature component does not exist in react-map-gl.
Thanks for answering my question.
There are optimizations described here for rendering large numbers of markers and zooming/panning: https://github.com/visgl/react-map-gl/issues/750
You will need to cluster your markers, there are different ways to accomplish this depending on your setup, for react-mapbox-gl there is a really good tutorial here using a custom hook for Supercluster

Here Maps slow loading tiles

I'm using (or try to) Here Maps for my iOS Application. I just downloaded the example project. Just including the map and a few markers (Same problem without markers).
The problem is, when I try to zoom in our out with the pinch gesture (using the build in function from hereMaps) the tiles turn white with the "here"-Logo on in and it takes several seconds to load the real maptile. Thats waaaay to slow. Compare it to google maps, there is not a single loading tile. I did not changed anything. Don't know what to change anyway, its just a few lines of configuration code.
The question is: Is that the normal behaviour? Is there a few to speed it up?
Testet with several WiFi's. Screenshot attached.
Thanks! :)

Setting D3DImage to Image and Rendering in WPF

I would like to render to a surface using DX12 and present it through WPF. There are claims on the web that this is possible. To me it seems simple. I can render as a traditional image(ie tga) on hard drive, or some mapped memory, and then present that image through D3DImage--or simply an image brush in wpf. I would think the most straight forward approach would be to render to a DXGI surface, and then copy that over to a IDirect3DSurface9. I don't see how I can map from the source to the destination in any scenario--whether it be presenting a tga, or passing the rendered surface from dxgi to dx9. Microsoft's solution on GitHub is broken, and the part with the passing of the image is shrouded in darkness. Previous MS examples have been deleted, and codeproject has examples from last decade. I have no code to date because I don't know what to put into the relevant section. I have no real interest in using the managed solutions that are available.
it seems i may have been a little impatient. the solution to my problem would seem to be ID3D##Device::OpenSharedResource(). when rendering, render to texture with CreateTexture() and pSharedHandle. this will allow the texture resource to be shared with d3d9. then i can consume the texture with a basic d3d9 pipeline that renders the texture to a basic rectangle in wpf through d3dimage. if i'm missing something let me know.

Looking for a simple Silverlight map component

I am looking for a light-weight map component that displays a map of the US and allows users to click on a State and see information pertaining to that state. The data I want to display is in my database. I just need to know what state was selected so I can display the detail. This is something I am doing to get familiar with Silverlight.
All the searches for Silverlight/ Maps I have done so far have pointed me at solutions that are far more complicated than I need. My perception is that using Bing Maps to do this simple task would a waste of the features provide by Bing.
Anyone know of such a Component? Am I wrong that Bing Maps is not the right tool for the job?
TIA!
If you have access to Expression Studio (specifically Expression Design), creating maps as vector based images is quite easy. Poly-paths in Xaml are also relatively efficient to store and serve up compared to images.
You import a map as a background image and use the pen tool to dot-to-dot trace around the country. Combine all those path segments into a single path. Then create a separate poly-path for each state (close them to allow for a fill).
It will take a few hours to build all this (I know having done this for a world map country selector... took 4-5 hours solid for the one polygon styled below):
By having each state represented by a filled polygon-path highlighting (by changing the fill colour) is trivial on mouse-enter/mouse-leave events.
If you want stylistic map, remove the image, otherwise use transparency on the state polygons to show the map through the roll-overs.
Update:
And if you get yourself a graphic tablet and pen this sort of point-to-point work is about 5 times faster than with a mouse!
The interaction with Bing Maps in Silverlight is really strong and provide you with easy communication between the map and your data. I would give Bing Maps a try.
I'm not sure if you've already come across this, but it seems you can also use the control with custom tile sources. Here are a few resources.
http://www.cadmaps.com/gisblog/?p=54
http://developers.de/blogs/damir_dobric/archive/2009/11/16/implementing-custom-map-in-silverlight-map-control.aspx
http://labs.mandogroup.com/skinning-the-silverlight-bing-maps-control/
Custom Rendering in Bing Silverlight Control

Resources