1

I want my CSV file load on the map, and catch my current location at the same time. Now, I can't load CSV successfully.

This is my code:

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin="" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
        integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
        crossorigin=""></script>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<style>
    html, body {
        height: 100%;
        margin: 0;
    }

    #map {
        width: 600px;
        height: 400px;
    }
</style>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    #map {
        height: 100%;
        width: 100vw;
    }
</style>

<script>

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 25, attribution: osmAttrib });
    var map = L.map('map').setView([24.151687694799833, 120.64116954803465], 25).addLayer(osm);
    L.control.scale().addTo(map);



    d3.csv(url, function (data) {
        console.log(data)
    })

    url = './Ultraviolet station.csv'


    function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng).addTo(map)
            .bindPopup("You are within " + radius + " meters from this point").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({ setView: true, maxZoom: 15 });

</script>

This is my CSV file (one of part):

SiteName,SiteEngName,County,TownShip,SiteAddress,Lon,Lat,PublishAgency 蘭嶼,Lanyu,臺東縣,蘭嶼鄉,台東縣蘭嶼鄉紅頭村2號,121.558342,22.036933,交通部中央氣象局 橋頭,Qiaotou,高雄市,橋頭區,高雄市橋頭區隆豐北路1號,120.305689,22.757506,行政院環境保護署 鞍部,Anbu,臺北市,北投區,台北市陽明山竹子湖路111號,121.529669,25.182628,交通部中央氣象局

  • And what is the problem? – Spacedman Aug 27 '19 at 7:53
  • I can't load my csv file. It can't load on the map. – wei shiuan Aug 27 '19 at 7:55
  • You are using url variable in d3.csv call before it is defined. – TomazicM Aug 27 '19 at 9:06
  • But it didn't load on the map,the map just show the location. Did you see the problem? – wei shiuan Aug 27 '19 at 9:13
  • Your code isn't complete - there's no HTML body (or closing head tag). – Spacedman Aug 27 '19 at 9:42

Browse other questions tagged or ask your own question.