leaflet-gps-tracker-simulation

A simple simulation of what a gps tracker app looks like with Leaflet.js.

⭐ Try

You can try this repo in here.

⭐ Variables

Leaflet Object Variables

• markers → Holds user markers as a HTML collection.
• outerPolylines → Holds polylines for outside the polygon as a HTML collection.
• innerPolylines → Holds polylines for outside the polygon as a HTML collection.
• polygons → Holds areas as a HTML collection.

Array Variables

• outerCoord → Holds the coordinates to use for outerPolylines. It has an index for each user, and these indexes contain arrays in which the coordinates are kept.

  • outerCoord[q]: qth user.
  • outerCoord[q][m]: mth point of the polyline drawn for the qth user.
  • outerCoord[q][m][0]: Latitude of this point.
  • outerCoord[q][m][1]: Longitude of this point.

• innerCoord → Holds the coordinates to use for innerPolylines. Each index is a separate array and each of these arrays contains the coordinates of its users. When exiting an area, a new array is added to the required index inside the innerCoord for the next entry. In the next entry, the coordinates taken inside the area are kept in this array.

  • innerCoord[q]: qth user.
  • innerCoord[q][m]: Coordinates to be used in the mth entry of the area for qth user.
  • innerCoord[q][m][n]: nth moves coordinate in the mth area for qth user
  • innerCoord[q][m][n][0]: Latitude of this point.
  • innerCoord[q][m][n][1]: Longitude of this point.

• inx → It used to determine of new arrays to be added to the innerCoord. It has an index for each user. Each index contains a two-element array.

  • inx[q]: qth user.
  • inx[q][0]: Represent different permanent polylines for qth user. Incremented by one each time you exit the area.
  • inx[q][1]: Represent points of these polylines. Incremented by one every move inside of area. Reset every time you exit the area.

• entDate → Holds the last date entered in the area. It has an index for each user.

• time → Holds the last time spent in the area. It has an index for each user. Each index contains a four-element array.

  • time[q]: qth user.
  • time[q][0]: Represent milliseconds.
  • time[q][1]: Represent seconds.
  • time[q][2]: Represent minutes.
  • time[q][3]: Represent hours.

• lastArea → Last visited area. It has an index for each user.

Other Variables

• startLocation → Variable that holds the starting position.
• control → Control variable required to capture the moment of entry and exit into the area.
• tInx → Holds the row index that needs to be updated in the tables.

⭐ Functions

• walk(n, lineLength, intervalRate, dist, polygons) → Function that does main work like updating arrays, shifting polylines etc... It takes five parameters:

1. n → Number of users.
2. lineLength → Number of points to use to draw outerPolylines.
3. intervalRate → Speed of setInterval for operations.
4. dist → Distance from which the new location will be selected. Larger the value, smaller the distance between the new location and the old location.
5. polygons → Defined areas.

Local Variables: Nothing.

return: No.

---

• popup(q) → Function that adds popup to markers. It takes one parameter:

1. q → User index.

Local Variables: Nothing.

return: No.

---

• newLocation(dist, lineLength, q) → Function that selects the direction and new location of the users. It takes three parameters:

1. dist → Same as other.
2. lineLength → Same as other.
3. q → User index.

Local Variables: latV, Number to add latitude. lngV, Number to add longitude. direction, Direction of new location.

return: No.

---

• isContain(polygons, j) → Function that checks if the user is inside an area or not. It takes two parameters:

1. polygons → Defined areas.
2. j → User index.

Local Variables: Nothing.

return: Yes. If user is inside an area, it returns the index of that area. Otherwise it returns -1.

---

• getAreaTime(baseValue, timeFractions) → Function that converts the millisecond difference of the entry and exit dates of the area to other time fractions. It takes two parameters:

1. baseValue → Raw millisecond data.
2. timeFractions → Time fractions. For example [1000, 60, 60]. 1000, converts milliseconds to seconds. 60, converts seconds to minutes. 2nd 60, converts minutes to hours. If a 24 is added to the end, the hours are converted to days.

Local Variables: Nothing.

return: Yes. Returns the edited duration data. Index 0 represents milliseconds, Index 1 represents seconds, Index 2 represents minutes, Index 3 represents hours etc...

---

• drawArea() → Function that draw areas.

Local Variables: polygonLatlngs, Coordinates of the areas are manually entered into the this array. Each index of this array must contain an array containing the coordinates of the area.

• polygonLatlngs[m]: mth area.
• polygonLatlngs[m][n]: nth point of the mth area.
• polygonLatlngs[m][n][0]: Latitude of this point.
• polygonLatlngs[m][n][1]: Longitude of this point.

return: Yes. Returns an array containing the Leaflet objects of the areas.

⭐ References

• Leaflet.js: Javascript library for mobile-friendly interactive maps.
• Leaflet.PointInPolygon: Leaflet plugin/extension that provides point-in-polygon functions based on Dan Sunday's C++ winding number implementation.
• Leaflet.fullscreen: A fullscreen control for Leaflet.
• esri-leaflet: A lightweight set of tools for working with ArcGIS services in Leaflet.
• leaflet-color-markers: Color variations of the standard Leaflet marker.