leaflet three

<!DOCTYPE html>
<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.0/leaflet.css"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.0/leaflet.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.min.js"></script>
  </head>
  <body>
    <h1>label</h1>
    <div id="map"></div>
    <script src="script.js"></script>
  </body>
</html>

// Code goes here

var map = L.map('map').setView([37.9, 140.1], 12);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
}).addTo(map);


d3.xml('http://jsrun.it/assets/u/n/Z/1/unZ1R', function(kml) {
    var w = kml.documentElement.getElementsByTagName("Placemark");
    for (var i = 0; i < w.length; i++)
    {
        //var name = w[i].getElementsByTagName("name");
        //var desc = w[i].getElementsByTagName("description");  
        var coord = w[i].getElementsByTagName("coordinates");
        var lines = coord[0].childNodes[0].nodeValue;
        var latlon = lines.split(',');
        var marker = L.marker([latlon[1], latlon[0]]).addTo(map);
    }
});

/* Styles go here */

#map {
    width: 450px;
    height: 450px;
}