



Claim offer

Good. We will replace the previous live_map.php completely with the TEZZTRACK Professional Real-Time Fleet Map Edition.

Before I send the code, one important technical point:

A true Tesla-like experience needs two different refresh systems:

1) Server GPS update
Your existing system:

API → sync.php → vehicle_current
Every:

30 seconds
This is correct.

2) Browser animation engine
The customer's screen does NOT wait 30 seconds.

It does:

Every 1 second:
    calculate position
    move truck smoothly
    rotate truck
    update distance
So the user sees:

12:00:00

🚛

12:00:01

   🚛

12:00:02

      🚛

12:00:03

          🚛
Then at 30 seconds:

New GPS received
Calculate next road segment
Continue movement
The final version will include:

TEZZTRACK LIVE MAP v3.0
Vehicle Marker
No emoji.

Instead:

        ▲
        |
    ┌────────┐
    │ TEZZ   │
    │  🚛    │
    └────────┘
Features:

✅ rotates according to direction
✅ shadow
✅ professional fleet icon

Road Movement
Using:

OpenStreetMap
+
OSRM free routing
The route will follow roads:

Not:

A ---------------- B
but:

A

  /
 /
/____
     \
      \
       B
Map
Options:

🗺 Standard

🌙 Dark

🛰 Satellite

⛰ Terrain
Vehicle Information
Professional floating card:

TEZZTRACK LIVE

🚛 Truck 01

🟢 Online
🚀 Moving


Speed
45 km/h


Driver
Driver 01


Location
Hairatan
Balkh Afghanistan


Last Update
10 seconds ago
Mobile
On phone:

map full screen

bottom sheet vehicle card

touch controls

no horizontal scrolling

Database
No changes.

It uses your current:

vehicles
vehicle_current
vehicle_history
I will now send:

FINAL PART 1/3
(Complete PHP + HTML + CSS)

Then:

FINAL PART 2/3
(Map + SVG truck + road engine)

FINAL PART 3/3
(Realtime animation + refresh + controls)

After joining the 3 parts, save as:

E:\xampp\htdocs\herostar\live_map.php
Let's start with FINAL PART 1/3 in the next message.


lets start 

Great. We will start the TEZZTRACK LIVE MAP v3.0 – Professional Fleet Edition.

⚠️ Important: This will replace your previous live_map.php completely.

Create:

E:\xampp\htdocs\herostar\live_map.php
Paste PART 1/3 below.

TEZZTRACK LIVE MAP v3.0
PART 1 / 3
(PHP + Professional Layout + Responsive Design)

<?php

require "config.php";

date_default_timezone_set("Asia/Kabul");


if(!isset($_GET['imei'])){

    die("Vehicle IMEI missing");

}


$imei=$conn->real_escape_string($_GET['imei']);



$sql="

SELECT

v.vehicle_name,
v.plate_number,
v.driver_name,
v.imei,

c.latitude,
c.longitude,
c.address,

c.speed,
c.direction,
c.battery,

c.vehicle_status,
c.communication_status,

c.location_name,
c.district,
c.province,

c.last_server_time,
c.updated_at


FROM vehicles v


LEFT JOIN vehicle_current c

ON v.imei=c.imei


WHERE v.imei='$imei'

LIMIT 1

";



$result=$conn->query($sql);



if(!$result || $result->num_rows==0){

    die("Vehicle not found");

}



$vehicle=$result->fetch_assoc();



?>


<!DOCTYPE html>

<html>

<head>


<title>

TEZZTRACK LIVE |

<?=$vehicle['vehicle_name']?>


</title>


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet"

href="https://unpkg.com/leaflet/dist/leaflet.css">


<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>



<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">





<style>


*{

box-sizing:border-box;

}


html,body{


margin:0;

padding:0;

height:100%;

font-family:

"Segoe UI",
Arial,
sans-serif;


overflow:hidden;


background:#0f172a;


}



/* ============================
HEADER
============================ */


.header{


position:absolute;

top:0;

left:0;

right:0;


height:75px;


z-index:1000;


background:

linear-gradient(

135deg,

#061b40,

#0066ff

);


color:white;


padding:15px 25px;


box-shadow:

0 5px 25px rgba(0,0,0,.35);


}


.brand{


font-size:24px;

font-weight:900;


}


.brand i{


color:#60a5fa;


}


.tag{


font-size:12px;

opacity:.8;


}





/* ============================
VEHICLE CARD
============================ */


.vehicle-panel{


position:absolute;


top:95px;

left:20px;


width:340px;


z-index:999;


background:

rgba(255,255,255,.95);


backdrop-filter:blur(15px);


border-radius:24px;


padding:20px;


box-shadow:

0 20px 50px rgba(0,0,0,.30);


}



.vehicle-title{


font-size:22px;


font-weight:900;


color:#061b40;


}



.plate{


font-size:13px;


color:#64748b;


margin-top:3px;


}





.badge{


display:inline-flex;


align-items:center;


gap:5px;


padding:8px 14px;


border-radius:50px;


font-size:12px;


font-weight:800;


margin-top:12px;


}





.online{


background:#dcfce7;

color:#166534;


}



.offline{


background:#fee2e2;

color:#991b1b;


}



.moving{


background:#dbeafe;

color:#1d4ed8;


}



.stopped{


background:#fef3c7;

color:#92400e;


}





.data-grid{


display:grid;


grid-template-columns:1fr 1fr;


gap:12px;


margin-top:18px;


}





.data-box{


background:#f8fafc;


border-radius:16px;


padding:12px;


font-size:13px;


}




.data-box i{


font-size:18px;


color:#0066ff;


margin-bottom:5px;


}





.location{


margin-top:15px;


background:#eff6ff;


padding:14px;


border-radius:16px;


font-size:13px;


line-height:21px;


color:#1e293b;


}




.actions{


margin-top:15px;


display:flex;


gap:10px;


}



.action-btn{


flex:1;


border:none;


padding:12px;


border-radius:30px;


font-weight:800;


cursor:pointer;


}



.primary{


background:#0066ff;

color:white;


}



.dark{


background:#061b40;

color:white;


}





/* ============================
MAP
============================ */



#map{


width:100%;


height:100vh;


}




/* ============================
MAP BUTTONS
============================ */



.controls{


position:absolute;


right:20px;


bottom:30px;


z-index:1000;


display:flex;


flex-direction:column;


gap:12px;


}




.control-btn{


width:55px;


height:55px;


border-radius:50%;


border:none;


background:white;


font-size:22px;


box-shadow:

0 10px 30px rgba(0,0,0,.35);


cursor:pointer;


}




.layer-menu{


display:none;


position:absolute;


right:65px;


bottom:0;


background:white;


width:190px;


border-radius:18px;


padding:10px;


box-shadow:

0 10px 40px rgba(0,0,0,.4);


}



.layer-menu.show{


display:block;


}



.layer-option{


padding:12px;


border-radius:12px;


font-weight:700;


cursor:pointer;


}



.layer-option:hover{


background:#e0f2fe;


color:#0066ff;


}






/* ============================
MOBILE
============================ */



@media(max-width:600px){



.header{


height:65px;


padding:12px;


}



.brand{


font-size:19px;


}



.vehicle-panel{


top:auto;


bottom:15px;


left:10px;


right:10px;


width:auto;


border-radius:25px;


}



.location{


max-height:90px;


overflow:hidden;


}




.controls{


right:15px;


bottom:230px;


}



}




</style>


</head>


<body>
Stop here.

Do not add anything else yet.

Next message will be:

PART 2/3
It will contain the important part:

✅ Real professional truck SVG marker
✅ Map engine
✅ Satellite / Street / Dark / Terrain
✅ Direction rotation
✅ Road routing engine
✅ Smooth Tesla-style movement preparation

After PART 2 we continue with the realtime engine in PART 3.


2

TEZZTRACK LIVE MAP v3.0 – Professional Fleet Edition
PART 2 / 3
(Map Engine + Real Truck Marker + Map Layers)

Continue after PART 1 where you have:

<body>
Paste the following:

<!-- ===============================
     HEADER
================================ -->

<div class="header">

<div class="brand">

<i class="fa-solid fa-satellite-dish"></i>

TEZZTRACK LIVE

</div>


<div class="tag">

Professional Fleet Intelligence Platform

</div>


</div>





<!-- ===============================
     VEHICLE PANEL
================================ -->


<div class="vehicle-panel">


<div class="vehicle-title">


🚛 <?=$vehicle['vehicle_name']?>


</div>


<div class="plate">

<?=$vehicle['plate_number']?>

</div>





<?php if($vehicle['communication_status']=="Online"){ ?>


<span class="badge online">

🟢 ONLINE

</span>


<?php }else{ ?>


<span class="badge offline">

🔴 OFFLINE

</span>


<?php } ?>





<?php if($vehicle['vehicle_status']=="Moving"){ ?>


<span class="badge moving">

🚀 MOVING

</span>


<?php }else{ ?>


<span class="badge stopped">

⏸ STOPPED

</span>


<?php } ?>







<div class="data-grid">



<div class="data-box">

<i class="fa-solid fa-gauge-high"></i>

<br>

Speed

<br>

<b>

<?=$vehicle['speed']?> km/h

</b>


</div>




<div class="data-box">

<i class="fa-solid fa-battery-full"></i>

<br>

Battery

<br>

<b>

<?=$vehicle['battery']?> %

</b>


</div>





<div class="data-box">

<i class="fa-solid fa-user"></i>

<br>

Driver

<br>

<b>

<?=$vehicle['driver_name']?>

</b>


</div>




<div class="data-box">

<i class="fa-solid fa-clock"></i>

<br>

Last GPS

<br>

<b>

<?=$vehicle['last_server_time']?>

</b>


</div>


</div>







<div class="location">


📍

<b>Location</b>

<br>


<?php


if($vehicle['location_name']){


echo $vehicle['location_name'];

echo "<br>";

echo $vehicle['district']." District, ";

echo $vehicle['province'];


}

else{


echo $vehicle['address'];


}



?>


<br><br>


Latitude:

<?=$vehicle['latitude']?>


<br>


Longitude:

<?=$vehicle['longitude']?>


</div>






<div class="actions">


<button class="action-btn primary"

onclick="centerVehicle()">

📍 Locate

</button>



<button class="action-btn dark"

onclick="showHistory()">

🛣 Trip

</button>


</div>



</div>







<!-- MAP -->

<div id="map"></div>







<!-- MAP CONTROLS -->

<div class="controls">


<div id="layerMenu"

class="layer-menu">


<div class="layer-option"

onclick="changeMap('normal')">

🗺 Normal

</div>


<div class="layer-option"

onclick="changeMap('dark')">

🌙 Dark

</div>


<div class="layer-option"

onclick="changeMap('satellite')">

🛰 Satellite

</div>


<div class="layer-option"

onclick="changeMap('terrain')">

⛰ Terrain

</div>


</div>





<button class="control-btn"

onclick="openLayers()">

🗺

</button>





<button class="control-btn"

onclick="refreshVehicle()">

🔄

</button>




<button class="control-btn"

onclick="fullscreenMap()">

⛶

</button>


</div>








<script>





// =================================
// TEZZTRACK MAP CORE
// =================================



let imei="<?=$vehicle['imei']?>";



let currentPosition=L.latLng(

<?=$vehicle['latitude']?>,

<?=$vehicle['longitude']?>

);



let currentSpeed=

<?=$vehicle['speed']?>;



let currentDirection=

<?=$vehicle['direction']?>;







// =================================
// MAP INIT
// =================================



let map=L.map('map',{


zoomControl:false,


preferCanvas:true


});



map.setView(

currentPosition,

17

);







// =================================
// MAP PROVIDERS
// =================================



let layers={};





layers.normal=L.tileLayer(


'https://tile.openstreetmap.org/{z}/{x}/{y}.png',


{

maxZoom:20

}


);






layers.dark=L.tileLayer(


'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',


{

maxZoom:20

}


);







layers.satellite=L.tileLayer(


'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',


{

maxZoom:20

}


);







layers.terrain=L.tileLayer(


'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',


{

maxZoom:17

}


);





// DEFAULT MAP


layers.normal.addTo(map);










// =================================
// PROFESSIONAL SVG TRUCK ICON
// =================================



function createTruckIcon(angle){



return L.divIcon({


className:"vehicle-marker",



html:


`

<div style="

transform:rotate(${angle}deg);

width:50px;

height:50px;

filter:drop-shadow(0 5px 8px #0008);

">


<svg

viewBox="0 0 64 64"

width="50"

height="50">


<rect

x="10"

y="22"

width="34"

height="25"

rx="5"

fill="#0066ff"/>



<rect

x="44"

y="30"

width="12"

height="17"

rx="3"

fill="#003b99"/>



<circle

cx="22"

cy="50"

r="6"

fill="#111"/>



<circle

cx="47"

cy="50"

r="6"

fill="#111"/>



<path

d="M32 10 L24 22 L40 22 Z"

fill="#ffcc00"/>


</svg>


</div>

`,



iconSize:[50,50],


iconAnchor:[25,25]



});


}







let truckMarker=L.marker(


currentPosition,


{


icon:createTruckIcon(currentDirection)


}

)

.addTo(map);







truckMarker.bindPopup(`

<b>

<?=$vehicle['vehicle_name']?>


</b>

<br>


<?=$vehicle['plate_number']?>


<br>


Speed:

<?=$vehicle['speed']?> km/h


`);










// =================================
// ROUTE LINE
// =================================



let route=[];


let routeLine=L.polyline(

[],


{


weight:5,


opacity:.8


}

)

.addTo(map);





Stop here.

This part creates:

✅ Real truck SVG (no broken emoji)
✅ Direction rotation
✅ Professional layers menu
✅ Satellite map
✅ Dark map
✅ Normal map
✅ Terrain map
✅ Route line foundation

Next:

PART 3 / 3
This is the most important part:

Tesla movement engine

1 second animation

30 second GPS polling

road route calculation

history

final closing HTML

After PART 3 your live tracking page is complete.


