Convert leaflet coordinates to svg element

</ProgAli> answered on December 15, 2024 Popularity 3/10 Helpfulness 1/10

answer Convert leaflet coordinates to svg element

Convert leaflet coordinates to svg element

Comment

-1

interface Coordinate {
  latitude: number;
  longitude: number;
}
//========== Convert function ==========//
function convertGpsToSvgPoints(coordinates: Coordinate[], viewBoxSize = 200): string {
  if (coordinates.length === 0) return "";

  // Find the bounds of the coordinates
  const lats = coordinates.map((coord) => coord.latitude);
  const longs = coordinates.map((coord) => coord.longitude);

  const minLat = Math.min(...lats);
  const maxLat = Math.max(...lats);
  const minLong = Math.min(...longs);
  const maxLong = Math.max(...longs);

  // Calculate the range
  const latRange = maxLat - minLat;
  const longRange = maxLong - minLong;

  // Convert coordinates to SVG points
  const points = coordinates.map((coord) => {
    // Normalize to 0-1 range
    const x = (coord.longitude - minLong) / longRange;
    const y = (coord.latitude - minLat) / latRange;

    // Scale to viewbox size and add padding
    const padding = viewBoxSize * 0.1; // 10% padding
    const scaledX = x * (viewBoxSize - 2 * padding) + padding;
    const scaledY = y * (viewBoxSize - 2 * padding) + padding;

    return `${scaledX.toFixed(1)},${scaledY.toFixed(1)}`;
  });

  return points.join(" ");
}

//========== Render ==========//
const coordinates = [
  { latitude: 35.95933, longitude: 50.829516 },
  { latitude: 35.958714, longitude: 50.830074 },
  { latitude: 35.959972, longitude: 50.8312 },
  { latitude: 35.960701, longitude: 50.830095 },
  { latitude: 35.95933, longitude: 50.829516 }
];

const points = convertGpsToSvgPoints(coordinates);

<svg viewBox="0 0 200 200" className="w-full h-full">
  <polygon 
    points={points} 
    fill="none" 
    stroke="white" 
    strokeWidth="2"
    />
</svg>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: coordinates element javascript leaflet svg

Link to this answer
Share Copy Link

Contributed on Dec 15 2024

</ProgAli>

0 Answers Avg Quality 2/10

Convert leaflet coordinates to svg element

Contents

More Related Answers

Convert leaflet coordinates to svg element

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.