Thanks Patrick
Normally have the dynamic update flag set, must have switched it off when trying to get it working and not noticed. Set now (still not working)
lat, lng are decimal (12.8) at present in table
Thanks Patrick
Normally have the dynamic update flag set, must have switched it off when trying to get it working and not noticed. Set now (still not working)
lat, lng are decimal (12.8) at present in table
Seems that PHP PDO returns Fixed-Point types (DECIMAL, NUMERIC) as strings. Also BIGINTs can be returned as string. So I will update the google maps and directions plugins to work with string values in lat/lng also.
Thanks Patrick, you are a star as always. Once all updated I will do a “how to”.
Are you also going to change the default wappler behaviour for origin and destination to default to:
connection.data.query[0] rather than connection.data.query ?
The update is ready. I also let it accept array for origin and destination now, it will just take the first value from the array so that connection.data.query
will also work.
dmxGoogleDirections.zip (2.2 KB)
You really are a clever man, works a treat. Thank you again for your amazing work.
Will sort out a tutorial over the weekend
Great work Brian and Patrick, this is definitely on my ‘wanted’ list. I need this for two reasons…
For a project to plan inspections for an engineer. He would be presented with say 6 locations as a list and then be required to plan his own route by dragging the location order. That would then be saved as his route for the day.
For my own roadtrip route planning as we love to drive around and see all parts of the UK. In this case I would start with an origin and destination, and would want to add intermediate waypoints by clicking on the map to add to the list, would this be possible? This is so I could plan a route to go on a particular road, through a certain scenic spot, or past a well-known landmark. And then change that order by dragging. Currently you cannot do this in Google and save it for use on a mobile device.
Great work guys.
Brian’s Road trip is the title of the video I am doing on this!
No map click waypoints, sorry, alternative routes but no dragging.
there is be intelligent route planning however
Still having an issue inserting dynamic data to draw on the map. I took your code (it works great), the same as the example in the google documentation and added the binding like this:
<dmx-google-maps id="maps1" onready="drawPath(this)" width="800" zoom="12" dmx-bind:address="SelectedDestination.data.qSelectedDestination[0].DestinationZip" maptype-control="true" zoom-control="true" scale-control="true" scrollwheel="true"></dmx-google-maps>
<script>
function drawPath(component) {
var map = component.map;
var flightPlanCoordinates = dmx.parse('DestinationGeoFence.data.qDestinationGeoFence');
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
I get this error which tells me I am not giving it an array:
I have also tried creating the array in the query using repeat:
Here is my output:
Thanks,
Chris
The error indeed indicates that the path (flightPlanCoordinates
) is not an array. Type dmx.parse('DestinationGeoFence.data.qDestinationGeoFence')
in the console to inspect the result of it.
I get “undefined”. If I’m doing it correctly, that is, lol.
Then the expression is probably incorrect, where is the DestinationGeoFence
component located? Maybe it is nested, do you have the page online for me to check?
Just sent you the link as PM
Following this closely, please post any solution
This is from @patrick:
The expression is correct, problem is that the data is not loaded when the map is ready.
Change the function to
function drawPath() {
var map = document.getElementById('maps1').dmxComponent.map;
var flightPlanCoordinates = dmx.parse('DestinationGeoFence.data.repeat1');
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
Then on the DestinationGeoFence serverconnect component listen to the done or success event.
<dmx-serverconnect id="DestinationGeoFence" ondone="drawPath()" url="../../dmxConnect/a
I believe the issue was that I was activating the sever connect action after the map was loaded. I was doing this because I was selecting the geofence location from a table and displaying it in a modal. After trying Patrick’s solution is works beautifully.
Patrick,
Thank you so much for your assistance on this.
@Hyperbytes, thanks for your assistance as well.
Just delighted that is an other weapon in Wappler armoury of techniques
Did you ever solve adding or dragging points directly in the map?
I was able to do this in another environment by dragging an existing point and on mouseup (i think) calling a function to update that point in the db to the new x,y.
There, the points were always draggable do I turned that off. If it’s off, you can’t move the point so I added a button in the list for edit. It drew the map with only that point, now draggable. Move it. Updates loc. done.
Never needed to add a new one.
Just wondering 3 years on how much people have done with the maps?
I did some work with the drawing api and layer that on top of the wappler map component. You can really do anything you want with the api, but it’s all javascript.
Screen Recording 2022-08-04 at 8.07.54 PM