[PLUGIN] - Google Maps Geometry/Drawing + W3W

Thank you very much! Getting to be the best map plugin!

I have them all, and Paul’s is by far the most powerful. Just a few more things to add and he has surpassed all the other plugins functionalities and more. Definitely increase price on this as it is worth it.

Additional features to think about:
-Clicking a Marker Shows Group(defined by ID) or custom HTML (could let us use dynamic values here)
-Loading animation while map is initializing.

Thank you for the kind words! You should be able to show a group upon clicking a marker. There are the clicked and drawn events that trigger. I could probably do with adding a few more events in anyway. Can you explain more on the animation part? What is it you’re thinking of doing and I’ll see what I can do to help with that.

Thanks this is a very amazing plugin you’re amazing at what you do!

I was able to play around in my own app and am trying to save the area and length of a drawn shape but having trouble. I’m getting the measurement’s but only AFTER “A polygon has been drawn” has finished and that’s when I want to save the newly created shape. (steps 1 & 2 are measure area/length) step 3 is save to database with the maps measurement state info set in steps 1 & 2.

Not sure if this is possible but if we could have the ability to use it like “result of step…” or passed back as data somehow so that it could be calculated and used in the next workflow action or even calculated and used in an api workflow.

This kind of goes along with the above, ability to calculate measurements while drawing before “a shape has been drawn” so we can see a live preview of the length of a line or area etc.

it’d be great If a shape could take a dynamic text “title” and then display that in the center of the shape. or even options (Centre, top, bottom, left, right)

could you add these or something similar with ability to add dynamic text? I guess this goes along the lines of the marker/shape clicked events too.
Info Windows  |  Maps JavaScript API  |  Google for Developers
Custom Popups  |  Maps JavaScript API  |  Google for Developers

I really would like it and understand if its not possible I’m happy to help with any testing or feedback

Lastly, if you could add polyline customization in as well its basically sprinkles on the cake :rofl:
Shapes and lines  |  Maps JavaScript API  |  Google for Developers

Thanks again!

Yes I can do that with a static group. What I was meaning was a floating group, or tool-tip that appears above the clicked marker.

This window would be dynamic if you used a html field we could use bubble commands and text to display what we want.

The loading animation would be a ‘initializing state’ while the map loads. While in this state it displays a loading gif.

This loading state could also be used in our workflows to use in the ‘When’ field to trigger actions.

For example when you first load the page the map needs to load, and get setup before you can push a list of markers. If you try to push markers too soon they won’t load. So the current workaround I have right now is I put a ‘Pause’ of 3 seconds after page load to give the map enough time to load and be ready to accept the ‘Add markers’ step.

Ok I’m out for the next few hours but when I’m back I’ll start on fixing all these things you’ve raised. Will update you a bit later on.

Hi @court, @justinnnnnn,

I’ve pushed the next update with the following changes included.

States

  • Selected shape

    • This now becomes empty rather than keeping onto the previous value when the map area is clicked.
  • Is ready (NEW)

    • Is populated when the map has loaded and is ready to be interacted with.

Events

  • Is ready (NEW)
    • Is populated when the map has loaded and is ready to be interacted with.

Actions

  • Set marker

    • Now includes an option to display the info window.
  • Set list of markers

    • Now includes an option to display the info window (works on a list)
    • The marker icon now accept a list also for displaying individual icons.
  • Draw shape

    • The stroke weight for a selected shape is now configurable.
    • Measured length/areas can now be performed within the ‘Draw shape’ action so the calculations become available as soon as the shape is drawn.
    • Polygon rotation support added which will also rotate the buffer area if that option is enabled to keep it in sync.
  • Full screen (NEW)

    • Allows you to put the map in and out of full screen mode.
  • Rotate polygon (NEW)

    • Allows to rotate a polygon from it’s current position in degrees
      (clockwise & counter clockwise).

To do next...

Custom popups instead of markers? option in both marker actions or maybe a new action, undecided yet on how to best implement this.

Text within a shape, it could be limited to the size but options to try and include are center, top, bottom, left, right.

Paul

1 Like

Hi there,

Thanks for the continuous updates,

A few issues I ran in to on the new version

  • Map defaults to 3D tilted view
  • Polyline disappears after being deselected.
  • Drawn shape polygon (using draw shape) points not editable after being deselected
  • I cant get it to work but can the measurements be made available in the “A Polygon has been drawn” action so as soon as a user draws a shape all the data can be saved to the database (also when a shape changes)

    screenshot-bubble.io-2021.10.25-12_22_09

Requests:

  • Add stroke weight settings to “select drawing mode”

Thanks again!

thanks for the experience and useful information

1 Like

No probs, and I’ll get those sorted.

Hi,

Next few updates are as follows…

@justinnnnnn there was a few issues when you drew shapes onto the map from using the drawing tools and had shapes drawn onto the map using the Draw shape action. These are now fixed and was the cause for the display problem so I’m hoping they will all go away now. I’ve done a load of testing over the last few days making sure all the properties for each shape stays and nothing interferes with one another, hopefully you’ll be good now.

@court I have the rest of the dynamic options into the Set list of markers action and addressed some of the other issues. In fact, between your good self and Justin, you’ve managed to keep me real busy but keep the suggestions coming and if I’ve forgotten anything then let us know. I’ll start working on the dynamic markers in the element options fields (as you suggested) soon. Great idea there and I may add shapes in also.

Amendments to existing actions

  • Enable drawing tools

    • The Stroke weight and Stroke weight select options are now configurable.
      The configuration set within this action apply when you use the drawing tools or by running the “Select drawing mode” action.

    • Polyline issue where it wasn’t visible after being drawn is now fixed.

  • Center of shape
    Center of a polyline has been added to this and can now be calculated.

  • Clear shapes
    Now allows you to specify markers, shapes or info windows rather than just removing everything.

  • Set marker and Set list of markers and Draw shape
    All now support info window popups. Further configuration may be needed but you can write HTML straight into this field to customise it for both markers and shapes.


Exposed states

  • Marker Id and Shape Id states included. These contain either a marker Id or shape Id which update every time a new marker/shape is added to the map or when either of them is clicked. Markers or shapes which are added from using the drawing tools, will have a random number assigned to them. When using the actions Set marker or Set list of markers you have the choice through the options.
    Note: The previous state 'Clicked marker Id' has been renamed to 'Marker Id'. This will throw up the red error checker after you upgrade if you're using that state, so you'll just need to re-set that again, sorry about that.

New actions

  • Remove marker/shape
    Accepts any marker id or shape id to remove, will also accept a list of Id’s.

  • Change shape colors
    Allows you to modify the Fill color, Stroke weight and Stroke Color for any shape by entering the shape Id.


Events

  • When map area is clicked.
    Is triggered when the map area is clicked only (doesn’t trigger when clicking shapes, markers or info windows).

Other fixes

  • The map no longer defaults to the tilted view.

  • The measure length/area calculations are now done when using the drawing tools.

  • Probably lots more.

Paul

1 Like

Hey @pork1977gm,

Thanks for the great update! Really helped me solve a few problems I was having creating my custom functionality.

A few minor fixes/ improvements for this update

  • Can you make the center coordinates available earlier like areas and length?
  • When my map loads there is a selected shape that is always placed in the state automatically, can we have the option to clear the value in the state? additionally, not have it select a shape when a shape is drawn programmatically.
  • Ability to set a shape/marker ID when using “Draw Shape” so saving and loading shapes the ID is the same when loading a map and automatically drawing items from a dataset.

Yep ok, I’ll add those in. I’m away this weekend but when I’m back on Monday I’ll get those sorted.

Great job! Thank you so much!
I’ll go through and test these over next few days.

1 Like

@justinnnnnn

These are done.

Center coordinates are now calculated as soon as a shape is drawn onto the map, by using either the drawing tools or the draw shape action.

I put a new control into the map element’s option fields called “Select on add” which should resolve your problem.

image

The Draw shape action has the shape Id field added in (also for the buffer shapes if used)
If no Id is set then the shape will be drawn without an Id, where as previously it would have been randomly generated.

image

Paul

Hey @pork1977gm

Thanks for the update a few minor adjustments

  • Shape & Marker ID are blank in “a shape has been drawn” (its not saving to database in the workflow but shows an ID when I click the map) (Works in V1.25)
  • When a marker is drawn we have the coordinates in 1 state like the rest of the shapes, when drawing a marker programmatically, (set marker) it asks for separate (lat,long) coordinates. If you could make it 1 field to match that would be amazing.
  • Marker image scaling for when zooming out (it gets huge)

Thanks for the great work!

Ok no worries, will work on those tomorrow :slight_smile:
Thanks for all the feedback!

Hi Justin,

For item 1 on the list…
Have you got this option set to Yes?

image

it ties in with what you asked for before, of this:

  • When my map loads there is a selected shape that is always placed in the state automatically, can we have the option to clear the value in the state? additionally, not have it select a shape when a shape is drawn programmatically.

Would it help if I added the Marker Id and Shape Id into the Clear shape states action?
(for which I also need to rename all these display names to)

For item 2 on the list…
I can add the field as you asked for but have you tried doing this? I’m not against adding it or anything, if I do it will be under the existing lat/long fields so it doesn’t break anything for others!

The above is referencing the same state which has both sets of coordinates in the same string, it’s just that I split by comma, take either item 1 or item 2 then convert to number which gets you both. Would that work? Let me know if not and I’ll add what you want under the current lat/long fields in this action.

And for item 3 on this list…
I’ll take a look at some sort of scaling option although I’m not convinced it’s the right thing to do because if you zoom out the map you won’t see the markers at all. They should be a constant scale at all times regardless of the zoom level, is that what you’re seeing? or is it actually scaling the marker image you’re using?

#1 I have mine set to no and its working now as expected. It would help if we could clear the ID’s but I found a work around to “close a selection menu”

#2 I have that now actually and no problem if it stays the same. Just wanted it all to match.

#3 they get large when zooming out (or actually stay the same I think and the map get smaller) the shapes all go almost non existent at a far zoom level but the marker image is really big. So if lots of markers are drawn close together at a close zoom they are hard to read just zooming out a small bit.

Ok, I’ll add the marker and shape Id states into the clear states action so at least they can be cleared as and when needed. With regards to number 3, I’ll have a think about this… there might be some options we can play with. I know we can create marker images in another way which allows you to then assign the image to the marker (slightly different to how I’m doing it now) and it’s possible to then have the image scale dependant on the zoom levels, but when I try this, the marker images can become blurry/pixelated when it scales in size. Another way might be that I give you an option which says something like “Make marker invisible at zoom levels less than…” then when the map is zoomed out beyond a certain level, any markers which are in close proximity of one another become hidden and then they re-appear when you start to zoom back in again. It might be a little awkward to do but I’ll look at doing something like that anyway. I suppose if markers could be set to appear and disappear at certain zoom levels then you could make a marker appear when shapes get beyond a visible level, to show a shape is at this location (if that makes sense)… or something like that.

So, the thing with markers is that they are quite literally a marker, there’s no geometry assignments to them unlike shapes. Creating a shape on the map for example which might be 500 meters in length will stay at that length regardless of the zoom, if it scaled then it wouldn’t be 500 meters anymore so it makes sense they become harder to see when you zoom out. All shapes adhere to this rule. Markers are just constant and this is the default behaviour I believe.

Let me have a play with it anyway and I’ll see what I can come up.