Hi,
I’m doing a follow up on one previous post ( Link Here ) as we drifted to other topics and I’m still not sure about the right way to proceed.
Here is what I want to achieve :
I have a map picture that I will load as background
Next to this picture , I have several icon to choose and add them on the map.
Let’s choose the icon “location” as ex :
The user will then
1 - select one icon
2 - get the cursor changed to the picture of the icon
3 - When user “click” , icon is pasted on the map
Note : The user may want to re-select the icon and move it or delete it.
Is a canvas the right way to proceed ? if not, how should I proceed ?
Thanks for your insights
One problem is that there is no “cursor” on mobile, but you could have the user “drag” the item onto the map, as long as the selection area is on the same canvas, and then just leave it wherever they stop.
You didn’t say if you wanted to avoid the use of Declares.
If so, I would use the Tag property of the MapLocation class on the one side, and on the other side I would create a container with all your icons.
Using the LocationSelected event, I would communicate to the container the reference of MapLocation. Now the container invites the user to make a choice.
Then the user tap an icon, and the container deletes the old MapLocation and add another one with the new icon.
I forgot to mention that you have to set the MapLocation.Icon before adding it to the map.
If you change the icon afterwards, the map will not be updated.
Hi @yvonnick_maçon , I don’t know what Declares implies but I have nothing special against. I’m open to any solution.
Having that said, the “map” not only applies to a real world map. I’m using a dumb exemple here but the background could be this as ex :
So, I think the MapLocation Class do not apply ? Hence the fact I was thinking a canvas at first with some “layers” maybe ?
Good point Greg, I was still thinking with Desktop Implementation.
It will change my layout as I was planning to use a modal to select the icon but a drag and drop should work.
I found this about canvas layers but seems not to be the right solution either LINK
Click a button, and a new icon appears on the map (in the middle?)
Maybe it is in a special color to denote ‘unplaced’
When the user places a pointer on the map,
loop through the icons you have on the map
if the pointer is inside the rectangular area of an icon,
record the pointer x,y and record the offsets inside the rectangle, and exit the loop having found a hit.
(eg pointer went down at 100,120
that represents 25 down (theyoffset) and 13 (thexoffset) to the right
when compared to the top left corner of the icon)
The user drags the pointer.
You redraw , placing the selected icon at
pointer.x - thexoffset , pointer.y - theyoffset
When the pointer is released, ‘fix’ the icon position.
Hi @Jeff_Tullin
Sounds good for me , will do half of your suggestion : user click on a category of icons , modals open , user select the appropriate icon and say ok. Icon appears on the map beeing outlined.
User can resize , mirror the icon and drag it to appropriate location.
When at the right place , he can click on a button to Finnish .
Sounds perfect for me
Now , would you use a canvas for this ? And how can I re-edit the icon later ( ex : I want to make it bigger ?)
If you watch for a pointer down event, and cycle through the icons (maintain a list in memory)
you can see which is the selected one.
Redraw it with a border.
Then, you can offer controls to resize it,
or maybe place drag buttons on the 4 corners so that people can tap on those and drag them to a new size.
(gestures for two fingers being dragged apart is conventional for resizing, but people wiuld expect the MAP to change size for that)
Hi Lionel, sorry I didn’t understand the initial question.
I would do this by using AddControl.
You can avoid doing a linear search, and you can avoid redrawing everything, by using AddControl and letting the system do it for you. This is a more object-oriented idea.
I could send a project file tomorrow, but I don’t see where the button is.
