JSFiddle - React, Tailwind, and code Playground

by falkedesign

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Leaflet Map"</title>
    <!-- leaflet.css, leaflet.js, turf.js von externer Quelle einbinden -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <!-- Load Leaflet code library-->
    <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>


</head>
<body>
<div id='Karte' style='height: 800px; width: 100%;'></div>


<script type='text/javascript'>

  var Karte = L.map('Karte').setView([48.896465, 10.996526], 7);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    'attribution': 'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
    'useCache': true
  }).addTo(Karte);


  var geo = L.geoJson(null, {
    onEachFeature: function onEachFeature(f, l) {
      var out = [];
      if (f.properties) {
        for (var key in f.properties) {
          out.push(key + ": " + f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
      }
    }
  }).addTo(Karte);


  var mountains = [
    {
      Bergname: "Hesselberg",
      Berghoehe: 690,
      Landkreis: "Ansbach",
      Gebirge_Landschaft: "Wörnitztal_Fränkische Alb",
      Latitude: 49.06861780,
      Longitude: 10.52610990
    },
    {
      Bergname: "Dürrenberg",
      Berghoehe: 656,
      Landkreis: "Weißenburg-Gunzenhausen",
      Gebirge_Landschaft: "Hahnenkamm",
      Latitude: 49.01647480,
      Longitude: 10.76511290
    },
  ];

  var fg = L.featureGroup().addTo(Karte);
  mountains.forEach((row) => {
    var marker = L.marker([row.Latitude, row.Longitude], {
      opacity: 1
    });
    marker._mountainData = row;
    marker.addTo(fg)
  });


  fetch("./bayern.geojson")
    .then(response => response.json())
   ...