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.
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.
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:
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: 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);
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,