function vykresliMapu(canvasId, mapa) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext("2d"); ctx.clearRect( 0, 0, canvas.width, canvas.height ); /* * ---------------------------------------- * Rozsah mapy * ---------------------------------------- */ const minLon = mapa.bounds.minLon; const maxLon = mapa.bounds.maxLon; const minLat = mapa.bounds.minLat; const maxLat = mapa.bounds.maxLat; const padding = 30; const width = canvas.width - padding * 2; const height = canvas.height - padding * 2; const lonRange = maxLon - minLon; const latRange = maxLat - minLat; /* * Zachovanie pomeru strán. */ const scale = Math.min( width / lonRange, height / latRange ); const mapWidth = lonRange * scale; const mapHeight = latRange * scale; const offsetX = (canvas.width - mapWidth) / 2; const offsetY = (canvas.height - mapHeight) / 2; /* * GPS → Canvas */ function gpsToCanvas(lon, lat) { const x = offsetX + (lon - minLon) * scale; const y = offsetY + (maxLat - lat) * scale; return { x: x, y: y }; } /* * ---------------------------------------- * Vykreslenie všetkých ciest * ---------------------------------------- */ for (const road of mapa.roads) { if (!road.nodes || road.nodes.length < 2) { continue; } ctx.beginPath(); road.nodes.forEach((point, index) => { const p = gpsToCanvas( point.lon, point.lat ); if (index === 0) { ctx.moveTo( p.x, p.y ); } else { ctx.lineTo( p.x, p.y ); } }); /* * Hrúbka podľa typu cesty */ let lineWidth = 1; switch (road.highway) { case "motorway": lineWidth = 6; break; case "trunk": lineWidth = 5; break; case "primary": lineWidth = 4; break; case "secondary": lineWidth = 3; break; case "tertiary": lineWidth = 2; break; case "residential": lineWidth = 1.5; break; default: lineWidth = 1; } ctx.lineWidth = lineWidth; ctx.strokeStyle = "#777"; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.stroke(); } /* * ---------------------------------------- * START * ---------------------------------------- */ const start = gpsToCanvas( mapa.start.lon, mapa.start.lat ); ctx.beginPath(); ctx.arc( start.x, start.y, 8, 0, Math.PI * 2 ); ctx.fillStyle = "green"; ctx.fill(); /* * ---------------------------------------- * END * ---------------------------------------- */ const end = gpsToCanvas( mapa.end.lon, mapa.end.lat ); ctx.beginPath(); ctx.arc( end.x, end.y, 8, 0, Math.PI * 2 ); ctx.fillStyle = "red"; ctx.fill(); if (aktualnaPoloha) { vykresliGPS(aktualnaPoloha); } } fetch("mapa.php?lon1=17.1077&lat1=48.1486&lon2=17.1150&lat2=48.1510") .then(response => response.json()) .then(mapa => { vykresliMapu( "mapCanvas", mapa ); }); function vykresliTrasu(ctx, route, gpsToCanvas) { if (!route || !route.points) { return; } if (route.points.length < 2) { return; } ctx.beginPath(); route.points.forEach((point, index) => { const p = gpsToCanvas( point.lon, point.lat ); if (index === 0) { ctx.moveTo( p.x, p.y ); } else { ctx.lineTo( p.x, p.y ); } }); ctx.lineWidth = 8; ctx.strokeStyle = "#ff0000"; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.stroke(); /* * Tenká svetlá línia uprostred. */ ctx.beginPath(); route.points.forEach((point, index) => { const p = gpsToCanvas( point.lon, point.lat ); if (index === 0) { ctx.moveTo(p.x, p.y); } else { ctx.lineTo(p.x, p.y); } }); ctx.lineWidth = 3; ctx.strokeStyle = "#ffffff"; ctx.stroke(); } A v vykresliMapu() po vykreslení ciest zavoláš: vykresliTrasu( ctx, mapa.route, gpsToCanvas );