Azure Maps - How to set drawing manager layers z-index to the top? - azure-maps

In my design page, the user will be creating/drawing new shapes, in addition to adding image overlays. I'm finding that any shapes drawn using the drawing manager are rendering underneath any image overlays added to the map, see below:
I'd like to know how to achieve a couple of tasks:
1 - How to set the drawing manager so any shape (rectangle/point/circle etc be default is always added as an upper/top layer when the drawingcomplete event has fired, that way the shapes will always appear above any images added to the map.
2 - How to programatically change the order of the various layers created during design, given the user may want to adjust the z-index of the various layers to suit their own endering requirements.
The MS docs here is not really helping me understand how to achieve the above, but also doesnt mention anything about shapes/layers that currently reside within the drawing manager.

Partial answer but along the right tracks...
We can retrieve the shapes (drawing manager layers) from the drawing manager so we have a reference to them.
When i add an image overlay, before actually adding/rendering it to the map, i would first get the shape layers from the drawing manager, then remove them from the map.
Next we add the image overlay to the map and add the shape layers back in as well, its the order that we add/remove the layers that seems to be relevant here.
Once i had added all layers back to the map in the chosen order, i was still able to put the drawing manager into edit mode and select the shape for editing, so i beleive this will work as my solution going forwards.
// Create the image layer
var imageLayer = new atlas.layer.ImageLayer({
url: 'myImageUrl,
coordinates: coordinates
})
// Then get the existing shapes (layers) from the DM
var layers = drawingManager.getLayers();
console.log(layers);
// Remove the shapes.
map.layers.remove(layers.polygonLayer); // polygonLayer as an example...
// Add new image overlay, then the shapes
map.layers.add([imageLayer, layers.polygonLayer]);

Related

Render Visual 3D Container on top in Viewport3D

Using Helixtoolkit you have set up a scene (viewport). Added the camera, default lights, grids, etc. You also added a SortingVisual3D where you add various box elements for example. They are rendered as they are placed in the view. Everything fine.
Now I would like to achieve is to create a new container for 3D objects where my moving gizmo would be placed (every object gets one). If I add gizmo to sorting container, it might not be visible (box overlapping gizmo), so I need a separate container which has to be rendered on top of everything.
How to set container (content) to be rendered on top of everything - regardless of its physical location while still keeping it in the correct 3d space when rotating camera. Something like 3dsmax does (example).
Tnx
Ok, found the solution myself. What you want to do is to make an overlay and transform Point3D to Point and place objects there (a canvas for example).

Drawing maps in WPF

I want to draw a map in WPF without using any third party controls.
I need each and every state of all the countries, and based on certain conditions I want to color them.
How can I get the polygon shapes of each state of all the countries?
Here is an SVG file with all the states as separate polygons (look at the source!)
You can convert it to xaml if you want and fill the state differently.
EDIT
Just google for svg world map. One of the first hits seems to be a nice resource.

Silverlight MapLayer right click issue

I am currently developing a Silverlight OOB application using the Bing Map Control, however I have come across an issue I am struggling to resolve. Basically I have three map layers:-
Base Map (bottom layer)
Icon / Pushpin layer (middle layer)
Shape / drawing layer (top layer)
This all works fine, I have put mouse right click functionality on each of my icons (pushpins if you prefer), if I add a map polygon or polyline to the top layer and this item happens to cover the same area as one of my icons in the middle layer I can no longer get any of the mouse events to fire on my icon.
If anyone can think of a way I can pass the mouse operations from my top layer objects to the middle layer objects please let me know.
Many thanks in advance
Set the IsHitTestVisible of your top layer to false. I feel I need to type more text here but there really isn't much more to say.
It's not clear from your question if you need both the shape and the icon to get the mouse event.
If all you need is for the icon to get the event, then switch the order of your layers so Icon layer is on top.
If you need both shape and icon to get the event, then (if you keep your order with shapes on top) you would need to have some way to tell what icons a shape covers. Do you have a parent/child releationship between them? If not, can you create one? If you set up an event on the shape, and set up OnEvent handlers for the icons that listen to the events, then you can have the icons react as well.
If you are more clear about what your situation is, I could post some code that could help.

How to draw shapes on top of Silverlight multiscaleimage?

There is a multiscale image with deepzoom image as a source. Now I need to allow users to draw poligons and lines on top of the multiscalimage in such a way that the shapes will follow drag and zoom to scale accordingly.
I tried to add a canvas in addition to the multiscaleimage but can't figure out how to make them stick to each other on zoom or drags.
If you have done any user shape drawing on top of deepzoom image, please share your methods.
Thanks,
Val
Have you checked the Silverlight 4 Puzzle demo?
http://johnpapa.net/silverlight/silverlight-4-html-puzzle-how-does-it-work/
You may be able to get some "inspiration" by inspecting this app.
Follow the link to download the source:
http://www.silverlight.net/community/samples/silverlight-4/html-puzzle/
I've done this before. Not sure if this is the preferred/optimal way, but you can add layers to your root deepzoom layer. (sorry, i forget the proper terminology).
In my case i had 4 sub layers, some of which were used to render lines and shapes, others were used to render entire maps that were loaded from a URI.

What is the best way in Silerlight to make areas of a large graphic clickable?

In a Silverlight application I have large images which have flow charts on them.
I need to handle the clicks on specific hotspots of the image where the flow chart boxes are.
Since the flow charts will always be different, the information of where the hotspots has to be dynamic, e.g. in a list of coordinates.
I've found article like this one but don't need the detail of e.g. the outline of countries but just simple rectangle and circle areas.
I've also found articles where they talk about overlaying an HTML image map over the silverlight application, but it has to be easier than this.
What is the best way to handle clicks on specific areas of an image in silverlight?
Place the Image and a Canvas in a Grid so that the Canvas overlays the Image.
Add shapes of appropriate sizes and placed as needed to the canvas. All shapes will a transparent fill and no border, hence the user only sees the Image. On the Canvas MouseDown (or Up events) use OriginalSource to determine which shape generated the click. Use the Tag property of each shape to associate it with some object that represents the flowchart element being mapped.
I found an easy way to do this without a canvas:
How to get the coordinates of an image mouse click in the event handler?

Resources