{"theJson":"var af = null;\nvar el = null;\nvar p = null;\nvar m = null;\nvar gj = null;\nvar counter = 0;\nvar bearing = 0;\n\nvar trackNav = '\/img\/navigation.png';\nvar trackDot = '\/img\/dot-black.gif';\nvar currentStyle = map.getStyle();\n\nif (currentStyle !== undefined && currentStyle != null && JSON.stringify(currentStyle).indexOf(\"satellite-\") != -1) {\n    trackNav = '\/img\/navigation-yellow.png';\n    trackDot = '\/img\/dot-yellow.gif';\n}\n\nvar picList = $('#trip-pics-list');\npicList.html('<p><i class=\"fa-regular fa-spinner fa-spin fa-2xl\"><\/i><\/p><p>Loading Previews...<\/p>');\nvar plHtml = '';\n\n                                        gj = {\"type\":\"Feature\",\"geometry\":{\"type\":\"LineString\",\"coordinates\":[[\"-111.03603\",\"32.26385\",743],[\"-111.03598\",\"32.26383\",-103],[\"-111.03596\",\"32.26382\",-103],[\"-111.67656\",\"32.81294\",461],[\"-111.76260\",\"32.82815\",440],[\"-111.87225\",\"32.82822\",425],[\"-111.96826\",\"32.82845\",425],[\"-112.07372\",\"32.83256\",494],[\"-112.18202\",\"32.83560\",590],[\"-112.28778\",\"32.84612\",545],[\"-112.39134\",\"32.85962\",542],[\"-112.49225\",\"32.89342\",-103],[\"-112.59628\",\"32.90904\",-103],[\"-112.67844\",\"32.93441\",-103],[\"-112.72214\",\"32.94648\",-103],[\"-112.73141\",\"32.94478\",-103],[\"-112.73134\",\"32.94468\",-103],[\"-114.20511\",\"33.38383\",437],[\"-114.20514\",\"33.38385\",434],[\"-114.20511\",\"33.38383\",434],[\"-114.20514\",\"33.38205\",437],[\"-114.20612\",\"33.37431\",437],[\"-114.20720\",\"33.36552\",440],[\"-114.20811\",\"33.35818\",443],[\"-114.20900\",\"33.35098\",440],[\"-114.20985\",\"33.34388\",446],[\"-114.21034\",\"33.33961\",452],[\"-114.21121\",\"33.33260\",452],[\"-114.21222\",\"33.32457\",455],[\"-114.21318\",\"33.31643\",458],[\"-114.21396\",\"33.30999\",458],[\"-114.21616\",\"33.30265\",461],[\"-114.21948\",\"33.29610\",464],[\"-114.22258\",\"33.28996\",452],[\"-114.22543\",\"33.28442\",458],[\"-114.22780\",\"33.27978\",455],[\"-114.23097\",\"33.27353\",458],[\"-114.23451\",\"33.26655\",461],[\"-114.23553\",\"33.26318\",461],[\"-114.23001\",\"33.25845\",473],[\"-114.22491\",\"33.25402\",476],[\"-114.21815\",\"33.25068\",488],[\"-114.21729\",\"33.24975\",491],[\"-114.21689\",\"33.24967\",488],[\"-114.21059\",\"33.24625\",500],[\"-114.20351\",\"33.24558\",506],[\"-114.19350\",\"33.24420\",500],[\"-114.18256\",\"33.24275\",488],[\"-114.17149\",\"33.23968\",479],[\"-114.16063\",\"33.23798\",470],[\"-114.15089\",\"33.23780\",464],[\"-114.14673\",\"33.23390\",461],[\"-114.13753\",\"33.23116\",452],[\"-114.12572\",\"33.22808\",440],[\"-114.12407\",\"33.22755\",440],[\"-114.12360\",\"33.22718\",440],[\"-114.11345\",\"33.22121\",431],[\"-114.10023\",\"33.21643\",0],[\"-114.08942\",\"33.21373\",410],[\"-114.08182\",\"33.20994\",404],[\"-114.07886\",\"33.20846\",401],[\"-114.07323\",\"33.20565\",395],[\"-114.06540\",\"33.20174\",389],[\"-114.06165\",\"33.19898\",386],[\"-114.05573\",\"33.19479\",-103],[\"-114.04404\",\"33.18962\",-103],[\"-114.04016\",\"33.18749\",368],[\"-114.03475\",\"33.18589\",0],[\"-114.02574\",\"33.18121\",356],[\"-114.02109\",\"33.18053\",356],[\"-114.02112\",\"33.18053\",356],[\"-114.01993\",\"33.18216\",0],[\"-114.01590\",\"33.19036\",356],[\"-114.01399\",\"33.19898\",359],[\"-114.01201\",\"33.20132\",362],[\"-114.01039\",\"33.20416\",365],[\"-114.00946\",\"33.20653\",368],[\"-114.00871\",\"33.20794\",371],[\"-114.00839\",\"33.21191\",377],[\"-114.00533\",\"33.21598\",383],[\"-114.00375\",\"33.21827\",386],[\"-114.00174\",\"33.22277\",0],[\"-114.00140\",\"33.22444\",0],[\"-113.99994\",\"33.22667\",398],[\"-113.99809\",\"33.22845\",404],[\"-113.99599\",\"33.23302\",410],[\"-113.99423\",\"33.23767\",419],[\"-113.99431\",\"33.23769\",425],[\"-113.99434\",\"33.23768\",0],[\"-113.99434\",\"33.23768\",425],[\"-113.99420\",\"33.23651\",425],[\"-113.99768\",\"33.22956\",410],[\"-114.00089\",\"33.22583\",401],[\"-114.00179\",\"33.22258\",398],[\"-114.00308\",\"33.21954\",389],[\"-114.00455\",\"33.21656\",386],[\"-114.00676\",\"33.21530\",386],[\"-114.00839\",\"33.21211\",380],[\"-114.00966\",\"33.20581\",371],[\"-114.01120\",\"33.20293\",371],[\"-114.01328\",\"33.20036\",368],[\"-114.01433\",\"33.19681\",365],[\"-114.01627\",\"33.18942\",362],[\"-114.01993\",\"33.18214\",365],[\"-114.02679\",\"33.18154\",368],[\"-114.03444\",\"33.18571\",374],[\"-114.04172\",\"33.18832\",0],[\"-114.04515\",\"33.19021\",383],[\"-114.04590\",\"33.19056\",386],[\"-114.04613\",\"33.19074\",383],[\"-114.05078\",\"33.19288\",386],[\"-114.05991\",\"33.19773\",-103],[\"-114.06544\",\"33.20173\",401],[\"-114.07034\",\"33.20421\",407],[\"-114.07748\",\"33.20776\",410],[\"-114.08321\",\"33.21053\",416],[\"-114.08722\",\"33.21265\",422],[\"-114.10149\",\"33.21651\",-103],[\"-114.10928\",\"33.21976\",-103],[\"-114.11617\",\"33.22369\",-103],[\"-114.12335\",\"33.22704\",-103],[\"-114.13114\",\"33.22974\",0],[\"-114.13380\",\"33.23030\",-103],[\"-114.13484\",\"33.23055\",-103],[\"-114.14235\",\"33.23228\",-103],[\"-114.14909\",\"33.23642\",-103],[\"-114.15361\",\"33.23709\",-103],[\"-114.16090\",\"33.23809\",-103],[\"-114.16875\",\"33.23887\",-103],[\"-114.17690\",\"33.24173\",-103],[\"-114.18475\",\"33.24346\",-103],[\"-114.18610\",\"33.24387\",494],[\"-114.18884\",\"33.24436\",497],[\"-114.19621\",\"33.24420\",506],[\"-114.20511\",\"33.24513\",506],[\"-114.21391\",\"33.24700\",-103],[\"-114.21382\",\"33.24695\",503],[\"-114.21382\",\"33.24723\",497],[\"-114.22386\",\"33.25315\",482],[\"-114.23343\",\"33.26143\",461],[\"-114.23685\",\"33.27083\",455],[\"-114.22835\",\"33.28559\",452],[\"-114.22084\",\"33.29858\",437],[\"-114.21741\",\"33.30370\",437],[\"-114.21602\",\"33.31333\",0],[\"-114.21619\",\"33.32470\",437],[\"-114.21620\",\"33.32790\",437],[\"-114.21519\",\"33.32981\",437],[\"-114.21117\",\"33.33279\",440],[\"-114.21007\",\"33.34172\",434],[\"-114.20912\",\"33.34966\",431],[\"-114.20786\",\"33.35999\",428],[\"-114.20651\",\"33.37099\",425],[\"-114.20583\",\"33.37672\",-103],[\"-114.20514\",\"33.38383\",-103],[\"-114.20517\",\"33.38381\",0],[\"-114.21693\",\"33.31107\",-103],[\"-114.25044\",\"33.23490\",0],[\"-114.27705\",\"33.17014\",347],[\"-114.28670\",\"33.13834\",317],[\"-114.29236\",\"33.05864\",0],[\"-114.29013\",\"32.97504\",230],[\"-114.33575\",\"32.89717\",149],[\"-114.37437\",\"32.82926\",95],[\"-114.39651\",\"32.76912\",44],[\"-114.43217\",\"32.70826\",0],[\"-114.44058\",\"32.67028\",86],[\"-114.43640\",\"32.67019\",89],[\"-114.44347\",\"32.66801\",74],[\"-114.44336\",\"32.66793\",-103],[\"-114.44341\",\"32.66800\",-103],[\"-114.44333\",\"32.66801\",0],[\"-114.38728\",\"32.66393\",-103],[\"-114.30693\",\"32.67250\",-103],[\"-114.20875\",\"32.64880\",0],[\"-114.10464\",\"32.67060\",-103],[\"-113.99793\",\"32.68649\",0],[\"-113.88765\",\"32.70337\",-103],[\"-113.78001\",\"32.71962\",-103],[\"-113.68019\",\"32.74335\",-103],[\"-113.57233\",\"32.78460\",-103],[\"-113.54005\",\"32.79942\",-103],[\"-113.53085\",\"32.80423\",-103],[\"-113.43237\",\"32.82563\",-103],[\"-113.32777\",\"32.83928\",-103],[\"-113.22522\",\"32.85701\",-103],[\"-113.12508\",\"32.87461\",-103],[\"-113.02475\",\"32.89674\",-103],[\"-112.92555\",\"32.91592\",-103],[\"-112.82816\",\"32.92897\",-103],[\"-112.80432\",\"32.93153\",0],[\"-112.74493\",\"32.94157\",-103],[\"-112.73127\",\"32.94430\",0],[\"-112.73796\",\"32.94284\",203],[\"-112.68286\",\"32.93815\",233],[\"-112.61229\",\"32.91224\",311],[\"-112.50366\",\"32.89687\",419],[\"-112.41545\",\"32.86556\",509],[\"-112.31419\",\"32.84846\",563],[\"-112.21802\",\"32.83753\",548],[\"-112.11452\",\"32.83355\",545],[\"-112.01047\",\"32.82948\",437],[\"-111.90570\",\"32.82808\",419],[\"-111.72621\",\"32.83405\",-103],[\"-111.69362\",\"32.82300\",446],[\"-111.53676\",\"32.73074\",0],[\"-111.44930\",\"32.68452\",0],[\"-111.36879\",\"32.62761\",551],[\"-111.30524\",\"32.55166\",0],[\"-111.24078\",\"32.47930\",-103],[\"-111.15919\",\"32.42109\",-103],[\"-111.09186\",\"32.36066\",650],[\"-111.03326\",\"32.29728\",674],[\"-111.02583\",\"32.27106\",698],[\"-111.03603\",\"32.26386\",707],[\"-111.03612\",\"32.26408\",0],[\"-111.03612\",\"32.26374\",-103]]},\"properties\":{\"stroke\":\"#ff00ff\",\"stroke-opacity\":1,\"stroke-width\":1}};\n                if (gj.type === 'Feature' && gj.geometry.type === 'LineString') {\n                    var sourceName = 'Combined Devices - 0bf7-35cb5d-7ef7-6a34a3e60f97b';\n                    map.addSource(sourceName, { type: 'geojson', data: gj });\n\n                    \/\/ ['get', 'stroke']\n                    map.addLayer({\n                        id: 'Combined Devices - 0bf7-35cb5d-7ef7-6a34a3e60f97b',\n                        source: sourceName,\n                        type: 'line',\n                        paint: {\n                            'line-color': ['get', 'stroke'],\n                            'line-width': ['get', 'stroke-width'],\n                            'line-opacity': ['get', 'stroke-opacity'],\n                        },\n                        filter: [\"==\", \"$type\", \"LineString\"]\n                    });\n\n                    gj.geometry.coordinates.forEach(function(lngLat) {\n                    bounds.extend(lngLat);\n                    });\n\n                    layers.push('Combined Devices - 0bf7-35cb5d-7ef7-6a34a3e60f97b');\n                }\n                                                af = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.03603\",\"32.26385\",743]},\"properties\":{\"tripId\":134821,\"messageId\":50979962,\"messageDateTime\":\"2026-04-28 18:26:00\",\"messageDateTimeUTC\":\"2026-04-29T01:26:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":215,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"fa-solid fa-star\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n                if (af.type === 'Feature' && af.geometry.type === 'Point') {\n                    el = document.createElement('div');\n                    el.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: green; background-color: #fff; border-radius: 50%; border: 1px solid #000;\";\n                    el.innerHTML = '<i class=\"' + af.properties.icon + '\"><\/i>';\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50979962, 'TRACK'); });\n\n                    m = new mapboxgl.Marker({ 'element': el })\n                        .setLngLat(af.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(af.geometry.coordinates);\n                    markers.push(m);\n                    if (af.properties.smallPic !== undefined && af.properties.smallPic !== null && af.properties.smallPic.length > 0 && af.properties.largePic !== undefined && af.properties.largePic !== null && af.properties.largePic.length > 0) {\n                        a = document.createElement('div');\n                        a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + af.properties.color +  \";\";\n                        a.innerHTML = '<a target=\"_blank\" href=\"' + af.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + af.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                        m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                            .setLngLat(af.geometry.coordinates)\n                            .addTo(map);\n                        markers.push(m);\n                        markersWithPics.push(m);\n                        picListMarkers['0'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + af.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + af.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'0\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.03598\",\"32.26383\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50980284,\"messageDateTime\":\"2026-04-28 19:05:31\",\"messageDateTimeUTC\":\"2026-04-29T02:05:31Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":115,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50980284, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['1'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'1\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.03596\",\"32.26382\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50980283,\"messageDateTime\":\"2026-04-28 19:09:34\",\"messageDateTimeUTC\":\"2026-04-29T02:09:34Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":120,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50980283, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['2'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'2\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.67656\",\"32.81294\",461]},\"properties\":{\"tripId\":134821,\"messageId\":50987655,\"messageDateTime\":\"2026-04-29 08:54:55\",\"messageDateTimeUTC\":\"2026-04-29T15:54:55Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.9\",\"kph\":\"6.2\",\"knots\":\"3.4\",\"bearing\":315,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50987655, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['3'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'3\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.76260\",\"32.82815\",440]},\"properties\":{\"tripId\":134821,\"messageId\":50987654,\"messageDateTime\":\"2026-04-29 08:59:56\",\"messageDateTimeUTC\":\"2026-04-29T15:59:56Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"61.1\",\"kph\":\"98.3\",\"knots\":\"53.1\",\"bearing\":281,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50987654, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['4'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'4\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.87225\",\"32.82822\",425]},\"properties\":{\"tripId\":134821,\"messageId\":50987928,\"messageDateTime\":\"2026-04-29 09:05:06\",\"messageDateTimeUTC\":\"2026-04-29T16:05:06Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"74.0\",\"kph\":\"119.0\",\"knots\":\"64.3\",\"bearing\":270,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50987928, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['5'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'5\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.96826\",\"32.82845\",425]},\"properties\":{\"tripId\":134821,\"messageId\":50987927,\"messageDateTime\":\"2026-04-29 09:09:53\",\"messageDateTimeUTC\":\"2026-04-29T16:09:53Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"70.0\",\"kph\":\"112.5\",\"knots\":\"60.8\",\"bearing\":270,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50987927, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['6'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'6\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.07372\",\"32.83256\",494]},\"properties\":{\"tripId\":134821,\"messageId\":50987926,\"messageDateTime\":\"2026-04-29 09:14:52\",\"messageDateTimeUTC\":\"2026-04-29T16:14:52Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"73.8\",\"kph\":\"118.8\",\"knots\":\"64.1\",\"bearing\":272,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50987926, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['7'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'7\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.18202\",\"32.83560\",590]},\"properties\":{\"tripId\":134821,\"messageId\":50988179,\"messageDateTime\":\"2026-04-29 09:19:50\",\"messageDateTimeUTC\":\"2026-04-29T16:19:50Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"76.0\",\"kph\":\"122.4\",\"knots\":\"66.0\",\"bearing\":271,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988179, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['8'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'8\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.28778\",\"32.84612\",545]},\"properties\":{\"tripId\":134821,\"messageId\":50988178,\"messageDateTime\":\"2026-04-29 09:24:49\",\"messageDateTimeUTC\":\"2026-04-29T16:24:49Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"74.4\",\"kph\":\"119.8\",\"knots\":\"64.7\",\"bearing\":276,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988178, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['9'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'9\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.39134\",\"32.85962\",542]},\"properties\":{\"tripId\":134821,\"messageId\":50988381,\"messageDateTime\":\"2026-04-29 09:29:44\",\"messageDateTimeUTC\":\"2026-04-29T16:29:44Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"74.2\",\"kph\":\"119.5\",\"knots\":\"64.5\",\"bearing\":278,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988381, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['10'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'10\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.49225\",\"32.89342\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50988380,\"messageDateTime\":\"2026-04-29 09:34:46\",\"messageDateTimeUTC\":\"2026-04-29T16:34:46Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"75.2\",\"kph\":\"121.0\",\"knots\":\"65.4\",\"bearing\":291,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988380, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['11'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'11\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.59628\",\"32.90904\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50988379,\"messageDateTime\":\"2026-04-29 09:39:41\",\"messageDateTimeUTC\":\"2026-04-29T16:39:41Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"74.8\",\"kph\":\"120.4\",\"knots\":\"65.0\",\"bearing\":280,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988379, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['12'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'12\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.67844\",\"32.93441\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50988602,\"messageDateTime\":\"2026-04-29 09:44:43\",\"messageDateTimeUTC\":\"2026-04-29T16:44:43Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"60.6\",\"kph\":\"97.4\",\"knots\":\"52.6\",\"bearing\":290,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988602, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['13'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'13\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.72214\",\"32.94648\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50988601,\"messageDateTime\":\"2026-04-29 09:49:58\",\"messageDateTimeUTC\":\"2026-04-29T16:49:58Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"30.5\",\"kph\":\"49.0\",\"knots\":\"26.5\",\"bearing\":288,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988601, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['14'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'14\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.73141\",\"32.94478\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50988837,\"messageDateTime\":\"2026-04-29 09:54:41\",\"messageDateTimeUTC\":\"2026-04-29T16:54:41Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.0\",\"kph\":\"11.3\",\"knots\":\"6.1\",\"bearing\":257,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988837, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['15'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'15\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.73134\",\"32.94468\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50988836,\"messageDateTime\":\"2026-04-29 09:59:43\",\"messageDateTimeUTC\":\"2026-04-29T16:59:43Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.1\",\"kph\":\"0.1\",\"knots\":\"0.1\",\"bearing\":149,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50988836, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['16'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'16\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20511\",\"33.38383\",437]},\"properties\":{\"tripId\":134821,\"messageId\":50992848,\"messageDateTime\":\"2026-04-29 13:27:23\",\"messageDateTimeUTC\":\"2026-04-29T20:27:23Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"26.1\",\"kph\":\"42.1\",\"knots\":\"22.7\",\"bearing\":289,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50992848, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['17'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'17\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20514\",\"33.38385\",434]},\"properties\":{\"tripId\":134821,\"messageId\":50993054,\"messageDateTime\":\"2026-04-29 13:31:45\",\"messageDateTimeUTC\":\"2026-04-29T20:31:45Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":308,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993054, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['18'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'18\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20511\",\"33.38383\",434]},\"properties\":{\"tripId\":134821,\"messageId\":50993053,\"messageDateTime\":\"2026-04-29 13:36:44\",\"messageDateTimeUTC\":\"2026-04-29T20:36:44Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":128,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993053, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['19'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'19\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20514\",\"33.38205\",437]},\"properties\":{\"tripId\":134821,\"messageId\":50993255,\"messageDateTime\":\"2026-04-29 13:41:43\",\"messageDateTimeUTC\":\"2026-04-29T20:41:43Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.4\",\"kph\":\"2.4\",\"knots\":\"1.3\",\"bearing\":180,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993255, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['20'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'20\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20612\",\"33.37431\",437]},\"properties\":{\"tripId\":134821,\"messageId\":50993254,\"messageDateTime\":\"2026-04-29 13:46:42\",\"messageDateTimeUTC\":\"2026-04-29T20:46:42Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.5\",\"kph\":\"10.5\",\"knots\":\"5.6\",\"bearing\":186,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993254, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['21'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'21\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20720\",\"33.36552\",440]},\"properties\":{\"tripId\":134821,\"messageId\":50993253,\"messageDateTime\":\"2026-04-29 13:51:41\",\"messageDateTimeUTC\":\"2026-04-29T20:51:41Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.3\",\"kph\":\"11.8\",\"knots\":\"6.4\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993253, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['22'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'22\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20811\",\"33.35818\",443]},\"properties\":{\"tripId\":134821,\"messageId\":50993473,\"messageDateTime\":\"2026-04-29 13:56:43\",\"messageDateTimeUTC\":\"2026-04-29T20:56:43Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.1\",\"kph\":\"9.8\",\"knots\":\"5.3\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993473, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['23'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'23\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20900\",\"33.35098\",440]},\"properties\":{\"tripId\":134821,\"messageId\":50993472,\"messageDateTime\":\"2026-04-29 14:01:42\",\"messageDateTimeUTC\":\"2026-04-29T21:01:42Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.0\",\"kph\":\"9.8\",\"knots\":\"5.2\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993472, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['24'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'24\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20985\",\"33.34388\",446]},\"properties\":{\"tripId\":134821,\"messageId\":50993728,\"messageDateTime\":\"2026-04-29 14:06:39\",\"messageDateTimeUTC\":\"2026-04-29T21:06:39Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.9\",\"kph\":\"9.6\",\"knots\":\"5.2\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993728, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['25'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'25\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21034\",\"33.33961\",452]},\"properties\":{\"tripId\":134821,\"messageId\":50993727,\"messageDateTime\":\"2026-04-29 14:11:37\",\"messageDateTimeUTC\":\"2026-04-29T21:11:37Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.6\",\"kph\":\"5.8\",\"knots\":\"3.1\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993727, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['26'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'26\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21121\",\"33.33260\",452]},\"properties\":{\"tripId\":134821,\"messageId\":50993927,\"messageDateTime\":\"2026-04-29 14:16:39\",\"messageDateTimeUTC\":\"2026-04-29T21:16:39Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.8\",\"kph\":\"9.3\",\"knots\":\"5.1\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993927, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['27'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'27\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21222\",\"33.32457\",455]},\"properties\":{\"tripId\":134821,\"messageId\":50993926,\"messageDateTime\":\"2026-04-29 14:21:34\",\"messageDateTimeUTC\":\"2026-04-29T21:21:34Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.8\",\"kph\":\"11.0\",\"knots\":\"5.9\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993926, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['28'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'28\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21318\",\"33.31643\",458]},\"properties\":{\"tripId\":134821,\"messageId\":50993925,\"messageDateTime\":\"2026-04-29 14:27:00\",\"messageDateTimeUTC\":\"2026-04-29T21:27:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.3\",\"kph\":\"10.0\",\"knots\":\"5.5\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50993925, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['29'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'29\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21396\",\"33.30999\",458]},\"properties\":{\"tripId\":134821,\"messageId\":50994106,\"messageDateTime\":\"2026-04-29 14:31:32\",\"messageDateTimeUTC\":\"2026-04-29T21:31:32Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.0\",\"kph\":\"9.5\",\"knots\":\"5.2\",\"bearing\":185,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994106, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['30'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'30\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21616\",\"33.30265\",461]},\"properties\":{\"tripId\":134821,\"messageId\":50994105,\"messageDateTime\":\"2026-04-29 14:36:30\",\"messageDateTimeUTC\":\"2026-04-29T21:36:30Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.3\",\"kph\":\"10.1\",\"knots\":\"5.5\",\"bearing\":194,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994105, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['31'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'31\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21948\",\"33.29610\",464]},\"properties\":{\"tripId\":134821,\"messageId\":50994287,\"messageDateTime\":\"2026-04-29 14:41:27\",\"messageDateTimeUTC\":\"2026-04-29T21:41:27Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.9\",\"kph\":\"9.6\",\"knots\":\"5.2\",\"bearing\":202,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994287, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['32'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'32\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.22258\",\"33.28996\",452]},\"properties\":{\"tripId\":134821,\"messageId\":50994286,\"messageDateTime\":\"2026-04-29 14:46:27\",\"messageDateTimeUTC\":\"2026-04-29T21:46:27Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.5\",\"kph\":\"8.9\",\"knots\":\"4.8\",\"bearing\":202,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994286, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['33'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'33\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.22543\",\"33.28442\",458]},\"properties\":{\"tripId\":134821,\"messageId\":50994285,\"messageDateTime\":\"2026-04-29 14:51:22\",\"messageDateTimeUTC\":\"2026-04-29T21:51:22Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.1\",\"kph\":\"8.2\",\"knots\":\"4.5\",\"bearing\":203,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994285, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['34'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'34\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.22780\",\"33.27978\",455]},\"properties\":{\"tripId\":134821,\"messageId\":50994467,\"messageDateTime\":\"2026-04-29 14:56:19\",\"messageDateTimeUTC\":\"2026-04-29T21:56:19Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.2\",\"kph\":\"6.8\",\"knots\":\"3.7\",\"bearing\":203,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994467, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['35'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'35\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.23097\",\"33.27353\",458]},\"properties\":{\"tripId\":134821,\"messageId\":50994466,\"messageDateTime\":\"2026-04-29 15:01:16\",\"messageDateTimeUTC\":\"2026-04-29T22:01:16Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.7\",\"kph\":\"9.2\",\"knots\":\"5.0\",\"bearing\":202,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994466, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['36'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'36\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.23451\",\"33.26655\",461]},\"properties\":{\"tripId\":134821,\"messageId\":50994652,\"messageDateTime\":\"2026-04-29 15:06:13\",\"messageDateTimeUTC\":\"2026-04-29T22:06:13Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.3\",\"kph\":\"10.2\",\"knots\":\"5.5\",\"bearing\":202,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994652, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['37'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'37\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.23553\",\"33.26318\",461]},\"properties\":{\"tripId\":134821,\"messageId\":50994651,\"messageDateTime\":\"2026-04-29 15:11:11\",\"messageDateTimeUTC\":\"2026-04-29T22:11:11Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.9\",\"kph\":\"4.7\",\"knots\":\"2.5\",\"bearing\":194,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994651, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['38'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'38\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.23001\",\"33.25845\",473]},\"properties\":{\"tripId\":134821,\"messageId\":50994650,\"messageDateTime\":\"2026-04-29 15:16:08\",\"messageDateTimeUTC\":\"2026-04-29T22:16:08Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.6\",\"kph\":\"9.0\",\"knots\":\"4.8\",\"bearing\":135,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994650, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['39'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'39\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.22491\",\"33.25402\",476]},\"properties\":{\"tripId\":134821,\"messageId\":50994831,\"messageDateTime\":\"2026-04-29 15:21:05\",\"messageDateTimeUTC\":\"2026-04-29T22:21:05Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.1\",\"kph\":\"8.2\",\"knots\":\"4.4\",\"bearing\":136,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994831, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['40'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'40\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21815\",\"33.25068\",488]},\"properties\":{\"tripId\":134821,\"messageId\":50994830,\"messageDateTime\":\"2026-04-29 15:26:52\",\"messageDateTimeUTC\":\"2026-04-29T22:26:52Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.7\",\"kph\":\"7.6\",\"knots\":\"4.1\",\"bearing\":120,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50994830, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['41'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'41\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21729\",\"33.24975\",491]},\"properties\":{\"tripId\":134821,\"messageId\":50995005,\"messageDateTime\":\"2026-04-29 15:31:02\",\"messageDateTimeUTC\":\"2026-04-29T22:31:02Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.2\",\"kph\":\"1.9\",\"knots\":\"1.0\",\"bearing\":142,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995005, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['42'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'42\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21689\",\"33.24967\",488]},\"properties\":{\"tripId\":134821,\"messageId\":50995004,\"messageDateTime\":\"2026-04-29 15:35:56\",\"messageDateTimeUTC\":\"2026-04-29T22:35:56Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.2\",\"kph\":\"0.5\",\"knots\":\"0.2\",\"bearing\":103,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995004, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['43'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'43\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21059\",\"33.24625\",500]},\"properties\":{\"tripId\":134821,\"messageId\":50995198,\"messageDateTime\":\"2026-04-29 15:40:54\",\"messageDateTimeUTC\":\"2026-04-29T22:40:54Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.2\",\"kph\":\"8.5\",\"knots\":\"4.5\",\"bearing\":122,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995198, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['44'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'44\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20351\",\"33.24558\",506]},\"properties\":{\"tripId\":134821,\"messageId\":50995197,\"messageDateTime\":\"2026-04-29 15:45:52\",\"messageDateTimeUTC\":\"2026-04-29T22:45:52Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.0\",\"kph\":\"8.0\",\"knots\":\"4.3\",\"bearing\":96,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995197, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['45'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'45\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.19350\",\"33.24420\",500]},\"properties\":{\"tripId\":134821,\"messageId\":50995196,\"messageDateTime\":\"2026-04-29 15:50:51\",\"messageDateTimeUTC\":\"2026-04-29T22:50:51Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.1\",\"kph\":\"11.3\",\"knots\":\"6.2\",\"bearing\":99,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995196, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['46'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'46\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.18256\",\"33.24275\",488]},\"properties\":{\"tripId\":134821,\"messageId\":50995348,\"messageDateTime\":\"2026-04-29 15:55:48\",\"messageDateTimeUTC\":\"2026-04-29T22:55:48Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.8\",\"kph\":\"12.5\",\"knots\":\"6.7\",\"bearing\":99,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995348, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['47'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'47\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.17149\",\"33.23968\",479]},\"properties\":{\"tripId\":134821,\"messageId\":50995347,\"messageDateTime\":\"2026-04-29 16:00:46\",\"messageDateTimeUTC\":\"2026-04-29T23:00:46Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"8.1\",\"kph\":\"13.0\",\"knots\":\"7.0\",\"bearing\":108,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995347, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['48'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'48\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.16063\",\"33.23798\",470]},\"properties\":{\"tripId\":134821,\"messageId\":50995515,\"messageDateTime\":\"2026-04-29 16:05:46\",\"messageDateTimeUTC\":\"2026-04-29T23:05:46Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.7\",\"kph\":\"12.4\",\"knots\":\"6.7\",\"bearing\":100,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995515, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['49'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'49\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.15089\",\"33.23780\",464]},\"properties\":{\"tripId\":134821,\"messageId\":50995514,\"messageDateTime\":\"2026-04-29 16:10:42\",\"messageDateTimeUTC\":\"2026-04-29T23:10:42Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.8\",\"kph\":\"11.1\",\"knots\":\"5.9\",\"bearing\":91,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995514, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['50'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'50\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.14673\",\"33.23390\",461]},\"properties\":{\"tripId\":134821,\"messageId\":50995513,\"messageDateTime\":\"2026-04-29 16:15:41\",\"messageDateTimeUTC\":\"2026-04-29T23:15:41Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.3\",\"kph\":\"7.0\",\"knots\":\"3.8\",\"bearing\":138,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995513, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['51'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'51\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.13753\",\"33.23116\",452]},\"properties\":{\"tripId\":134821,\"messageId\":50995709,\"messageDateTime\":\"2026-04-29 16:20:40\",\"messageDateTimeUTC\":\"2026-04-29T23:20:40Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.7\",\"kph\":\"11.0\",\"knots\":\"5.9\",\"bearing\":109,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995709, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['52'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'52\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.12572\",\"33.22808\",440]},\"properties\":{\"tripId\":134821,\"messageId\":50995708,\"messageDateTime\":\"2026-04-29 16:26:17\",\"messageDateTimeUTC\":\"2026-04-29T23:26:17Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.7\",\"kph\":\"12.3\",\"knots\":\"6.7\",\"bearing\":107,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995708, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['53'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'53\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.12407\",\"33.22755\",440]},\"properties\":{\"tripId\":134821,\"messageId\":50995886,\"messageDateTime\":\"2026-04-29 16:30:40\",\"messageDateTimeUTC\":\"2026-04-29T23:30:40Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.4\",\"kph\":\"2.2\",\"knots\":\"1.2\",\"bearing\":111,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995886, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['54'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'54\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.12360\",\"33.22718\",440]},\"properties\":{\"tripId\":134821,\"messageId\":50995885,\"messageDateTime\":\"2026-04-29 16:35:36\",\"messageDateTimeUTC\":\"2026-04-29T23:35:36Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.5\",\"kph\":\"0.7\",\"knots\":\"0.4\",\"bearing\":133,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50995885, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['55'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'55\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.11345\",\"33.22121\",431]},\"properties\":{\"tripId\":134821,\"messageId\":50996026,\"messageDateTime\":\"2026-04-29 16:40:34\",\"messageDateTimeUTC\":\"2026-04-29T23:40:34Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"8.7\",\"kph\":\"13.9\",\"knots\":\"7.6\",\"bearing\":125,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996026, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['56'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'56\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.10023\",\"33.21643\",0]},\"properties\":{\"tripId\":134821,\"messageId\":50996025,\"messageDateTime\":\"2026-04-29 16:45:30\",\"messageDateTimeUTC\":\"2026-04-29T23:45:30Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"10.1\",\"kph\":\"16.3\",\"knots\":\"8.8\",\"bearing\":113,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996025, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['57'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'57\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.08942\",\"33.21373\",410]},\"properties\":{\"tripId\":134821,\"messageId\":50996024,\"messageDateTime\":\"2026-04-29 16:50:30\",\"messageDateTimeUTC\":\"2026-04-29T23:50:30Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.8\",\"kph\":\"12.6\",\"knots\":\"6.8\",\"bearing\":106,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996024, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['58'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'58\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.08182\",\"33.20994\",404]},\"properties\":{\"tripId\":134821,\"messageId\":50996147,\"messageDateTime\":\"2026-04-29 16:55:28\",\"messageDateTimeUTC\":\"2026-04-29T23:55:28Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.2\",\"kph\":\"9.9\",\"knots\":\"5.4\",\"bearing\":120,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996147, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['59'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'59\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.07886\",\"33.20846\",401]},\"properties\":{\"tripId\":134821,\"messageId\":50996146,\"messageDateTime\":\"2026-04-29 17:00:26\",\"messageDateTimeUTC\":\"2026-04-30T00:00:26Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.4\",\"kph\":\"3.9\",\"knots\":\"2.1\",\"bearing\":120,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996146, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['60'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'60\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.07323\",\"33.20565\",395]},\"properties\":{\"tripId\":134821,\"messageId\":50996265,\"messageDateTime\":\"2026-04-29 17:05:24\",\"messageDateTimeUTC\":\"2026-04-30T00:05:24Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.6\",\"kph\":\"7.4\",\"knots\":\"4.0\",\"bearing\":120,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996265, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['61'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'61\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.06540\",\"33.20174\",389]},\"properties\":{\"tripId\":134821,\"messageId\":50996264,\"messageDateTime\":\"2026-04-29 17:10:22\",\"messageDateTimeUTC\":\"2026-04-30T00:10:22Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.4\",\"kph\":\"10.3\",\"knots\":\"5.6\",\"bearing\":120,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996264, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['62'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'62\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.06165\",\"33.19898\",386]},\"properties\":{\"tripId\":134821,\"messageId\":50996263,\"messageDateTime\":\"2026-04-29 17:15:19\",\"messageDateTimeUTC\":\"2026-04-30T00:15:19Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.5\",\"kph\":\"5.6\",\"knots\":\"3.1\",\"bearing\":131,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996263, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['63'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'63\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.05573\",\"33.19479\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50996388,\"messageDateTime\":\"2026-04-29 17:20:16\",\"messageDateTimeUTC\":\"2026-04-30T00:20:16Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.5\",\"kph\":\"8.7\",\"knots\":\"4.7\",\"bearing\":130,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996388, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['64'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'64\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.04404\",\"33.18962\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":50996387,\"messageDateTime\":\"2026-04-29 17:25:48\",\"messageDateTimeUTC\":\"2026-04-30T00:25:48Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"8.2\",\"kph\":\"13.3\",\"knots\":\"7.2\",\"bearing\":117,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996387, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['65'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'65\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.04016\",\"33.18749\",368]},\"properties\":{\"tripId\":134821,\"messageId\":50996508,\"messageDateTime\":\"2026-04-29 17:30:09\",\"messageDateTimeUTC\":\"2026-04-30T00:30:09Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.7\",\"kph\":\"5.9\",\"knots\":\"3.2\",\"bearing\":123,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996508, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['66'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'66\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.03475\",\"33.18589\",0]},\"properties\":{\"tripId\":134821,\"messageId\":50996507,\"messageDateTime\":\"2026-04-29 17:35:03\",\"messageDateTimeUTC\":\"2026-04-30T00:35:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.0\",\"kph\":\"6.5\",\"knots\":\"3.5\",\"bearing\":109,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996507, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['67'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'67\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.02574\",\"33.18121\",356]},\"properties\":{\"tripId\":134821,\"messageId\":50996506,\"messageDateTime\":\"2026-04-29 17:40:03\",\"messageDateTimeUTC\":\"2026-04-30T00:40:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.3\",\"kph\":\"11.9\",\"knots\":\"6.4\",\"bearing\":121,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996506, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['68'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'68\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.02109\",\"33.18053\",356]},\"properties\":{\"tripId\":134821,\"messageId\":50996618,\"messageDateTime\":\"2026-04-29 17:45:02\",\"messageDateTimeUTC\":\"2026-04-30T00:45:02Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.3\",\"kph\":\"5.3\",\"knots\":\"2.8\",\"bearing\":99,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996618, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['69'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'69\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.02112\",\"33.18053\",356]},\"properties\":{\"tripId\":134821,\"messageId\":50996617,\"messageDateTime\":\"2026-04-29 17:50:00\",\"messageDateTimeUTC\":\"2026-04-30T00:50:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":270,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996617, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['70'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'70\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01993\",\"33.18216\",0]},\"properties\":{\"tripId\":134821,\"messageId\":50996717,\"messageDateTime\":\"2026-04-29 17:54:58\",\"messageDateTimeUTC\":\"2026-04-30T00:54:58Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.6\",\"kph\":\"2.5\",\"knots\":\"1.4\",\"bearing\":31,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996717, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['71'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'71\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01590\",\"33.19036\",356]},\"properties\":{\"tripId\":134821,\"messageId\":50996716,\"messageDateTime\":\"2026-04-29 17:59:58\",\"messageDateTimeUTC\":\"2026-04-30T00:59:58Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.3\",\"kph\":\"11.9\",\"knots\":\"6.4\",\"bearing\":22,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996716, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['72'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'72\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01399\",\"33.19898\",359]},\"properties\":{\"tripId\":134821,\"messageId\":50996839,\"messageDateTime\":\"2026-04-29 18:04:56\",\"messageDateTimeUTC\":\"2026-04-30T01:04:56Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.4\",\"kph\":\"11.8\",\"knots\":\"6.4\",\"bearing\":10,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996839, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['73'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'73\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01201\",\"33.20132\",362]},\"properties\":{\"tripId\":134821,\"messageId\":50996838,\"messageDateTime\":\"2026-04-29 18:09:55\",\"messageDateTimeUTC\":\"2026-04-30T01:09:55Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.4\",\"kph\":\"3.9\",\"knots\":\"2.1\",\"bearing\":35,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996838, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['74'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'74\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01039\",\"33.20416\",365]},\"properties\":{\"tripId\":134821,\"messageId\":50996837,\"messageDateTime\":\"2026-04-29 18:14:53\",\"messageDateTimeUTC\":\"2026-04-30T01:14:53Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.7\",\"kph\":\"4.2\",\"knots\":\"2.3\",\"bearing\":25,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996837, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['75'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'75\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00946\",\"33.20653\",368]},\"properties\":{\"tripId\":134821,\"messageId\":50996954,\"messageDateTime\":\"2026-04-29 18:19:50\",\"messageDateTimeUTC\":\"2026-04-30T01:19:50Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.1\",\"kph\":\"3.4\",\"knots\":\"1.8\",\"bearing\":18,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996954, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['76'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'76\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00871\",\"33.20794\",371]},\"properties\":{\"tripId\":134821,\"messageId\":50996953,\"messageDateTime\":\"2026-04-29 18:25:29\",\"messageDateTimeUTC\":\"2026-04-30T01:25:29Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.2\",\"kph\":\"1.8\",\"knots\":\"1.0\",\"bearing\":23,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50996953, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['77'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'77\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00839\",\"33.21191\",377]},\"properties\":{\"tripId\":134821,\"messageId\":50997075,\"messageDateTime\":\"2026-04-29 18:29:44\",\"messageDateTimeUTC\":\"2026-04-30T01:29:44Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.0\",\"kph\":\"6.2\",\"knots\":\"3.4\",\"bearing\":3,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997075, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['78'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'78\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00533\",\"33.21598\",383]},\"properties\":{\"tripId\":134821,\"messageId\":50997074,\"messageDateTime\":\"2026-04-29 18:34:41\",\"messageDateTimeUTC\":\"2026-04-30T01:34:41Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.0\",\"kph\":\"6.4\",\"knots\":\"3.5\",\"bearing\":32,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997074, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['79'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'79\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00375\",\"33.21827\",386]},\"properties\":{\"tripId\":134821,\"messageId\":50997073,\"messageDateTime\":\"2026-04-29 18:39:37\",\"messageDateTimeUTC\":\"2026-04-30T01:39:37Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.2\",\"kph\":\"3.5\",\"knots\":\"1.9\",\"bearing\":29,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997073, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['80'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'80\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00174\",\"33.22277\",0]},\"properties\":{\"tripId\":134821,\"messageId\":50997268,\"messageDateTime\":\"2026-04-29 18:49:25\",\"messageDateTimeUTC\":\"2026-04-30T01:49:25Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.0\",\"kph\":\"3.2\",\"knots\":\"1.8\",\"bearing\":20,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997268, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['81'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'81\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00140\",\"33.22444\",0]},\"properties\":{\"tripId\":134821,\"messageId\":50997267,\"messageDateTime\":\"2026-04-29 18:54:25\",\"messageDateTimeUTC\":\"2026-04-30T01:54:25Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.4\",\"kph\":\"2.3\",\"knots\":\"1.3\",\"bearing\":9,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997267, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['82'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'82\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99994\",\"33.22667\",398]},\"properties\":{\"tripId\":134821,\"messageId\":50997266,\"messageDateTime\":\"2026-04-29 18:59:25\",\"messageDateTimeUTC\":\"2026-04-30T01:59:25Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.2\",\"kph\":\"3.4\",\"knots\":\"1.9\",\"bearing\":28,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997266, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['83'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'83\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99809\",\"33.22845\",404]},\"properties\":{\"tripId\":134821,\"messageId\":50997359,\"messageDateTime\":\"2026-04-29 19:04:22\",\"messageDateTimeUTC\":\"2026-04-30T02:04:22Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.9\",\"kph\":\"3.2\",\"knots\":\"1.7\",\"bearing\":41,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997359, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['84'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'84\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99599\",\"33.23302\",410]},\"properties\":{\"tripId\":134821,\"messageId\":50997358,\"messageDateTime\":\"2026-04-29 19:09:19\",\"messageDateTimeUTC\":\"2026-04-30T02:09:19Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.1\",\"kph\":\"6.5\",\"knots\":\"3.6\",\"bearing\":21,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997358, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['85'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'85\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99423\",\"33.23767\",419]},\"properties\":{\"tripId\":134821,\"messageId\":50997357,\"messageDateTime\":\"2026-04-29 19:14:16\",\"messageDateTimeUTC\":\"2026-04-30T02:14:16Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.1\",\"kph\":\"6.5\",\"knots\":\"3.6\",\"bearing\":17,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 50997357, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['86'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'86\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99431\",\"33.23769\",425]},\"properties\":{\"tripId\":134821,\"messageId\":51001522,\"messageDateTime\":\"2026-04-30 05:40:25\",\"messageDateTimeUTC\":\"2026-04-30T12:40:25Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":286,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001522, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['87'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'87\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99434\",\"33.23768\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51001521,\"messageDateTime\":\"2026-04-30 05:44:38\",\"messageDateTimeUTC\":\"2026-04-30T12:44:38Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":248,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001521, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['88'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'88\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99434\",\"33.23768\",425]},\"properties\":{\"tripId\":134821,\"messageId\":51001520,\"messageDateTime\":\"2026-04-30 05:49:38\",\"messageDateTimeUTC\":\"2026-04-30T12:49:38Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":0,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001520, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['89'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'89\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99420\",\"33.23651\",425]},\"properties\":{\"tripId\":134821,\"messageId\":51001663,\"messageDateTime\":\"2026-04-30 05:54:32\",\"messageDateTimeUTC\":\"2026-04-30T12:54:32Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.0\",\"kph\":\"1.6\",\"knots\":\"0.9\",\"bearing\":174,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001663, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['90'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'90\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99768\",\"33.22956\",410]},\"properties\":{\"tripId\":134821,\"messageId\":51001662,\"messageDateTime\":\"2026-04-30 05:59:29\",\"messageDateTimeUTC\":\"2026-04-30T12:59:29Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.3\",\"kph\":\"10.2\",\"knots\":\"5.5\",\"bearing\":202,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001662, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['91'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'91\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00089\",\"33.22583\",401]},\"properties\":{\"tripId\":134821,\"messageId\":51001815,\"messageDateTime\":\"2026-04-30 06:04:27\",\"messageDateTimeUTC\":\"2026-04-30T13:04:27Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.9\",\"kph\":\"6.2\",\"knots\":\"3.4\",\"bearing\":215,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001815, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['92'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'92\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00179\",\"33.22258\",398]},\"properties\":{\"tripId\":134821,\"messageId\":51001814,\"messageDateTime\":\"2026-04-30 06:09:24\",\"messageDateTimeUTC\":\"2026-04-30T13:09:24Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.8\",\"kph\":\"4.5\",\"knots\":\"2.4\",\"bearing\":193,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001814, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['93'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'93\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00308\",\"33.21954\",389]},\"properties\":{\"tripId\":134821,\"messageId\":51001813,\"messageDateTime\":\"2026-04-30 06:14:21\",\"messageDateTimeUTC\":\"2026-04-30T13:14:21Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.7\",\"kph\":\"4.4\",\"knots\":\"2.3\",\"bearing\":199,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001813, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['94'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'94\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00455\",\"33.21656\",386]},\"properties\":{\"tripId\":134821,\"messageId\":51001959,\"messageDateTime\":\"2026-04-30 06:19:20\",\"messageDateTimeUTC\":\"2026-04-30T13:19:20Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.6\",\"kph\":\"4.3\",\"knots\":\"2.3\",\"bearing\":202,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001959, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['95'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'95\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00676\",\"33.21530\",386]},\"properties\":{\"tripId\":134821,\"messageId\":51001958,\"messageDateTime\":\"2026-04-30 06:24:18\",\"messageDateTimeUTC\":\"2026-04-30T13:24:18Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.8\",\"kph\":\"3.0\",\"knots\":\"1.6\",\"bearing\":235,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51001958, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['96'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'96\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00839\",\"33.21211\",380]},\"properties\":{\"tripId\":134821,\"messageId\":51002100,\"messageDateTime\":\"2026-04-30 06:29:16\",\"messageDateTimeUTC\":\"2026-04-30T13:29:16Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.9\",\"kph\":\"4.7\",\"knots\":\"2.5\",\"bearing\":203,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002100, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['97'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'97\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.00966\",\"33.20581\",371]},\"properties\":{\"tripId\":134821,\"messageId\":51002099,\"messageDateTime\":\"2026-04-30 06:34:15\",\"messageDateTimeUTC\":\"2026-04-30T13:34:15Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.3\",\"kph\":\"8.5\",\"knots\":\"4.6\",\"bearing\":189,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002099, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['98'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'98\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01120\",\"33.20293\",371]},\"properties\":{\"tripId\":134821,\"messageId\":51002098,\"messageDateTime\":\"2026-04-30 06:39:49\",\"messageDateTimeUTC\":\"2026-04-30T13:39:49Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.4\",\"kph\":\"3.8\",\"knots\":\"2.1\",\"bearing\":204,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002098, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['99'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'99\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01328\",\"33.20036\",368]},\"properties\":{\"tripId\":134821,\"messageId\":51002249,\"messageDateTime\":\"2026-04-30 06:44:12\",\"messageDateTimeUTC\":\"2026-04-30T13:44:12Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.9\",\"kph\":\"4.8\",\"knots\":\"2.5\",\"bearing\":214,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002249, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['100'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'100\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01433\",\"33.19681\",365]},\"properties\":{\"tripId\":134821,\"messageId\":51002248,\"messageDateTime\":\"2026-04-30 06:49:10\",\"messageDateTimeUTC\":\"2026-04-30T13:49:10Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.0\",\"kph\":\"5.0\",\"knots\":\"2.6\",\"bearing\":193,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002248, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['101'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'101\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01627\",\"33.18942\",362]},\"properties\":{\"tripId\":134821,\"messageId\":51002402,\"messageDateTime\":\"2026-04-30 06:54:08\",\"messageDateTimeUTC\":\"2026-04-30T13:54:08Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.3\",\"kph\":\"10.1\",\"knots\":\"5.5\",\"bearing\":192,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002402, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['102'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'102\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.01993\",\"33.18214\",365]},\"properties\":{\"tripId\":134821,\"messageId\":51002401,\"messageDateTime\":\"2026-04-30 06:59:07\",\"messageDateTimeUTC\":\"2026-04-30T13:59:07Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.6\",\"kph\":\"10.6\",\"knots\":\"5.8\",\"bearing\":202,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002401, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['103'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'103\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.02679\",\"33.18154\",368]},\"properties\":{\"tripId\":134821,\"messageId\":51002400,\"messageDateTime\":\"2026-04-30 07:04:05\",\"messageDateTimeUTC\":\"2026-04-30T14:04:05Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.8\",\"kph\":\"7.7\",\"knots\":\"4.2\",\"bearing\":264,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002400, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['104'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'104\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.03444\",\"33.18571\",374]},\"properties\":{\"tripId\":134821,\"messageId\":51002571,\"messageDateTime\":\"2026-04-30 07:09:03\",\"messageDateTimeUTC\":\"2026-04-30T14:09:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.4\",\"kph\":\"10.3\",\"knots\":\"5.6\",\"bearing\":303,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002571, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['105'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'105\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.04172\",\"33.18832\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51002741,\"messageDateTime\":\"2026-04-30 07:14:00\",\"messageDateTimeUTC\":\"2026-04-30T14:14:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.6\",\"kph\":\"9.0\",\"knots\":\"4.8\",\"bearing\":293,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002741, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['106'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'106\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.04515\",\"33.19021\",383]},\"properties\":{\"tripId\":134821,\"messageId\":51002740,\"messageDateTime\":\"2026-04-30 07:19:00\",\"messageDateTimeUTC\":\"2026-04-30T14:19:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.9\",\"kph\":\"4.6\",\"knots\":\"2.5\",\"bearing\":303,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002740, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['107'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'107\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.04590\",\"33.19056\",386]},\"properties\":{\"tripId\":134821,\"messageId\":51002739,\"messageDateTime\":\"2026-04-30 07:24:01\",\"messageDateTimeUTC\":\"2026-04-30T14:24:01Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.6\",\"kph\":\"1.0\",\"knots\":\"0.5\",\"bearing\":299,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002739, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['108'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'108\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.04613\",\"33.19074\",383]},\"properties\":{\"tripId\":134821,\"messageId\":51002921,\"messageDateTime\":\"2026-04-30 07:28:56\",\"messageDateTimeUTC\":\"2026-04-30T14:28:56Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.2\",\"kph\":\"0.4\",\"knots\":\"0.2\",\"bearing\":313,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002921, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['109'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'109\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.05078\",\"33.19288\",386]},\"properties\":{\"tripId\":134821,\"messageId\":51002920,\"messageDateTime\":\"2026-04-30 07:33:53\",\"messageDateTimeUTC\":\"2026-04-30T14:33:53Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.8\",\"kph\":\"5.9\",\"knots\":\"3.3\",\"bearing\":298,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002920, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['110'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'110\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.05991\",\"33.19773\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51002919,\"messageDateTime\":\"2026-04-30 07:39:30\",\"messageDateTimeUTC\":\"2026-04-30T14:39:30Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.7\",\"kph\":\"10.8\",\"knots\":\"5.8\",\"bearing\":302,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51002919, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['111'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'111\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.06544\",\"33.20173\",401]},\"properties\":{\"tripId\":134821,\"messageId\":51003116,\"messageDateTime\":\"2026-04-30 07:43:49\",\"messageDateTimeUTC\":\"2026-04-30T14:43:49Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.8\",\"kph\":\"9.5\",\"knots\":\"5.1\",\"bearing\":310,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003116, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['112'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'112\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.07034\",\"33.20421\",407]},\"properties\":{\"tripId\":134821,\"messageId\":51003115,\"messageDateTime\":\"2026-04-30 07:48:47\",\"messageDateTimeUTC\":\"2026-04-30T14:48:47Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.0\",\"kph\":\"6.4\",\"knots\":\"3.5\",\"bearing\":301,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003115, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['113'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'113\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.07748\",\"33.20776\",410]},\"properties\":{\"tripId\":134821,\"messageId\":51003329,\"messageDateTime\":\"2026-04-30 07:53:44\",\"messageDateTimeUTC\":\"2026-04-30T14:53:44Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.8\",\"kph\":\"9.3\",\"knots\":\"5.1\",\"bearing\":300,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003329, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['114'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'114\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.08321\",\"33.21053\",416]},\"properties\":{\"tripId\":134821,\"messageId\":51003328,\"messageDateTime\":\"2026-04-30 07:58:41\",\"messageDateTimeUTC\":\"2026-04-30T14:58:41Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.6\",\"kph\":\"7.5\",\"knots\":\"4.0\",\"bearing\":300,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003328, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['115'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'115\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.08722\",\"33.21265\",422]},\"properties\":{\"tripId\":134821,\"messageId\":51003327,\"messageDateTime\":\"2026-04-30 08:03:38\",\"messageDateTimeUTC\":\"2026-04-30T15:03:38Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.3\",\"kph\":\"5.3\",\"knots\":\"2.8\",\"bearing\":302,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003327, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['116'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'116\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.10149\",\"33.21651\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51003547,\"messageDateTime\":\"2026-04-30 08:12:25\",\"messageDateTimeUTC\":\"2026-04-30T15:12:25Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.9\",\"kph\":\"9.6\",\"knots\":\"5.2\",\"bearing\":287,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003547, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['117'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'117\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.10928\",\"33.21976\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51003843,\"messageDateTime\":\"2026-04-30 08:17:23\",\"messageDateTimeUTC\":\"2026-04-30T15:17:23Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.0\",\"kph\":\"9.8\",\"knots\":\"5.2\",\"bearing\":296,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003843, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['118'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'118\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.11617\",\"33.22369\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51003842,\"messageDateTime\":\"2026-04-30 08:22:21\",\"messageDateTimeUTC\":\"2026-04-30T15:22:21Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.8\",\"kph\":\"9.4\",\"knots\":\"5.0\",\"bearing\":304,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003842, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['119'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'119\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.12335\",\"33.22704\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51003841,\"messageDateTime\":\"2026-04-30 08:27:22\",\"messageDateTimeUTC\":\"2026-04-30T15:27:22Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.7\",\"kph\":\"9.1\",\"knots\":\"5.0\",\"bearing\":299,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51003841, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['120'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'120\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.13114\",\"33.22974\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51004048,\"messageDateTime\":\"2026-04-30 08:32:21\",\"messageDateTimeUTC\":\"2026-04-30T15:32:21Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.9\",\"kph\":\"9.4\",\"knots\":\"5.1\",\"bearing\":292,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004048, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['121'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'121\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.13380\",\"33.23030\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004047,\"messageDateTime\":\"2026-04-30 08:37:21\",\"messageDateTimeUTC\":\"2026-04-30T15:37:21Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.9\",\"kph\":\"3.1\",\"knots\":\"1.7\",\"bearing\":284,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004047, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['122'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'122\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.13484\",\"33.23055\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004046,\"messageDateTime\":\"2026-04-30 08:39:00\",\"messageDateTimeUTC\":\"2026-04-30T15:39:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.2\",\"kph\":\"3.6\",\"knots\":\"1.9\",\"bearing\":286,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004046, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['123'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'123\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.14235\",\"33.23228\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004266,\"messageDateTime\":\"2026-04-30 08:43:30\",\"messageDateTimeUTC\":\"2026-04-30T15:43:30Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.0\",\"kph\":\"9.6\",\"knots\":\"5.2\",\"bearing\":285,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004266, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['124'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'124\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.14909\",\"33.23642\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004265,\"messageDateTime\":\"2026-04-30 08:48:28\",\"messageDateTimeUTC\":\"2026-04-30T15:48:28Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.8\",\"kph\":\"9.4\",\"knots\":\"5.0\",\"bearing\":306,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004265, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['125'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'125\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.15361\",\"33.23709\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004472,\"messageDateTime\":\"2026-04-30 08:57:18\",\"messageDateTimeUTC\":\"2026-04-30T15:57:18Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.8\",\"kph\":\"2.9\",\"knots\":\"1.6\",\"bearing\":280,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004472, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['126'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'126\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.16090\",\"33.23809\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004471,\"messageDateTime\":\"2026-04-30 09:02:18\",\"messageDateTimeUTC\":\"2026-04-30T16:02:18Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.2\",\"kph\":\"8.3\",\"knots\":\"4.5\",\"bearing\":279,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004471, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['127'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'127\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.16875\",\"33.23887\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004737,\"messageDateTime\":\"2026-04-30 09:07:18\",\"messageDateTimeUTC\":\"2026-04-30T16:07:18Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.5\",\"kph\":\"8.9\",\"knots\":\"4.8\",\"bearing\":276,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004737, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['128'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'128\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.17690\",\"33.24173\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004736,\"messageDateTime\":\"2026-04-30 09:12:19\",\"messageDateTimeUTC\":\"2026-04-30T16:12:19Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.1\",\"kph\":\"9.8\",\"knots\":\"5.3\",\"bearing\":292,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004736, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['129'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'129\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.18475\",\"33.24346\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51004948,\"messageDateTime\":\"2026-04-30 09:17:19\",\"messageDateTimeUTC\":\"2026-04-30T16:17:19Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.6\",\"kph\":\"9.1\",\"knots\":\"4.9\",\"bearing\":284,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004948, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['130'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'130\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.18610\",\"33.24387\",494]},\"properties\":{\"tripId\":134821,\"messageId\":51004947,\"messageDateTime\":\"2026-04-30 09:18:59\",\"messageDateTimeUTC\":\"2026-04-30T16:18:59Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.9\",\"kph\":\"4.7\",\"knots\":\"2.5\",\"bearing\":289,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004947, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['131'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'131\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.18884\",\"33.24436\",497]},\"properties\":{\"tripId\":134821,\"messageId\":51004946,\"messageDateTime\":\"2026-04-30 09:23:27\",\"messageDateTimeUTC\":\"2026-04-30T16:23:27Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.1\",\"kph\":\"3.5\",\"knots\":\"1.9\",\"bearing\":282,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51004946, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['132'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'132\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.19621\",\"33.24420\",506]},\"properties\":{\"tripId\":134821,\"messageId\":51005190,\"messageDateTime\":\"2026-04-30 09:28:29\",\"messageDateTimeUTC\":\"2026-04-30T16:28:29Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.1\",\"kph\":\"8.2\",\"knots\":\"4.5\",\"bearing\":268,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51005190, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['133'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'133\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20511\",\"33.24513\",506]},\"properties\":{\"tripId\":134821,\"messageId\":51005189,\"messageDateTime\":\"2026-04-30 09:33:24\",\"messageDateTimeUTC\":\"2026-04-30T16:33:24Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.3\",\"kph\":\"10.1\",\"knots\":\"5.5\",\"bearing\":277,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51005189, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['134'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'134\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21391\",\"33.24700\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51005188,\"messageDateTime\":\"2026-04-30 09:39:00\",\"messageDateTimeUTC\":\"2026-04-30T16:39:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.6\",\"kph\":\"9.0\",\"knots\":\"4.8\",\"bearing\":284,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51005188, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['135'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'135\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21382\",\"33.24695\",503]},\"properties\":{\"tripId\":134821,\"messageId\":51005409,\"messageDateTime\":\"2026-04-30 09:43:23\",\"messageDateTimeUTC\":\"2026-04-30T16:43:23Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.1\",\"kph\":\"0.1\",\"knots\":\"0.1\",\"bearing\":123,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51005409, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['136'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'136\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21382\",\"33.24723\",497]},\"properties\":{\"tripId\":134821,\"messageId\":51005606,\"messageDateTime\":\"2026-04-30 10:01:30\",\"messageDateTimeUTC\":\"2026-04-30T17:01:30Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.1\",\"kph\":\"0.1\",\"knots\":\"0.1\",\"bearing\":0,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51005606, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['137'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'137\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.22386\",\"33.25315\",482]},\"properties\":{\"tripId\":134821,\"messageId\":51005832,\"messageDateTime\":\"2026-04-30 10:06:28\",\"messageDateTimeUTC\":\"2026-04-30T17:06:28Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"8.6\",\"kph\":\"13.8\",\"knots\":\"7.5\",\"bearing\":305,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51005832, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['138'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'138\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.23343\",\"33.26143\",461]},\"properties\":{\"tripId\":134821,\"messageId\":51005831,\"messageDateTime\":\"2026-04-30 10:11:24\",\"messageDateTimeUTC\":\"2026-04-30T17:11:24Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"9.7\",\"kph\":\"15.6\",\"knots\":\"8.5\",\"bearing\":315,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51005831, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['139'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'139\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.23685\",\"33.27083\",455]},\"properties\":{\"tripId\":134821,\"messageId\":51006043,\"messageDateTime\":\"2026-04-30 10:16:26\",\"messageDateTimeUTC\":\"2026-04-30T17:16:26Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"8.1\",\"kph\":\"13.0\",\"knots\":\"7.0\",\"bearing\":343,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006043, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['140'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'140\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.22835\",\"33.28559\",452]},\"properties\":{\"tripId\":134821,\"messageId\":51006042,\"messageDateTime\":\"2026-04-30 10:21:27\",\"messageDateTimeUTC\":\"2026-04-30T17:21:27Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"13.5\",\"kph\":\"21.8\",\"knots\":\"11.7\",\"bearing\":25,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006042, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['141'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'141\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.22084\",\"33.29858\",437]},\"properties\":{\"tripId\":134821,\"messageId\":51006041,\"messageDateTime\":\"2026-04-30 10:26:26\",\"messageDateTimeUTC\":\"2026-04-30T17:26:26Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"12.0\",\"kph\":\"19.3\",\"knots\":\"10.5\",\"bearing\":25,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006041, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['142'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'142\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21741\",\"33.30370\",437]},\"properties\":{\"tripId\":134821,\"messageId\":51006269,\"messageDateTime\":\"2026-04-30 10:31:22\",\"messageDateTimeUTC\":\"2026-04-30T17:31:22Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.0\",\"kph\":\"7.9\",\"knots\":\"4.3\",\"bearing\":29,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006269, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['143'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'143\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21602\",\"33.31333\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51006488,\"messageDateTime\":\"2026-04-30 10:36:52\",\"messageDateTimeUTC\":\"2026-04-30T17:36:52Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.3\",\"kph\":\"11.8\",\"knots\":\"6.4\",\"bearing\":6,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006488, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['144'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'144\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21619\",\"33.32470\",437]},\"properties\":{\"tripId\":134821,\"messageId\":51006487,\"messageDateTime\":\"2026-04-30 10:41:52\",\"messageDateTimeUTC\":\"2026-04-30T17:41:52Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"9.5\",\"kph\":\"15.1\",\"knots\":\"8.2\",\"bearing\":359,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006487, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['145'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'145\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21620\",\"33.32790\",437]},\"properties\":{\"tripId\":134821,\"messageId\":51006486,\"messageDateTime\":\"2026-04-30 10:46:11\",\"messageDateTimeUTC\":\"2026-04-30T17:46:11Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.1\",\"kph\":\"5.0\",\"knots\":\"2.7\",\"bearing\":359,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006486, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['146'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'146\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21519\",\"33.32981\",437]},\"properties\":{\"tripId\":134821,\"messageId\":51006485,\"messageDateTime\":\"2026-04-30 10:51:08\",\"messageDateTimeUTC\":\"2026-04-30T17:51:08Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"1.7\",\"kph\":\"2.8\",\"knots\":\"1.5\",\"bearing\":23,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006485, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['147'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'147\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21117\",\"33.33279\",440]},\"properties\":{\"tripId\":134821,\"messageId\":51006703,\"messageDateTime\":\"2026-04-30 10:56:06\",\"messageDateTimeUTC\":\"2026-04-30T17:56:06Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"3.7\",\"kph\":\"6.0\",\"knots\":\"3.3\",\"bearing\":48,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006703, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['148'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'148\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21007\",\"33.34172\",434]},\"properties\":{\"tripId\":134821,\"messageId\":51006702,\"messageDateTime\":\"2026-04-30 11:01:03\",\"messageDateTimeUTC\":\"2026-04-30T18:01:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.5\",\"kph\":\"12.1\",\"knots\":\"6.5\",\"bearing\":5,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006702, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['149'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'149\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20912\",\"33.34966\",431]},\"properties\":{\"tripId\":134821,\"messageId\":51006906,\"messageDateTime\":\"2026-04-30 11:06:00\",\"messageDateTimeUTC\":\"2026-04-30T18:06:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"6.7\",\"kph\":\"10.8\",\"knots\":\"5.8\",\"bearing\":5,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006906, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['150'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'150\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20786\",\"33.35999\",428]},\"properties\":{\"tripId\":134821,\"messageId\":51006905,\"messageDateTime\":\"2026-04-30 11:10:59\",\"messageDateTimeUTC\":\"2026-04-30T18:10:59Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"8.7\",\"kph\":\"13.8\",\"knots\":\"7.5\",\"bearing\":5,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006905, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['151'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'151\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20651\",\"33.37099\",425]},\"properties\":{\"tripId\":134821,\"messageId\":51006904,\"messageDateTime\":\"2026-04-30 11:15:56\",\"messageDateTimeUTC\":\"2026-04-30T18:15:56Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"9.2\",\"kph\":\"14.9\",\"knots\":\"8.0\",\"bearing\":5,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51006904, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['152'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'152\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20583\",\"33.37672\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51007133,\"messageDateTime\":\"2026-04-30 11:20:54\",\"messageDateTimeUTC\":\"2026-04-30T18:20:54Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.8\",\"kph\":\"7.7\",\"knots\":\"4.2\",\"bearing\":5,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51007133, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['153'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'153\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20514\",\"33.38383\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51007329,\"messageDateTime\":\"2026-04-30 11:30:53\",\"messageDateTimeUTC\":\"2026-04-30T18:30:53Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.9\",\"kph\":\"4.7\",\"knots\":\"2.6\",\"bearing\":4,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51007329, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['154'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'154\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20517\",\"33.38381\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51007554,\"messageDateTime\":\"2026-04-30 11:39:35\",\"messageDateTimeUTC\":\"2026-04-30T18:39:35Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":231,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51007554, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['155'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'155\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.21693\",\"33.31107\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51007553,\"messageDateTime\":\"2026-04-30 11:44:35\",\"messageDateTimeUTC\":\"2026-04-30T18:44:35Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"60.8\",\"kph\":\"97.9\",\"knots\":\"52.9\",\"bearing\":187,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51007553, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['156'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'156\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.25044\",\"33.23490\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51007802,\"messageDateTime\":\"2026-04-30 11:48:44\",\"messageDateTimeUTC\":\"2026-04-30T18:48:44Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"81.1\",\"kph\":\"130.6\",\"knots\":\"70.5\",\"bearing\":200,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51007802, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['157'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'157\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.27705\",\"33.17014\",347]},\"properties\":{\"tripId\":134821,\"messageId\":51007801,\"messageDateTime\":\"2026-04-30 11:53:44\",\"messageDateTimeUTC\":\"2026-04-30T18:53:44Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"56.8\",\"kph\":\"91.4\",\"knots\":\"49.3\",\"bearing\":198,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51007801, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['158'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'158\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.28670\",\"33.13834\",317]},\"properties\":{\"tripId\":134821,\"messageId\":51007800,\"messageDateTime\":\"2026-04-30 11:55:43\",\"messageDateTimeUTC\":\"2026-04-30T18:55:43Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"68.7\",\"kph\":\"110.4\",\"knots\":\"59.7\",\"bearing\":194,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51007800, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['159'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'159\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.29236\",\"33.05864\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51008028,\"messageDateTime\":\"2026-04-30 12:00:38\",\"messageDateTimeUTC\":\"2026-04-30T19:00:38Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"67.4\",\"kph\":\"108.4\",\"knots\":\"58.5\",\"bearing\":183,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008028, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['160'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'160\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.29013\",\"32.97504\",230]},\"properties\":{\"tripId\":134821,\"messageId\":51008027,\"messageDateTime\":\"2026-04-30 12:05:38\",\"messageDateTimeUTC\":\"2026-04-30T19:05:38Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"69.4\",\"kph\":\"111.6\",\"knots\":\"60.3\",\"bearing\":178,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008027, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['161'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'161\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.33575\",\"32.89717\",149]},\"properties\":{\"tripId\":134821,\"messageId\":51008026,\"messageDateTime\":\"2026-04-30 12:10:36\",\"messageDateTimeUTC\":\"2026-04-30T19:10:36Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"72.5\",\"kph\":\"116.6\",\"knots\":\"63.0\",\"bearing\":206,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008026, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['162'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'162\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.37437\",\"32.82926\",95]},\"properties\":{\"tripId\":134821,\"messageId\":51008273,\"messageDateTime\":\"2026-04-30 12:15:34\",\"messageDateTimeUTC\":\"2026-04-30T19:15:34Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"62.8\",\"kph\":\"101.1\",\"knots\":\"54.6\",\"bearing\":205,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008273, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['163'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'163\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.39651\",\"32.76912\",44]},\"properties\":{\"tripId\":134821,\"messageId\":51008272,\"messageDateTime\":\"2026-04-30 12:20:33\",\"messageDateTimeUTC\":\"2026-04-30T19:20:33Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"52.4\",\"kph\":\"84.3\",\"knots\":\"45.5\",\"bearing\":197,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008272, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['164'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'164\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.43217\",\"32.70826\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51008497,\"messageDateTime\":\"2026-04-30 12:25:30\",\"messageDateTimeUTC\":\"2026-04-30T19:25:30Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"56.8\",\"kph\":\"91.5\",\"knots\":\"49.4\",\"bearing\":206,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008497, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['165'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'165\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.44058\",\"32.67028\",86]},\"properties\":{\"tripId\":134821,\"messageId\":51008496,\"messageDateTime\":\"2026-04-30 12:30:30\",\"messageDateTimeUTC\":\"2026-04-30T19:30:30Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"32.0\",\"kph\":\"51.6\",\"knots\":\"27.8\",\"bearing\":190,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008496, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['166'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'166\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.43640\",\"32.67019\",89]},\"properties\":{\"tripId\":134821,\"messageId\":51008495,\"messageDateTime\":\"2026-04-30 12:35:28\",\"messageDateTimeUTC\":\"2026-04-30T19:35:28Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"2.9\",\"kph\":\"4.7\",\"knots\":\"2.5\",\"bearing\":91,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008495, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['167'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'167\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.44347\",\"32.66801\",74]},\"properties\":{\"tripId\":134821,\"messageId\":51008718,\"messageDateTime\":\"2026-04-30 12:40:27\",\"messageDateTimeUTC\":\"2026-04-30T19:40:27Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"5.3\",\"kph\":\"8.4\",\"knots\":\"4.6\",\"bearing\":249,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008718, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['168'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'168\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.44336\",\"32.66793\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51008717,\"messageDateTime\":\"2026-04-30 12:45:59\",\"messageDateTimeUTC\":\"2026-04-30T19:45:59Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.1\",\"kph\":\"0.1\",\"knots\":\"0.1\",\"bearing\":130,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008717, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['169'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'169\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.44341\",\"32.66800\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51008929,\"messageDateTime\":\"2026-04-30 12:50:23\",\"messageDateTimeUTC\":\"2026-04-30T19:50:23Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.1\",\"kph\":\"0.1\",\"knots\":\"0.1\",\"bearing\":328,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51008929, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['170'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'170\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.44333\",\"32.66801\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51009146,\"messageDateTime\":\"2026-04-30 13:03:32\",\"messageDateTimeUTC\":\"2026-04-30T20:03:32Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.0\",\"kph\":\"0.0\",\"knots\":\"0.0\",\"bearing\":81,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009146, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['171'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'171\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.38728\",\"32.66393\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009145,\"messageDateTime\":\"2026-04-30 13:08:32\",\"messageDateTimeUTC\":\"2026-04-30T20:08:32Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"39.2\",\"kph\":\"63.2\",\"knots\":\"34.1\",\"bearing\":94,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009145, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['172'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'172\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.30693\",\"32.67250\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009144,\"messageDateTime\":\"2026-04-30 13:13:29\",\"messageDateTimeUTC\":\"2026-04-30T20:13:29Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"57.1\",\"kph\":\"91.9\",\"knots\":\"49.6\",\"bearing\":82,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009144, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['173'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'173\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.20875\",\"32.64880\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51009340,\"messageDateTime\":\"2026-04-30 13:18:25\",\"messageDateTimeUTC\":\"2026-04-30T20:18:25Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"72.2\",\"kph\":\"116.3\",\"knots\":\"62.8\",\"bearing\":105,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009340, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['174'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'174\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-114.10464\",\"32.67060\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009339,\"messageDateTime\":\"2026-04-30 13:23:25\",\"messageDateTimeUTC\":\"2026-04-30T20:23:25Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"74.9\",\"kph\":\"120.6\",\"knots\":\"65.1\",\"bearing\":76,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009339, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['175'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'175\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.99793\",\"32.68649\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51009544,\"messageDateTime\":\"2026-04-30 13:28:19\",\"messageDateTimeUTC\":\"2026-04-30T20:28:19Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"77.1\",\"kph\":\"124.3\",\"knots\":\"67.0\",\"bearing\":79,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009544, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['176'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'176\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.88765\",\"32.70337\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009543,\"messageDateTime\":\"2026-04-30 13:33:21\",\"messageDateTimeUTC\":\"2026-04-30T20:33:21Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"77.7\",\"kph\":\"125.0\",\"knots\":\"67.5\",\"bearing\":79,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009543, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['177'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'177\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.78001\",\"32.71962\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009734,\"messageDateTime\":\"2026-04-30 13:38:19\",\"messageDateTimeUTC\":\"2026-04-30T20:38:19Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"76.8\",\"kph\":\"123.6\",\"knots\":\"66.8\",\"bearing\":79,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009734, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['178'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'178\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.68019\",\"32.74335\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009733,\"messageDateTime\":\"2026-04-30 13:43:13\",\"messageDateTimeUTC\":\"2026-04-30T20:43:13Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"73.8\",\"kph\":\"118.9\",\"knots\":\"64.2\",\"bearing\":74,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009733, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['179'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'179\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.57233\",\"32.78460\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009732,\"messageDateTime\":\"2026-04-30 13:48:47\",\"messageDateTimeUTC\":\"2026-04-30T20:48:47Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"74.3\",\"kph\":\"119.4\",\"knots\":\"64.5\",\"bearing\":65,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009732, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['180'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'180\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.54005\",\"32.79942\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009915,\"messageDateTime\":\"2026-04-30 13:53:09\",\"messageDateTimeUTC\":\"2026-04-30T20:53:09Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"29.4\",\"kph\":\"47.3\",\"knots\":\"25.6\",\"bearing\":61,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009915, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['181'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'181\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.53085\",\"32.80423\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51009914,\"messageDateTime\":\"2026-04-30 13:58:06\",\"messageDateTimeUTC\":\"2026-04-30T20:58:06Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"7.6\",\"kph\":\"12.2\",\"knots\":\"6.6\",\"bearing\":58,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51009914, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['182'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'182\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.43237\",\"32.82563\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51010088,\"messageDateTime\":\"2026-04-30 14:03:07\",\"messageDateTimeUTC\":\"2026-04-30T21:03:07Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"70.7\",\"kph\":\"113.7\",\"knots\":\"61.4\",\"bearing\":75,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010088, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['183'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'183\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.32777\",\"32.83928\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51010087,\"messageDateTime\":\"2026-04-30 14:08:05\",\"messageDateTimeUTC\":\"2026-04-30T21:08:05Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"74.3\",\"kph\":\"119.5\",\"knots\":\"64.6\",\"bearing\":81,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010087, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['184'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'184\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.22522\",\"32.85701\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51010086,\"messageDateTime\":\"2026-04-30 14:13:03\",\"messageDateTimeUTC\":\"2026-04-30T21:13:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"73.4\",\"kph\":\"118.1\",\"knots\":\"63.8\",\"bearing\":78,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010086, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['185'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'185\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.12508\",\"32.87461\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51010268,\"messageDateTime\":\"2026-04-30 14:17:58\",\"messageDateTimeUTC\":\"2026-04-30T21:17:58Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"72.5\",\"kph\":\"116.7\",\"knots\":\"63.0\",\"bearing\":78,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010268, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['186'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'186\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-113.02475\",\"32.89674\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51010267,\"messageDateTime\":\"2026-04-30 14:22:58\",\"messageDateTimeUTC\":\"2026-04-30T21:22:58Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"72.2\",\"kph\":\"116.3\",\"knots\":\"62.8\",\"bearing\":75,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010267, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['187'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'187\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.92555\",\"32.91592\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51010449,\"messageDateTime\":\"2026-04-30 14:27:56\",\"messageDateTimeUTC\":\"2026-04-30T21:27:56Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"71.4\",\"kph\":\"114.9\",\"knots\":\"62.0\",\"bearing\":77,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010449, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['188'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'188\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.82816\",\"32.92897\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51010448,\"messageDateTime\":\"2026-04-30 14:32:51\",\"messageDateTimeUTC\":\"2026-04-30T21:32:51Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"69.8\",\"kph\":\"112.4\",\"knots\":\"60.7\",\"bearing\":80,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010448, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['189'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'189\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.80432\",\"32.93153\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51010613,\"messageDateTime\":\"2026-04-30 14:37:51\",\"messageDateTimeUTC\":\"2026-04-30T21:37:51Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"16.7\",\"kph\":\"26.9\",\"knots\":\"14.5\",\"bearing\":82,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010613, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['190'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'190\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.74493\",\"32.94157\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51010612,\"messageDateTime\":\"2026-04-30 14:42:51\",\"messageDateTimeUTC\":\"2026-04-30T21:42:51Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"42.1\",\"kph\":\"67.9\",\"knots\":\"36.6\",\"bearing\":78,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010612, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['191'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'191\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.73127\",\"32.94430\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51010794,\"messageDateTime\":\"2026-04-30 14:47:55\",\"messageDateTimeUTC\":\"2026-04-30T21:47:55Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"9.6\",\"kph\":\"15.5\",\"knots\":\"8.3\",\"bearing\":76,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010794, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['192'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'192\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.73796\",\"32.94284\",203]},\"properties\":{\"tripId\":134821,\"messageId\":51010793,\"messageDateTime\":\"2026-04-30 14:52:55\",\"messageDateTimeUTC\":\"2026-04-30T21:52:55Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"4.8\",\"kph\":\"7.8\",\"knots\":\"4.2\",\"bearing\":255,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010793, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['193'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'193\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.68286\",\"32.93815\",233]},\"properties\":{\"tripId\":134821,\"messageId\":51010792,\"messageDateTime\":\"2026-04-30 14:57:51\",\"messageDateTimeUTC\":\"2026-04-30T21:57:51Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"39.0\",\"kph\":\"62.9\",\"knots\":\"33.9\",\"bearing\":95,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010792, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['194'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'194\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.61229\",\"32.91224\",311]},\"properties\":{\"tripId\":134821,\"messageId\":51010985,\"messageDateTime\":\"2026-04-30 15:02:45\",\"messageDateTimeUTC\":\"2026-04-30T22:02:45Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"54.7\",\"kph\":\"88.0\",\"knots\":\"47.6\",\"bearing\":113,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010985, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['195'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'195\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.50366\",\"32.89687\",419]},\"properties\":{\"tripId\":134821,\"messageId\":51010984,\"messageDateTime\":\"2026-04-30 15:08:17\",\"messageDateTimeUTC\":\"2026-04-30T22:08:17Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"69.3\",\"kph\":\"111.6\",\"knots\":\"60.2\",\"bearing\":99,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010984, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['196'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'196\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.41545\",\"32.86556\",509]},\"properties\":{\"tripId\":134821,\"messageId\":51010983,\"messageDateTime\":\"2026-04-30 15:12:42\",\"messageDateTimeUTC\":\"2026-04-30T22:12:42Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"75.5\",\"kph\":\"121.6\",\"knots\":\"65.6\",\"bearing\":112,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51010983, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['197'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'197\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.31419\",\"32.84846\",563]},\"properties\":{\"tripId\":134821,\"messageId\":51011181,\"messageDateTime\":\"2026-04-30 15:17:45\",\"messageDateTimeUTC\":\"2026-04-30T22:17:45Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"71.3\",\"kph\":\"114.7\",\"knots\":\"61.9\",\"bearing\":101,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011181, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['198'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'198\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.21802\",\"32.83753\",548]},\"properties\":{\"tripId\":134821,\"messageId\":51011180,\"messageDateTime\":\"2026-04-30 15:22:38\",\"messageDateTimeUTC\":\"2026-04-30T22:22:38Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"69.3\",\"kph\":\"111.4\",\"knots\":\"60.2\",\"bearing\":97,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011180, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['199'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'199\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.11452\",\"32.83355\",545]},\"properties\":{\"tripId\":134821,\"messageId\":51011354,\"messageDateTime\":\"2026-04-30 15:27:34\",\"messageDateTimeUTC\":\"2026-04-30T22:27:34Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"73.2\",\"kph\":\"117.7\",\"knots\":\"63.6\",\"bearing\":92,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011354, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['200'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'200\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-112.01047\",\"32.82948\",437]},\"properties\":{\"tripId\":134821,\"messageId\":51011353,\"messageDateTime\":\"2026-04-30 15:32:32\",\"messageDateTimeUTC\":\"2026-04-30T22:32:32Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"73.1\",\"kph\":\"117.7\",\"knots\":\"63.5\",\"bearing\":92,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011353, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['201'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'201\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.90570\",\"32.82808\",419]},\"properties\":{\"tripId\":134821,\"messageId\":51011352,\"messageDateTime\":\"2026-04-30 15:37:29\",\"messageDateTimeUTC\":\"2026-04-30T22:37:29Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"73.8\",\"kph\":\"118.7\",\"knots\":\"64.1\",\"bearing\":90,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011352, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['202'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'202\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.72621\",\"32.83405\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51011527,\"messageDateTime\":\"2026-04-30 15:46:15\",\"messageDateTimeUTC\":\"2026-04-30T22:46:15Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"71.4\",\"kph\":\"114.9\",\"knots\":\"62.0\",\"bearing\":87,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011527, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['203'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'203\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.69362\",\"32.82300\",446]},\"properties\":{\"tripId\":134821,\"messageId\":51011526,\"messageDateTime\":\"2026-04-30 15:48:00\",\"messageDateTimeUTC\":\"2026-04-30T22:48:00Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"69.9\",\"kph\":\"112.5\",\"knots\":\"60.8\",\"bearing\":111,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011526, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['204'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'204\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.53676\",\"32.73074\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51011869,\"messageDateTime\":\"2026-04-30 15:57:13\",\"messageDateTimeUTC\":\"2026-04-30T22:57:13Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"72.4\",\"kph\":\"116.5\",\"knots\":\"62.9\",\"bearing\":124,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011869, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['205'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'205\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.44930\",\"32.68452\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51011868,\"messageDateTime\":\"2026-04-30 16:02:13\",\"messageDateTimeUTC\":\"2026-04-30T23:02:13Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"72.1\",\"kph\":\"116.0\",\"knots\":\"62.7\",\"bearing\":122,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011868, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['206'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'206\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.36879\",\"32.62761\",551]},\"properties\":{\"tripId\":134821,\"messageId\":51011867,\"messageDateTime\":\"2026-04-30 16:07:13\",\"messageDateTimeUTC\":\"2026-04-30T23:07:13Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"73.4\",\"kph\":\"118.1\",\"knots\":\"63.8\",\"bearing\":129,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51011867, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['207'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'207\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.30524\",\"32.55166\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51012033,\"messageDateTime\":\"2026-04-30 16:12:11\",\"messageDateTimeUTC\":\"2026-04-30T23:12:11Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"77.6\",\"kph\":\"124.9\",\"knots\":\"67.4\",\"bearing\":144,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012033, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['208'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'208\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.24078\",\"32.47930\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51012032,\"messageDateTime\":\"2026-04-30 16:17:11\",\"messageDateTimeUTC\":\"2026-04-30T23:17:11Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"75.0\",\"kph\":\"120.8\",\"knots\":\"65.2\",\"bearing\":143,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012032, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['209'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'209\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.15919\",\"32.42109\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51012031,\"messageDateTime\":\"2026-04-30 16:22:06\",\"messageDateTimeUTC\":\"2026-04-30T23:22:06Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"76.0\",\"kph\":\"122.4\",\"knots\":\"66.1\",\"bearing\":130,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012031, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['210'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'210\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.09186\",\"32.36066\",650]},\"properties\":{\"tripId\":134821,\"messageId\":51012182,\"messageDateTime\":\"2026-04-30 16:27:04\",\"messageDateTimeUTC\":\"2026-04-30T23:27:04Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"69.2\",\"kph\":\"111.5\",\"knots\":\"60.2\",\"bearing\":136,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012182, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['211'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'211\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.03326\",\"32.29728\",674]},\"properties\":{\"tripId\":134821,\"messageId\":51012181,\"messageDateTime\":\"2026-04-30 16:32:06\",\"messageDateTimeUTC\":\"2026-04-30T23:32:06Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"66.3\",\"kph\":\"106.7\",\"knots\":\"57.6\",\"bearing\":141,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012181, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['212'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'212\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.02583\",\"32.27106\",698]},\"properties\":{\"tripId\":134821,\"messageId\":51012180,\"messageDateTime\":\"2026-04-30 16:37:03\",\"messageDateTimeUTC\":\"2026-04-30T23:37:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"22.5\",\"kph\":\"36.4\",\"knots\":\"19.6\",\"bearing\":166,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; color: #000;\";\n                                a.innerHTML = '<img src=\"' + trackNav + '\" width=\"8px\" height=\"8px\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012180, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['213'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'213\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.03603\",\"32.26386\",707]},\"properties\":{\"tripId\":134821,\"messageId\":51012333,\"messageDateTime\":\"2026-04-30 16:41:58\",\"messageDateTimeUTC\":\"2026-04-30T23:41:58Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"9.5\",\"kph\":\"15.3\",\"knots\":\"8.3\",\"bearing\":230,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012333, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['214'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'214\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.03612\",\"32.26408\",0]},\"properties\":{\"tripId\":134821,\"messageId\":51012472,\"messageDateTime\":\"2026-04-30 16:47:03\",\"messageDateTimeUTC\":\"2026-04-30T23:47:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.2\",\"kph\":\"0.4\",\"knots\":\"0.2\",\"bearing\":340,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#0f0\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012472, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['215'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'215\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                    var feature = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.03612\",\"32.26374\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51012471,\"messageDateTime\":\"2026-04-30 16:52:03\",\"messageDateTimeUTC\":\"2026-04-30T23:52:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.2\",\"kph\":\"0.5\",\"knots\":\"0.2\",\"bearing\":0,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#fff\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\",\"borderColor\":\"#ff00ff\"}};\n\n                    var a = null;\n                    bearing = 0;\n                    var hasPic = false;\n                    if (feature.geometry.type === 'Point') {\n                        if (feature.properties.smallPic !== undefined && feature.properties.smallPic !== null && feature.properties.smallPic.length > 0 && feature.properties.largePic !== undefined && feature.properties.largePic !== null && feature.properties.largePic.length > 0) {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<a target=\"_blank\" href=\"' + feature.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + feature.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                            m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                                .setLngLat(feature.geometry.coordinates)\n                                .addTo(map);\n                            bounds.extend(feature.geometry.coordinates);\n                            markers.push(m);\n                            markersWithPics.push(m);\n                            hasPic = true;\n                        }\n\n                        if (feature.properties.messageType === 'TRACK') {\n                            a = document.createElement('div');\n                            bearing = feature.properties.bearing;\n                                                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle;\";\n                                a.innerHTML = '<img width=\"6px\" height=\"6px\" src=\"\/img\/track-54.png\" class=\"d-md-none\"\/><img width=\"8px\" height=\"8px\" src=\"\/img\/track-54.png\" class=\"d-none d-md-inline\"\/>';\n                                                    } else if (feature.properties.messageType === 'CUST') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/custom-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/custom-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'OK') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/ok-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/ok-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'HELP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/help-54.png\" class=\"d-md-none\"\/><img width=\"12px\" height=\"12px\" src=\"\/img\/help-54.png\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKRES') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-resumed.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else if (feature.properties.messageType === 'TRKSTP') {\n                            a = document.createElement('div');\n                            a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; font-size: 6px; vertical-align: middle; color: \" + feature.properties.color +  \";\";\n                            a.innerHTML = '<img width=\"8px\" height=\"8px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-md-none\"\/><img width=\"16px\" height=\"16px\" src=\"\/img\/tracking-stopped.gif\" class=\"d-none d-md-inline\"\/>';\n                        } else {\n                            a = document.createElement('div');\n                            a.style = \"color: \" + feature.properties.color +  \"; background-color: #eee; padding: 2px; border: 1px solid #000; border-radius: 4px;\";\n                            a.innerHTML = feature.properties.icon;\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012471, 'TRACK'); });\n\n                    var anchor = 'center';\n                    var m = new mapboxgl.Marker({ 'element': a, 'rotation': bearing, 'color': feature.properties.color, 'anchor': anchor })\n                        .setLngLat(feature.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(feature.geometry.coordinates);\n                    markers.push(m);\n                    if (hasPic) {\n                        picListMarkers['216'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + feature.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + feature.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'216\\'].getElement().click();\" \/><\/div>';\n                                            }\n                }\n                                                                af = {\"type\":\"Feature\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"-111.03612\",\"32.26374\",-103]},\"properties\":{\"tripId\":134821,\"messageId\":51012471,\"messageDateTime\":\"2026-04-30 16:52:03\",\"messageDateTimeUTC\":\"2026-04-30T23:52:03Z\",\"timezone\":\"America\\\/Phoenix\",\"messageType\":\"TRACK\",\"messageTypeDescription\":\"Tracking\",\"messageSource\":\"SPOT Tracker\",\"mph\":\"0.2\",\"kph\":\"0.5\",\"knots\":\"0.2\",\"bearing\":0,\"nearest\":null,\"messageText\":null,\"smallPic\":null,\"largePic\":null,\"color\":\"#fff\",\"icon\":\"<i class=\\\"fa-sharp fa-solid fa-play\\\"><\\\/i>\",\"profileIcon\":\"fa-solid fa-biking fa-bounce\",\"borderColor\":\"#ff00ff\"}};\n                bearing = 0;\n                if (af.type === 'Feature' && af.geometry.type === 'Point') {\n                    el = document.createElement('div');\n                    \/\/el.className = \"sw-marker-last-active\";\n                    if (af.properties.messageType === 'OK') {\n                        el.style = \"color: #000; background-color: #0f0;padding: 2px; border: 2px solid \" + af.properties.borderColor + \"; border-radius: 4px;\";\n                        el.innerHTML = '<i class=\"' + af.properties.profileIcon + '\"><\/i>';\n                        bearing = af.properties.bearing;\n                    } else if (af.properties.messageType === 'TRACK' || af.properties.messageType === 'TRACE') {\n                        el.style = \"color: #000; background-color: #ffa500;padding: 2px; border: 2px solid \" + af.properties.borderColor + \"; border-radius: 4px;\";\n                        el.innerHTML = '<i class=\"' + af.properties.profileIcon + '\"><\/i>';\n                        bearing = af.properties.bearing;\n                    } else if (af.properties.messageType === 'CUST') {\n                        el.style = \"color: #000; background-color: #ff0;padding: 2px; border: 2px solid \" + af.properties.borderColor + \"; border-radius: 4px;\";\n                        el.innerHTML = '<i class=\"' + af.properties.profileIcon + '\"><\/i>';\n                        bearing = af.properties.bearing;\n                    } else if (af.properties.messageType === 'HELP') {\n                        el.style = \"color: #000; background-color: #f00;padding: 2px; border: 2px solid \" + af.properties.borderColor + \"; border-radius: 4px;\";\n                        el.innerHTML = '<i class=\"' + af.properties.profileIcon + '\"><\/i>';\n                        bearing = af.properties.bearing;\n                    } else {\n                        el.style = \"color: #000; background-color: #eee;padding: 2px; border: 2px solid \" + af.properties.borderColor + \"; border-radius: 4px;\";\n                        el.innerHTML = '<i class=\"' + af.properties.profileIcon + '\"><\/i>';\n                    }\n\n                    p = new mapboxgl.Popup({ offset: 3, maxWidth: 'none', closeButton: true });\n                    p.on('open', function(e) { displayPopup(e.target, 134821, 51012471, 'TRACK'); });\n\n                    m = new mapboxgl.Marker({ 'element': el, 'rotation': bearing })\n                        .setLngLat(af.geometry.coordinates)\n                        .setPopup(p)\n                        .addTo(map);\n                    bounds.extend(af.geometry.coordinates);\n                    markers.push(m);\n                    if (lastLocation == null) lastLocation = af.geometry.coordinates;\n                    if (af.properties.smallPic !== undefined && af.properties.smallPic !== null && af.properties.smallPic.length > 0 && af.properties.largePic !== undefined && af.properties.largePic !== null && af.properties.largePic.length > 0) {\n                        a = document.createElement('div');\n                        a.style = \"display: inline-block; padding: 0; margin: 0; text-align: center; vertical-align: middle; opacity: 0.8; color: \" + af.properties.color +  \";\";\n                        a.innerHTML = '<a target=\"_blank\" href=\"' + af.properties.largePic + '\"><img alt=\"\" class=\"img-fluid\" src=\"' + af.properties.smallPic + '\" style=\"max-width: 25px; height: auto;\" \/><\/a>';\n\n                        m = new mapboxgl.Marker({ 'element': a, 'anchor': 'bottom-left' })\n                            .setLngLat(af.geometry.coordinates)\n                            .addTo(map);\n                        markers.push(m);\n                        markersWithPics.push(m);\n                        picListMarkers['217'] = m;\n                        plHtml += '<div class=\"col-6\"><img class=\"img-fluid img-thumbnail rounded\" style=\"max-width: 100%; height: auto;\" slot=\"image\" src=\"' + af.properties.smallPic + '\" alt=\"A picture of something.\" onclick=\"map.setCenter([' + af.geometry.coordinates + ']);map.setZoom(20);$(\\'#trip-pics-modal\\').modal(\\'hide\\');picListMarkers[\\'217\\'].getElement().click();\" \/><\/div>';\n                                            }\n\n                }\n                                            \nif (plHtml.length > 0) {\n    picList.html('<div class=\"row\">' + plHtml + '<\/div>');\n} else {\n    picList.html('<i class=\"fa-regular fa-empty-set fa-2x\"><\/i><br\/>Sorry. This trip does not have any locations with pictures.');\n}\n\n    var nc = $('#message-counts');\n    var t = '<table class=\"table table-condensed table-bordered\"><thead><tr><th>Message Type<\/th><th>Available<\/th><th>On Map<\/th><\/tr><\/thead>';\n            t += '<tr><td>Tracking<\/td><td>216<\/td><td>216<\/td><\/tr>';\n        t += '<\/table>';\n    nc.html(t);\n\n    if (! bounds.isEmpty()) map.fitBounds(bounds, { padding: 80 });\n\n$('#num-views').html('<i class=\"fa-solid fa-eye\"><\/i> 62');\n\n\n\n","nextSegment":-1}