Draws and visualizes custom GPS tracks in Waze Map Editor
// ==UserScript==
// @name WME GPS Track View
// @namespace https://greasyfork.org/en/scripts/40455-wme-gps-track-view
// @description Draws and visualizes custom GPS tracks in Waze Map Editor
// @match https://www.waze.com/editor*
// @match https://www.waze.com/*/editor*
// @match https://beta.waze.com*
// @exclude https://www.waze.com/user*
// @require https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
// @version 2023.04.03
// @grant none
// @copyright 2014 wlodek76 / 2017 JustinS83
// ==/UserScript==
var gps_wazeMap;
var gps_wazeModel;
var gps_OpenLayers;
//---------------------------------------------------------------------------------------
function bootstrap_WME_GPS_Track(tries) {
tries = tries || 1;
if (W &&
W.map &&
W.model &&
W.loginManager.user &&
$ && OL) {
Draw_WME_GPS_Track();
} else if (tries < 1000) {
setTimeout(function () {bootstrap_WME_GPS_Track(tries++);}, 400);
}
}
//---------------------------------------------------------------------------------------
function min_to_deg(v)
{
var fmin = parseFloat(v) * 0.01;
var fdeg = parseInt(fmin);
fmin -= fdeg;
return (fdeg + fmin * 1.66666666666666666);
}
//---------------------------------------------------------------------------------------
function calc_azym(pt1, pt2, kierWidth)
{
var dx = pt2.x - pt1.x;
var dy = pt2.y - pt1.y;
var azym = (Math.atan2(dx, dy) * 180.0 / Math.PI);
if (azym > 360) azym -= 360;
if (azym < 0) azym += 360;
return azym;
}
//---------------------------------------------------------------------------------------
function gps_parse()
{
var obj1 = document.getElementById('wme_gps_layer_content');
var obj2 = document.getElementById('wme_gps_layer_summary');
var obj3 = document.getElementById('wme_gps_layer_speed');
var obj4 = document.getElementById('wme_layer_polygon');
if (obj1 === null) return;
if (obj2 === null) return;
if (obj3 === null) return;
if (obj4 === null) return;
var str = obj1.value;
var speedmode = obj3.checked;
var fillPolygon = obj4.checked;
points = [];
lineFeatures = [];
pointFeatures = [];
var proj1 = new OpenLayers.Projection('EPSG:4326');
var proj2 = gps_wazeMap.getProjectionObject();
var time1 = 0;
var time2 = 0;
var pt1 = null;
var pt2 = null;
var kier1 = 0;
var kier2 = 0;
var kiercolor = new Array();
var speedcolor = new Array();
kiercolor.push('#ff0000');
kiercolor.push('#00ff40');
kiercolor.push('#00ff40');
kiercolor.push('#0000ff');
kiercolor.push('#0000ff');
kiercolor.push('#fff000');
kiercolor.push('#fff000');
kiercolor.push('#ff0000');
speedcolor[0] = '#000000';
speedcolor[1] = '#505060';
speedcolor[2] = '#b0b0c0';
speedcolor[3] = '#FFFF00';
speedcolor[4] = '#68fdda';
speedcolor[5] = '#00d508';
speedcolor[6] = '#f68400';
speedcolor[7] = '#8e3f04';
speedcolor[8] = '#ff525a';
speedcolor[9] = '#e00000';
speedcolor[10] = '#2594fb';
speedcolor[11] = '#0500c9';
speedcolor[12] = '#fa00e4';
speedcolor[13] = '#68008d';
speedcolor[14] = '#370143';
speedcolor[15] = '#370143';
speedcolor[16] = '#370143';
speedcolor[17] = '#370143';
speedcolor[18] = '#370143';
speedcolor[19] = '#370143';
speedcolor[20] = '#370143';
var kierWidth = 360 / kiercolor.length;
kiercolor.push(kiercolor[0]);
var nmea_format = str.indexOf("$GPGGA");
var gpx_format = str.indexOf("<trkpt");
var kml_format1 = str.indexOf("<gx:coord>");
var kml_format2 = str.indexOf("<LineString>");
if (typeof String.prototype.startsWith != 'function') {
// see below for better implementation!
String.prototype.startsWith = function (str){
return this.indexOf(str) === 0;
};
}
str.trim();
var is_polygon = str.startsWith("POLYGON");
if (is_polygon) {
var opacity = 0.0;
if (fillPolygon) {
opacity = 0.3;
}
var aStyle = new gps_OpenLayers.Style({
strokeDashstyle: 'solid',
strokeColor : "#ff0000",
strokeOpacity: 1.0,
strokeWidth: 4,
//strokeLinecap: 'square',
fillColor: '#ff0000',
fillOpacity: opacity
});
var wkt = new OpenLayers.Format.WKT();
var polygonFeature = wkt.read(str);
polygonFeature.geometry.transform(gps_wazeMap.displayProjection, gps_wazeMap.getProjectionObject());
// polygonFeature.style = aStyle;
var layers = gps_wazeMap.getLayersBy("uniqueName","__Polygon_View");
// layers.styleMap = new gps_OpenLayers.StyleMap(aStyle);
if(layers.length !== 0) {
var gps_layer = layers[0];
gps_layer.styleMap = new gps_OpenLayers.StyleMap(aStyle);
gps_layer.addFeatures([polygonFeature]);
}
return;
}
var numPoints = 0;
var sumDist = 0;
if (nmea_format >= 0) {
pt1 = null;
pt2 = null;
kier1 = 0;
kier2 = 0;
points.length = 0;
var p = -1;
for(;;) {
p = str.indexOf("$GPGGA", p+1);
if (p < 0) break;
var s = str.substr(p, 80);
var d = s.split(",");
var lat = min_to_deg(d[2]);
var lon = min_to_deg(d[4]);
if (d[3] == 'S') lat = -lat;
if (d[5] == 'W') lon = -lon;
var pt2 = new gps_OpenLayers.Geometry.Point(lon, lat).transform(proj1, proj2);
numPoints++;
time1 = time2;
time2 = parseInt(d[1]);
var s = time2 % 100;
time2 = (time2 - s) / 100;
var m = time2 % 100;
time2 = (time2 - m) / 100;
var g = time2 % 100;
time2 = (g*3600) + (m*60) + s;
var angle = 0;
var stop = 0;
var dist = 0;
var speed = 0;
var dt = 0;
if (pt1 !== null && pt2 !== null) {
angle = calc_azym(pt1, pt2, kierWidth);
dist = pt1.distanceTo(pt2);
dt = Math.abs(time2 - time1);
kier2 = parseInt(angle / kierWidth);
if (speedmode) {
var line = new OpenLayers.Geometry.LineString( [pt1, pt2] );
var geodist = line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var kmh = (geodist / dt) * 3.6;
speed = parseInt(kmh / 10);
if (speed < 0) speed = 0;
if (speed > 20) speed = 20;
kier2 = speed;
if (dist < 5 && kier1<=2 && kier2<=2) continue;
}
else {
if (dist < 5) continue;
}
if (dist > 10000) stop |= 1;
if (dt > 60) stop |= 1;
if (kier2 != kier1) stop |= 2;
}
//var ptFeature = new OpenLayers.Feature.Vector(pt1, {strokeColor: '#000000', labelText: '', lineWidth: 1 } );
//pointFeatures.push(ptFeature);
if (stop) {
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
}
points.length = 0;
if (stop == 2) points.push(pt1);
}
points.push(pt2);
pt1 = pt2;
kier1 = kier2;
}
}
if (gpx_format >= 0) {
pt1 = null;
pt2 = null;
kier1 = 0;
kier2 = 0;
points.length = 0;
var p = -1;
var pend = str.indexOf("</trkseg");
for (;;) {
p = str.indexOf("<trkpt", p+1);
if (p < 0) break;
if (p > pend) {
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
}
pt1 = null;
pt2 = null;
kier1 = 0;
kier2 = 0;
points.length = 0;
pend = str.indexOf("</trkseg", p+1);
}
var s = str.substr(p, 60);
var lat = 0;
var lon = 0;
var plat = s.indexOf('lat="');
var plon = s.indexOf('lon="');
if (plat>=0 && plon>=0) {
lat = parseFloat( s.substr(plat + 5, 10) );
lon = parseFloat( s.substr(plon + 5, 10) );
}
var pt2 = new gps_OpenLayers.Geometry.Point(lon, lat).transform(proj1, proj2);
numPoints++;
var angle = 0;
var stop = 0;
var dist = 0;
var speed = 0;
var dt = 0;
if (speedmode) {
var p_speed = str.indexOf("<speed>", p);
var p_time = str.indexOf("<time>", p);
var p_trkend = str.indexOf("</trkpt", p);
if (p_time > p && p_time < p_trkend) {
var s = str.substr(p_time+6, 20);
var rok = parseInt( s.substr(0, 4) );
var mies = parseInt( s.substr(5, 2) );
var dzien = parseInt( s.substr(8, 2) );
var godz = parseInt( s.substr(11, 2) );
var minut = parseInt( s.substr(14, 2) );
var sek = parseInt( s.substr(17, 2) );
time1 = time2;
time2 = (dzien*24*3600) + (godz*3600) + (minut*60) + sek;
dt = Math.abs(time2 - time1);
var line = new OpenLayers.Geometry.LineString( [pt1, pt2] );
var geodist = line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var kmh = (geodist / dt) * 3.6;
speed = parseInt(kmh / 10);
if (speed < 0) speed = 0;
if (speed > 20) speed = 20;
}
else {
if (p_speed > p && p_speed < p_trkend) {
var s = str.substr(p_speed+7, 8);
var kmh = parseFloat(s) * 3.6;
speed = parseInt(kmh / 10);
if (speed < 0) speed = 0;
if (speed > 20) speed = 20;
}
}
}
if (pt1 !== null && pt2 !== null) {
angle = calc_azym(pt1, pt2, kierWidth);
dist = pt1.distanceTo(pt2);
kier2 = parseInt(angle / kierWidth);
if (speedmode) {
kier2 = speed;
if (dist < 5 && kier1<=2 && kier2<=2) continue;
}
else {
if (dist < 5) continue;
}
if (dist > 10000) stop |= 1;
if (kier2 != kier1) stop |= 2;
}
//var ptFeature = new OpenLayers.Feature.Vector(pt1, {strokeColor: '#000000', labelText: '', lineWidth: 1 } );
//pointFeatures.push(ptFeature);
if (stop) {
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
}
points.length = 0;
if (stop == 2) points.push(pt1);
}
points.push(pt2);
pt1 = pt2;
kier1 = kier2;
}
}
if (kml_format1 >= 0) {
pt1 = null;
pt2 = null;
kier1 = 0;
kier2 = 0;
points.length = 0;
var p = -1;
var pend = str.indexOf("</gx:Track>");
for(;;) {
p = str.indexOf("<gx:coord>", p+1);
if (p < 0) break;
if (p > pend) {
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
}
pt1 = null;
pt2 = null;
kier1 = 0;
kier2 = 0;
points.length = 0;
pend = str.indexOf("</gx:Track>", pend + 1);
}
var s = str.substr(p + 10, 30);
var coord = s.split(" ");
var lon = parseFloat( coord[0] );
var lat = parseFloat( coord[1] );
var pt2 = new gps_OpenLayers.Geometry.Point(lon, lat).transform(proj1, proj2);
numPoints++;
var angle = 0;
var stop = 0;
var dist = 0;
var speed = 0;
var dt = 0;
if (pt1 !== null && pt2 !== null) {
angle = calc_azym(pt1, pt2, kierWidth);
dist = pt1.distanceTo(pt2);
dt = 0;
kier2 = parseInt(angle / kierWidth);
if (speedmode) {
kier2 = 0;
}
else {
if (dist < 5) continue;
}
if (dist > 10000) stop |= 1;
if (dt > 60) stop |= 1;
if (kier2 != kier1) stop |= 2;
}
if (stop) {
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
}
points.length = 0;
if (stop == 2) points.push(pt1);
}
points.push(pt2);
pt1 = pt2;
kier1 = kier2;
}
}
else if (kml_format2 >= 0) {
pt1 = null;
pt2 = null;
kier1 = 0;
kier2 = 0;
points.length = 0;
var p = -1;
for(;;) {
p = str.indexOf("<LineString>", p + 1);
if (p < 0) break;
var block_start = str.indexOf("<coordinates>", p);
var block_end = str.indexOf("</coordinates>", p);
if (block_start>=0 && block_end>=0) {
block_start += 13;
var s = str.substr(block_start, block_end - block_start);
var coords = s.match(/\S+/g);
pt1 = null;
pt2 = null;
kier1 = 0;
kier2 = 0;
points.length = 0;
for(var i=0; i<coords.length; i++) {
var xyz = coords[i].split(",");
if (xyz[0]==='' || xyz[1]==='') continue;
var lon = parseFloat(xyz[0]);
var lat = parseFloat(xyz[1]);
var pt2 = new gps_OpenLayers.Geometry.Point(lon, lat).transform(proj1, proj2);
numPoints++;
var angle = 0;
var stop = 0;
var dist = 0;
var speed = 0;
var dt = 0;
if (pt1 !== null && pt2 !== null) {
angle = calc_azym(pt1, pt2, kierWidth);
dist = pt1.distanceTo(pt2);
dt = Math.abs(time2 - time1);
kier2 = parseInt(angle / kierWidth);
if (speedmode) {
kier2 = 0;
}
else {
if (dist < 5) continue;
}
if (dist > 10000) stop |= 1;
if (dt > 60) stop |= 1;
if (kier2 != kier1) stop |= 2;
}
if (stop) {
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
}
points.length = 0;
if (stop == 2) points.push(pt1);
}
points.push(pt2);
pt1 = pt2;
kier1 = kier2;
}
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
}
}
}
}
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
points.length = 0;
}
if (lineFeatures.length === 0) {
pt1 = null;
pt2 = null;
kier1 = 0;
kier2 = 0;
points.length = 0;
var lines = str.split("\n");
if (lines.length >= 5) {
var l0 = lines[0].split(',');
var l1 = lines[1].split(',');
var l2 = lines[2].split(',');
var l3 = lines[3].split(',');
var l4 = lines[4].split(',');
var s0 = '';
var s1 = '';
var s2 = '';
var s3 = '';
var s4 = '';
if (l0.length >= 2) s0 = l0[1].trim().toUpperCase();
if (l1.length >= 2) s1 = l1[1].trim().toUpperCase();
if (l2.length >= 2) s2 = l2[1].trim().toUpperCase();
if (l3.length >= 2) s3 = l3[1].trim().toUpperCase();
if (l4.length >= 2) s4 = l4[1].trim().toUpperCase();
var len = s0.length + s1.length + s2.length + s3.length + s4.length;
var c0 = s0.charCodeAt(0);
var c1 = s1.charCodeAt(0);
var c2 = s2.charCodeAt(0);
var c3 = s3.charCodeAt(0);
var c4 = s4.charCodeAt(0);
if ( len==5 && s0=="S" && c1>=65 && c1<=90 && c2>=65 && c2<=90 && c3>=65 && c3<=90 && c4>=65 && c4<=90 ) {
for(var i=1; i<lines.length; i++) {
var line = lines[i].split(',');
if (line.length < 5) continue;
var mode = line[1].trim();
if (mode != 'A') { numPoints++; continue; }
var lon = parseInt(line[2].trim()) / 1000000.0;
var lat = parseInt(line[3].trim()) / 1000000.0;
var pt2 = new gps_OpenLayers.Geometry.Point(lon, lat).transform(proj1, proj2);
numPoints++;
time1 = time2;
time2 = parseInt(line[0]);
var angle = 0;
var stop = 0;
var dist = 0;
var speed = 0;
var dt = 0;
if (pt1 !== null && pt2 !== null) {
angle = calc_azym(pt1, pt2, kierWidth);
dist = pt1.distanceTo(pt2);
dt = Math.abs(time2 - time1);
kier2 = parseInt(angle / kierWidth);
if (speedmode) {
var line = new OpenLayers.Geometry.LineString( [pt1, pt2] );
var geodist = line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var kmh = (geodist / dt) * 3.6;
speed = parseInt(kmh / 10);
alert("kmh "+ kmh + "\nspeed: speed");
if (speed < 0) speed = 0;
if (speed > 20) speed = 20;
kier2 = speed;
if (dist < 5 && kier1<=2 && kier2<=2) continue;
}
else {
if (dist < 5) continue;
}
if (dist > 10000) stop |= 1;
if (dt > 60) stop |= 1;
if (kier2 != kier1) stop |= 2;
}
if (stop) {
if (points.length >= 2) {
var k = kiercolor[kier1];
var szer = 3;
if (speedmode) {
k = speedcolor[kier1];
szer = 6;
}
var line = new gps_OpenLayers.Geometry.LineString(points);
sumDist += line.getGeodesicLength(new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new gps_OpenLayers.Feature.Vector(line, {strokeColor: k, labelText: '', lineWidth: szer } );
lineFeatures.push(lineFeature);
}
points.length = 0; //points = []; //points.splice(0, 99999999);
if (stop == 2) points.push(pt1);
}
points.push(pt2);
pt1 = pt2;
}
}
}
}
var layers = gps_wazeMap.getLayersBy("uniqueName","__WME_GPS_Track");
if(layers.length !== 0) {
var gps_layer = layers[0];
if (lineFeatures.length > 0) gps_layer.addFeatures(lineFeatures);
if (pointFeatures.length > 0) gps_layer.addFeatures(pointFeatures);
}
if (lineFeatures.length > 0) {
obj1.value = '';
}
obj2.innerHTML = 'Processed: ' + '\n';
obj2.innerHTML += numPoints + ' points, ';
obj2.innerHTML += parseInt(sumDist/10) / 100 + ' km.';
}
function clear_layers()
{
let layers = gps_wazeMap.getLayersBy("uniqueName","__WME_GPS_Track");
if(layers.length !== 0) {
var gps_layer = layers[0];
gps_layer.removeAllFeatures();
}
layers = gps_wazeMap.getLayersBy("uniqueName","__Polygon_View");
// layers.styleMap = new gps_OpenLayers.StyleMap(aStyle);
if(layers.length !== 0) {
var gps_layer = layers[0];
gps_layer.removeAllFeatures();
}
}
//---------------------------------------------------------------------------------------
function Draw_WME_GPS_Track()
{
gps_wazeMap = W.map;
gps_wazeModel = W.model;
gps_OpenLayers = OpenLayers;
var layers = gps_wazeMap.getLayersBy("uniqueName","__WME_GPS_Track");
if(layers.length === 0) {
var gps_style = new gps_OpenLayers.Style({
strokeDashstyle: 'solid',
strokeColor : "${strokeColor}",
strokeOpacity: 1.0,
strokeWidth: "${lineWidth}",
//strokeLinecap: 'square',
fillColor: '#000000',
fillOpacity: 1.0,
pointRadius: 2,
fontWeight: "normal",
label : "${labelText}",
fontFamily: "Tahoma, Courier New",
labelOutlineColor: "#FFFFFF",
labelOutlineWidth: 2,
fontColor: '#000000',
fontSize: "10px"
});
var gps_mapLayer = new gps_OpenLayers.Layer.Vector("GPS Track View", {
displayInLayerSwitcher: true,
uniqueName: "__WME_GPS_Track",
styleMap: new gps_OpenLayers.StyleMap(gps_style)
});
I18n.translations[I18n.currentLocale()].layers.name["__WME_GPS_Track"] = "GPS Track View";
gps_wazeMap.addLayer(gps_mapLayer);
gps_mapLayer.setVisibility(true);
var polygon_mapLayer = new gps_OpenLayers.Layer.Vector("Polygon View", {
displayInLayerSwitcher: true,
uniqueName: "__Polygon_View"
// styleMap: new gps_OpenLayers.StyleMap(gps_style)
});
I18n.translations[I18n.currentLocale()].layers.name["__Polygon_View"] = "Polygon View";
gps_wazeMap.addLayer(polygon_mapLayer);
polygon_mapLayer.setVisibility(true);
var cnt = '';
cnt += '<br><div id="wme_gps_layer" style="color:#000000; ">';
cnt += '<b>GPS Track View:</b>';
cnt += '<textarea id="wme_gps_layer_content" style="font-family: Tahoma; font-size:9px; min-width:270px; max-width:270px; width:270px; min-height:100px; height: 100px; " ';
cnt += 'placeholder="Paste a gps track (nmea, gpx, kml, gps.csv) or a polygon (WKT format) here..." ></textarea>';
cnt += '<br>';
cnt += '</div>';
var btn = $('<button id="wme_gps_layer_button" title="" >Add feature</button>');
//btn.click(gps_parse);
var spd = ' <input id="wme_gps_layer_speed" type="checkbox" title="Colour GPS tracks by speed" ><span style="font-family: Tahoma; font-size:9px; position:relative; top:-3px;"> Speed</span>';
var follPolygon = ' <input id="wme_layer_polygon" type="checkbox" checked title="Color fill Polygon" ><span style="font-family: Tahoma; font-size:9px; position:relative; top:-3px;"> Color fill polygon</span>';
var btnClear = $('<button id="wme_clear_layers_button" title="" >Clear</button>');
//btnClear.click(clear_layers);
var info = '<p style="font-family: Tahoma; font-size:9px; color:#808080; " id="wme_gps_layer_summary" ></p>';
let $tab = $("<div>", {style:"padding:8px 16px", id:"WMEGPSTrackViewSettings"});
$tab.append(cnt);
$tab.append(btn);
$tab.append(spd);
$tab.append(follPolygon);
$tab.append("<br>");
$tab.append(btnClear);
$tab.append(info);
new WazeWrap.Interface.Tab('GPS', $tab.html(), hookClickEvents);
//new WazeWrap.Interface.Tab('<span class="fa fa-map-o"></span>', $tab.html());
/*$("#sidepanel-drives").append(cnt);
$("#sidepanel-drives").append(btn);
$("#sidepanel-drives").append(spd);
$("#sidepanel-drives").append(follPolygon);
$("#sidepanel-drives").append("<br>");
$("#sidepanel-drives").append(btnClear);
$("#sidepanel-drives").append(info);*/
function hookClickEvents(){
$('#wme_clear_layers_button').click(clear_layers);
$('#wme_gps_layer_button').click(gps_parse);
}
}
}
//---------------------------------------------------------------------------------------
bootstrap_WME_GPS_Track();