Show waypoint names and icons with geojson data

[brigghius]

Your environment

• leaflet-elevation: 1.9.6
• leaflet: 1.9.2
• Angular version: 14
• browser: chrome
• operating system: W10

I saw that there is a different view of the map depending on whether the data is in geojson or in gpx

GEOJSON

GPX

how do i display map and graph with data in geojson like it happens with gpx (name of cities and icons)? thanks

[brigghius]

ok, i have found the structure of data to use geojson as gpx:

export interface ElevationBlock {
    name: string;
    type: string;
    features: Feature[];
}

export interface Feature {
    type: string;
    geometry: Geometry;
    properties?: Properties;
}

export interface Geometry {
    type: string;
    coordinates: any[];
}

export interface Properties {
    name: string;
    amenity: string;
    popupContent: string;
}

for example

track: ElevationBlock = {
    name: "demo.geojson",
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [169.13693, -44.696476, 296],
            [169.134602, -44.69764, 295],
            [169.129983, -44.701164, 299],
            [169.131292, -44.702382, 303],
            [169.13376, -44.704533, 315],
            [169.135568, -44.705574, 336],
            [169.136179, -44.70934, 338],
            [169.137011, -44.714066, 344],
            [169.136984, -44.719489, 342],
            [169.136898, -44.725235, 350]
          ]
        }
      },
      {
        type: "Feature",
        properties: {
          name: "punto 1",
          amenity: "Baseball Stadium",
          popupContent: "This is where the Rockies play!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.13693, -44.696476, 296]
        }
      },
      {
        type: "Feature",
        properties: {
          name: "punto 2",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.134602, -44.69764, 295]
        }
      }
      ,
      {
        type: "Feature",
        properties: {
          name: "punto 3",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.129983, -44.701164, 299]
        }
      }
      ,
      {
        type: "Feature",
        properties: {
          name: "punto 4",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.131292, -44.702382, 303]
        }
      }
      ,
      {
        type: "Feature",
        properties: {
          name: "punto 5",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.13376, -44.704533, 315]
        }
      }
      ,
      {
        type: "Feature",
        properties: {
          name: "punto 6",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.135568, -44.705574, 336]
        }
      }
      ,
      {
        type: "Feature",
        properties: {
          name: "punto 7",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.136179, -44.70934, 338]
        }
      }
      ,
      {
        type: "Feature",
        properties: {
          name: "punto 8",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.137011, -44.714066, 344]
        }
      }
      ,
      {
        type: "Feature",
        properties: {
          name: "punto 9",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.136984, -44.719489, 342]
        }
      },
      {
        type: "Feature",
        properties: {
          name: "punto 10",
          amenity: "Baseball Stadium 1",
          popupContent: "This is where the Rockies play 1!"
        },
        geometry: {
          type: "Point",
          coordinates: [169.136898, -44.725235, 350]
        }
      }
    ]
  }

it might come in handy for someone else