Real time location tracking

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
This project shows your current location within a map.

Please see this example: https://support.ggno.me/forum_projects/track/

When you click the link you will be asked if you would like the website to use your current location.




1.png
1.png (563.1 KiB) Viewed 3688 times


Allow and open, then open the map, you will see the nodes of the tour, now zoom out, you will see your location in the map.


By default using Leaflet API will show your location as a blue map pin while the nodes of the tour will be red.


Using the Google API will show all map pins as being red. So it would be a good idea to use the map element map pin component.

What this will do is show the active node as a Red map pin which is a different style to that of the default Google red Map pin which will be used to show your location. The other unselected nodes will use the smaller blue map pin.



The above project is using the Map Element Map Pin component as well as the Leaflet API so you will see the nodes using the red map pin and smaller blue map pin, and your current location as the larger blue map pin.


2.png
2.png (630.19 KiB) Viewed 3688 times

The project has been tested with both Leaflet and Google APIs and with Google and Custom maps.



Note:

• It does not work with Floor Plans but does work with a map with an embedded floor plan

•• The Map Element has to have Visible selected


.

How to add this to your own project
First make a tour, using the Tour Map adding your nodes so they have location data.

Open the skin editor and add a Map Element making sure Visible is selected, Map is selected and not Floor Plan.


Now add the Config Loaded action:





3.png
3.png (115.37 KiB) Viewed 3688 times

Note: The code has the ID of the Map Element in the skin editor.

In this example, it is Map 1.
If you rename the map element then you will need to edit the map ID in the code.


Here is the code you can copy and paste into your skin.


Code Needed for the Google API

Code: Select all

javascript:
setTimeout( () => {
let map = skin.findElements('Map 1')[0];
let myMarker = new google.maps.Marker({position: ([0.0, 0.0]),map: map.ggMap});
let updateMyMarker = (pos) => {
  myMarker.setPosition({lat: pos.coords.latitude, lng: pos.coords.longitude});
}
navigator.geolocation.watchPosition(updateMyMarker);
}, 200);
Code needed for the Leaflet API

Code: Select all

javascript:
setTimeout( () => {
let map = skin.findElements('Map 2')[0];
let myMarker = L.marker([0.0, 0.0]);
myMarker.addTo(map.ggMap);
let updateMyMarker = (pos) => {
  myMarker.setLatLng([pos.coords.latitude, pos.coords.longitude]);
}
navigator.geolocation.watchPosition(updateMyMarker);
}, 200);
Note: in the Leaflet code we are using Map 2.

This has the advantage that you can have different maps in the same project using the code.


The attached project has both Google and Leaflet maps so the code and map IDs are using "google_api" and "leaflet_api".
This makes it easier to follow and see which map is which.

Note: If the map is unloaded for any reason then the real-time tracking will break.
This is why the best way is to hide and show a parent container and not the map element.
However, if you need to hide and show the map element directly then make sure "Unload on hide" is deselected in the map element properties.
Regards,
Attachments
tracking.zip
(3.04 MiB) Downloaded 244 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
sirflor
Posts: 30
Joined: Wed Aug 12, 2009 7:46 pm

In my project the actual location does not work.
I have used the script (copy/paste) and changed only the element to 'map01'

The map is visible with oll the node-locations.

No error-message and no asking for acceptance of location as seen in your sample.
(your sample works well, and I can not see any differences in the skin.

Enclosed my skin-file and a screen with the Skin-editor
Attachments
Bildschirmfoto 2022-01-10 um 10.49.17.png
Bildschirmfoto 2022-01-10 um 10.49.17.png (1.02 MiB) Viewed 3498 times
skin_sirflor_brunnen.ggsk
(88.77 KiB) Downloaded 150 times
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
All I did was correct the map ID in the skin so it matches the code.

Screenshot 2022-01-10 at 19.27.49.png
Screenshot 2022-01-10 at 19.27.49.png (161.02 KiB) Viewed 3486 times

Here you see in the skin the Map element has the ID "map".
In the javascript, it's called map01.

These have to match, so in the skin editor, I added 01 to the map ID, map01.
Thne it all works as should.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
sirflor
Posts: 30
Joined: Wed Aug 12, 2009 7:46 pm

Hopki

Thank you very much - the problem solving is so easy with open eyes!


One more question.
Is it possible to change the color of the pin for the actual location to green?
AeroPixel
Posts: 29
Joined: Sun Sep 20, 2009 8:54 pm

What if I want to have some custom map pin with text over it saying "My location"? I have put text box as a child of active marker and it is not visible. Location feature is working correctly...
Any suggestion?
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
I am being told by the team this should be possible, but needs looking in to.
I know they are very busy so can not say when.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply