`GoogleMapsForHorses`

Directory Path: VaahCms/Modules/HRC/Vue/pages/livetrainingcenters/partials/GoogleMapForHorse.vue
Dependency: `vue2-google-maps`

Description

This is a Vue.js component that uses the vue2-google-maps package to display a Google Map with markers and pins for tracking horse positions. The component supports rotation, zooming, and map type selection.

GoogleMapsForHorses

Props

Prop Name	Type	Default	Description
`center`	Object	null	The initial center of the map.
`initial_zoom`	Number	null	The initial zoom level of the map.
`initial_rotation`	Number	null	The initial rotation of the map.
`map_type_id`	String	'satellite'	The initial map type.
`width`	String	'600px'	The width of the map container.
`height`	String	'400px'	The height of the map container.
`image_url`	String	null	The base URL for marker and pin icons.
`marker_icon`	String	null	The filename of the marker icon.
`pin_icon`	String	null	The filename of the pin icon.
`rotate_left_icon`	String	null	The filename of the rotate left icon.
`rotate_right_icon`	String	null	The filename of the rotate right icon.
`auto_recenter_icon`	String	null	The filename of the auto-recenter icon.
`line_color`	String	'#f00'	The color of the line connecting the horse markers.
`initial_markers`	Array	null	An array of marker objects to display on the map initially.
`initial_points`	Array	null	An array of horse position objects to display on the map initially.
`new_point`	Object	null	The latest horse position object to display on the map.
`horse_icon_background_color`	String	null	The background color of the horse marker icon.
`horse_icon_stroke_color`	String	null	The stroke color of the horse marker icon.
`is_loading`	Boolean	false	A flag indicating whether the component is loading data.
`has_pins`	Boolean	false	A flag indicating whether the component should display pins.
`pins`	Array	null	An array of pin objects to display on the map.

Methods

Method Name	Description
`rotateMap(degrees)`	Rotates the map by the given number of degrees.
`checkHorseMarkerBounds(point)`	Checks if the given horse position is within the map bounds.
`setHorseIcon()`	Sets the icon for the horse marker.
`onLoad()`	Initializes the component on load.
`pinClicked(pin)`	Handles a pin click event.
`updateMarkers()`	Updates the marker positions on the map.
`updateHorsePath()`	Updates the line connecting the horse markers.
`centerMap()`	Centers the map on the latest horse position.
`recenterMap()`	Recenters the map on the latest horse position if the auto-recenter flag is set.

Data

Name	Type	Description
`map_center`	Object	The center coordinates of the map. If set to `null`, the map will use the default center coordinates.
`points`	Array	An array of coordinates representing points on the map.
`markers`	Array	An array of markers representing points on the map.
`add_point`	Object	An object representing a point that is currently being added to the map.
`markerIcon`	Object	An icon to use for the markers on the map.
`horse_icon`	Object	An icon to use for a horse on the map.
`heading`	Number	The initial rotation angle of the map.
`auto_recenter`	Boolean	Whether or not the map should automatically recenter itself when markers are added or removed.
`is_set`	Object	An object containing flags for whether or not certain event listeners have been added to the map.
`uid`	String	A unique identifier for the map component.

Features

Set Horse Icon

As per requirement of the project, to identify the horses on the map should display horse by a marker that will have a custom color scheme, defined in the database. To achieve this we pass the icon details to the GmapMarker component of vue2-google-maps package.

This is done by the setHorseIcon method. which passes the data in the following format The fill and stroke colors are managed by the horse_icon_background_color and horse_icon_stroke_color props.

 this.horse_icon = {
    path: faMapMarkerAlt.icon[4], // font awesome icon type
    fillColor: '#c0382b',
    fillOpacity: 1,
    strokeWeight: 2,
    strokeColor: '#00000',
    scale: 0.06,
    origin: new this.google.maps.Point(0,0), // origin
    anchor: new this.google.maps.Point(280,550) // anchor
}

Display Checkpoint Markers

map-checkpoint-markers All checkpoints can be displayed on the map. The icon to be displayed on checkpoints are passed through marker_icon prop. The marker is redered with GmapMarker component of vue2-google-maps package

<GmapMarker
    v-for="(marker, index) in markers"
    :key="index"
    :position="marker.position"
    :icon="image_url+'/'+marker_icon"
    :title="marker.name"
/>

Auto Recenter Control

Auto Recenter

Whenever a new_point is received by the component, it will call the checkHorseMarkerBounds method. If the auto-recenter button is active, then this function will check if the new point location is outside the paddedBounds of the view. If it is then the map will be forced to pan to the new point as the map's new center position.

Custom Rotate Controls

Rotate

Due to some restrictions in google maps. Custom rotate controls cannot be added to the maps in the way the project requires. To tackle this we have implemented the following

Map is considered loaded in the setTilesLoadedEvent method.
Once the map is loaded setInitialChanges method is called
This will call the setRotateControls method.
This will inject two custom html button elements pertaining to left and right rotate controls and attach the rotateControl method to there click event listeners.

Training ComparisionsTraining Records View

ComponentsFusionRealtimeChart