JamesLMilner
[Question] Migration from Google Maps drawing manager
I have been trying for a few days to understand how to migrate my Google maps use of DrawingManager to TerraDraw. I have made progress and understand a lot more than I did a week ago, but still think there is some important missing functionality or I have the wrong model (and have not found the documentation to reorient my head) for usage.
Please do not take any of this as criticism. I think this tool looks pretty sweet and can fit my needs well, but I think I am missing some basics.
I think my use case is pretty simple. I want to create markers on the map (generally with an image that "points" to the location). I then want to perform various actions when those "markers" are clicked on, dragged, resized, or dbl-clicked. I also want to create shapes (generally closed polygons), move those shapes and understand if things are inside, outside, or on the boundary of the shape.
So really some suggestions as to how to perform the above operations would be really helpful.
Unfortunately, these are some issues I "think" I am observing. (Like I indicated above, I may have the wrong model and approaching this in the wrong way and I certainly am likely not using the tool correctly.) Please correct anything I note below that is incorrect or suggest where I should be looking for guidance.
Questions/Concerns/Issues:
a) TerraDraw does not yet support images for "points" on the map. I saw a reference to a feature request indicating this existed, but I am not finding the "how to" in the documentation.
b) Even with image support, it is not clear how to resize points and adjust the location of the image relative to the actual lat/lng coordinate
c) TerraDraw does not seem to restrict a drawn "circle" to actually being a circle. You can edit it and create an arbitrary shape that happens to have the name circle, but cannot be described with a center and radius.
d) TerraDraw does not have the notion of "dragend" when finalizing the movement of a shape. It has constant updates during the moving process but no notion of "final" placement where operations that are higher overhead might be performed vs at every update step.
e) I do not see how to add listeners (like click and dblclick) on the dom elements that TerraDraw creates. I must be missing something here.
f) In select mode, it appears that one has to click to select rather than click/hold and drag to move. If I click and hold it seems the underlying map is moving, not the "point" I have selected.
g) I am interested in a "no-mode" where map objects cannot be selected,moved,resized etc. In some sense, I want to separate the notions of configuring shapes on the map and using those shapes that have already been configured. Does such a mode exist?
thanks for getting me pointed in the right direction(s). -brian
Hey Brian - sorry closed by accident. Thanks for your interest in the library. I think there first thing to say is Terra Draw is not a 1-2-1 replacement for Google Maps Drawing Manager. I'm not completely versed with all the functionality that was available there but imagine it doesn't map on perfectly with Terra Draw. That being said hopefully we can cover most basic use cases.
There's quite a bit to unpack here in your questions so will do my best!:
a)
Terra Draw does not currently support images, but we're looking to add it in #613
b)
Since image points aren’t supported, resizing and anchor adjustment aren’t available either currently. We need to support image markers in all libraries so will see what we can do in terms of sizing controls and offsets. Being transparent the initial push will just be to add support before more complex functionality.
c)
This is true, but you can change the behavior for Select mode on circle to make it behave the same as when it is created. You can use resizable: 'center-fixed' to achieve this behaviour. See the Selection Mode section of the Modes guide.
d)
Sounds like you might want the finish event? https://github.com/JamesLMilner/terra-draw/blob/main/guides/6.EVENTS.md#terra-draw-events
e)
To my memory Terra Draw does not create elements in the DOM. You should be able to add events to the DOM element directly. getMapEventElement should return a div you can assign custom events to if you need to.
f)
Yes what you describe is the current Select mode behaviour. There's no immediate plans to change this however, as I haven't heard any requests to modify this or offer a different behaviour so far.
g)
I think what you are describing is the static mode which is built in - it is the default mode when you use Terra Draw :) There is also TerraDrawRenderMode which allows you to just render features with no interactions: https://github.com/JamesLMilner/terra-draw/blob/main/guides/4.MODES.md#render-mode
Hope this helps! Keep an eye on the guides as these provide help on getting started with certain features. Also feel free to search through the issues, sometimes there's some useful nuggets there. Let me know if you feel anything is missing. Thanks!
There's quite a bit to unpack here in your questions so will do my best!:
You have done an awesome job. Thanks. See additional comments below (and a new? misunderstood?) behavior.
a)
Terra Draw does not currently support images, but we're looking to add it in #613 I will try this when publicly available. Do you expect I can do sizing and offsetting based on modifying the "feature"? I think that would be straightforward.
c)
This is true, but you can change the behavior for Select mode on circle to make it behave the same as when it is created. You can use
resizable: 'center-fixed'to achieve this behaviour. See the Selection Mode section of the Modes guide.
The reference to the modes guide (even though it should have been obvious) was helpful. I am still not sure of the difference between center and center-fixed, however.
d)
Sounds like you might want the
finishevent? https://github.com/JamesLMilner/terra-draw/blob/main/guides/6.EVENTS.md#terra-draw-events
This is exactly what i needed.
e)
To my memory Terra Draw does not create elements in the DOM. You should be able to add events to the DOM element directly.
getMapEventElementshould return a div you can assign custom events to if you need to.
What I found about this is that it is a div element for the entire map??? Do you have a reference for this? I am, in general, looking for the div elements that correspond to the features.
f)
Yes what you describe is the current Select mode behaviour. There's no immediate plans to change this however, as I haven't heard any requests to modify this or offer a different behaviour so far.
I still like the notion of a single click and drag is a nice shorthand for click for select, the another clickanddrag to move the "center" of a shape.
g)
I think what you are describing is the static mode which is built in - it is the default mode when you use Terra Draw :) There is also TerraDrawRenderMode which allows you to just render features with no interactions: https://github.com/JamesLMilner/terra-draw/blob/main/guides/4.MODES.md#render-mode
static mode is exactly what I was missing.
Hope this helps! Keep an eye on the guides as these provide help on getting started with certain features. Also feel free to search through the issues, sometimes there's some useful nuggets there. Let me know if you feel anything is missing. Thanks!
Now for the new and misunderstood behavior. When I select an existing element (say, for example, a circle), then I edit it, when I then go to select elsewhere, I get a bunch of ids to delete (the "editable points), but those ids are not found in the snapshot so I cannot remove them and they persist. See attached picture. What does it mean for ids that are not found in the snapshot? How do I clean up the points used for editing once editing is complete?