I'm currently creating a splash page for a project website. I was instructed to design a world map with a menu on its side and add some blinking effect while hovering on the sub menus.
I'm done with transforming/scaling the map, but I'm having a problem when hovering on sub menus, the small red circles doesn't pop up on where it should be.
Without the .transform() method, the small red circles pop up correctly, but it gives me a big but cropped map.
I used .transform() method to scale the world map down.
I put .transform() method here:
r.path(worldmap.shapes[country]).attr({stroke: "#9b59b6", fill: c, "stroke-opacity": 0.25}).transform("s.628,.740 0,0");
Here's the page with transform() method.
Here's the page without the transform() method.
In the code all of the locations of the cities is stored as lon/lat coordinates in the name attribute. This is then parsed through a world.parseLatLon function which then calls getXY() . I would say that in the function getXY the returning coordinates need to be transformed as well. There is some interesting number manipulation that is going on there (multiplying by 2.6938 and then adding 465.4) - I would say that this is adjusting the coordinates for the size of the image. Now that you have changed the size of the image, these will also need to be adjusted
Related
I have a map layer with a custom picture. The problem is, that it gets rendered 6 times although the Tilelayer component only gets rendered once.
<MapContainer
className='absolute h-[750px] w-[750px] left-[45%] top-[80px] bg-no-repeat bg-cover bg-[#688daa]'
center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true} noWrap={true}>
<TileLayer
noWrap={true}
url="/allmap.jpg"
/>
</MapContainer>
output:
That is the expected behaviour of a Tile Layer, although it is supposed to be used with an URL template, where some parts of the URL are changed dynamically for proper zoom and x/y position, so that it actually loads different images which form a part of the map, like a puzzle. See also the Leaflet tutorial about zoom levels.
If your image is not sliced accordingly for such purpose, and you rather have a single big image, you should rather use an Image Overlay instead. You can see an example in this Leaflet tutorial.
I'am using reactJS and want to design a component with following functionality :
Display pixelated image which is able to zoom in and zoom out at pixel level.
When clicked on image , display a marker- which can be a dot or icon at specific position.
When image is zoomIn/zoomOut, marker size and position should not change.
Even after zoomIn/zoomOut when clicked on image, marker should get repositioned at proper pixel on the image.
I am thinking of applying same logic as used in the maps/ leaflet. Like they maintain separate layers for map and markers on the map. If we zoomIn/out maps it won't affect the marker position or size, same functionality I want for the image.
Anyone with the solution or related library will be welcomed !
(For reference, I want this design for marking GCP(Ground Control Points) on the image, which requires very precise marking at pixel level)
I've tried every option in the Pathfinder tool. No luck there. I have a red bar overtop an icon that has a circle as a background. I'd like to remove the sections of the red bar that overlap the circle. The objects are on the same layer, and I'm selecting the circle and the red bar before I click on the various Pathfinder options.
Any suggestions as to what mistake I'm making? Thanks.enter image description here
Answer noted above:
I figured it out. "Minus Back" in Pathfinder works. The reason I didn't see it when I first chose Minus Back is that I assumed ALL the overlapping sections would be deleted automatically. Minus Back just cuts them into new objects. You have to select them and delete them. Another reason I didn't see the result of the action is that I wasn't zoomed in close enough to notice that MB had cut new paths. It pays to be zoomed in at the overlap when you're using Pathfinder.
I'm using Qt3D with a combination of this offscreen renderer and modified the framegraph to include a background image, like here.
Unfortunately, adding transparency to the objects drawn over the background image using QPhongAlphaMaterial only works unsatisfactorily.
This is th result:
What you can't see here is that the whole circle part is actually transparent, i.e. the renderer wrote the transparency value of the object for the whole pixel instead of adding it transparently on top of the background.
This is what the rendered object looks like wihtout transparency:
And this is the background:
The framegraph has two branches: one for the backgroun image, which is processed first, and one for the objects. I added a QRenderStateSet for the objects that contains a QBlendEquation with the blend function set to add and a QBlendEquationArguments with source RGB and alpha set to 1, and destination RGB and alpha set to 1 minus source alpha.
Any ideas how to fix this problem?
(For anyone wondering, I took the images from the T-Less dataset and wrote a program to create ground-truth data for 6D pose estimation)
Similarly to this question, the format of the texture that is being rendered to needs to be set to RGB8_UNorm and not RGBA8_UNorm, i.e. without the alpha channel.
I am trying to create a map grid using Google maps. I have a fixed border frame and need to create an overlay on top, similar to this and this example. However, I also need to be able to hover over map tiles using the mouse cursor and change the hue/saturation of the overlay elements accordingly. Each element in the grid will have an onClick() event associated with it.
After some research I found libraries that can be used to draw a grid such as OSMatrix.I also noticed that one of the d3.js examples is somewhat similar to what I am aiming to achieve. The question is, how can I add the visualization as an overlay on top of a map and is it possible to accomplish with API v3 and JavaScript?