0

I put my GeoJSON file on my desktop, I don't know why my file can't load to the map.

My code:

    <html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
            crossorigin=""></script>
    <!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> -->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>


</head>

<body>
    <div id="map" style="height: 100%; border: 1px solid #AAA;"></div>
    <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: 20, attribution: osmAttrib });
        var map = L.map('map').setView([24.151687694799833, 120.64116954803465], 15).addLayer(osm);
        var markers = L.markerClusterGroup({ chunkedLoading: true });

        L.control.scale().addTo(map);


        fetch("TaichungRange.json")
            .then(response => response.json())
            .then(json => {
                kaoDist = L.geoJSON(json).bindPopup(function (layer) {
                    return layer.feature.properties.T_Name;
                }).addTo(map);
                map.fitBounds(kaoDist.getBounds());
            });

    </script>

</body>

</html>

It's my GeoJSON file (one of part):

{
  "type": "FeatureCollection",
  "features": [

    {
      "type": "Feature",
      "properties": {
        "OBJECTID": "302",
        "T_UID": "302",
        "Area": "927614.89822",
        "Town_ID": "6600100",
        "T_Name": "中區",
        "Add_Date": "2010\/12\/25",
        "Add_Accept": "",
        "Remark": "",
        "County_ID": "66",
        "C_Name": "臺中市",
        "_id": 19260614
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [ 120.679275089, 24.148159598 ],
            [ 120.680746339, 24.14693056 ],
            [ 120.681035742, 24.146691519 ],
            [ 120.681119318, 24.146684118 ],
            [ 120.681198137, 24.146687153 ],
            [ 120.6812498, 24.146689458 ],
            [ 120.681269462, 24.146690335 ],
            [ 120.681367571, 24.14666311 ],
            [ 120.681399751, 24.146635132 ],
            [ 120.681588083, 24.146471391 ],
            [ 120.681711827, 24.146364362 ],
            [ 120.681808943, 24.146294624 ],
            [ 120.68186855, 24.146224482 ],
            [ 120.681944231, 24.146160468 ],
            [ 120.681971512, 24.146137392 ],
            [ 120.68216784, 24.145980637 ],
            [ 120.682190007, 24.145966408 ],
            [ 120.682193164, 24.145941059 ],
            [ 120.68207943, 24.145674377 ],
            [ 120.681910802, 24.145305332 ],
            [ 120.681852215, 24.145205346 ],
            [ 120.681766169, 24.145107072 ],
            [ 120.681647289, 24.14488761 ],
            [ 120.681677529, 24.144737597 ],
            [ 120.681720599, 24.144655132 ],
            [ 120.681786683, 24.144541193 ],
            [ 120.681871331, 24.144472855 ],
            [ 120.682097159, 24.144294834 ],
            [ 120.682864052, 24.14365601 ],
            [ 120.683105, 24.143455298 ],
            [ 120.683632391, 24.142961913 ],
            [ 120.684324817, 24.142314127 ],
            [ 120.684548035, 24.142526109 ],
            [ 120.6850456, 24.142998449 ],
            [ 120.685300003, 24.143236931 ],
            [ 120.685426161, 24.143282059 ],
            [ 120.685566204, 24.143278952 ],
            [ 120.685644985, 24.143275693 ],
            [ 120.685766267, 24.14327484 ],
            [ 120.685767128, 24.143171096 ],
            [ 120.685771504, 24.14264364 ],
            [ 120.685782653, 24.141299902 ],
            [ 120.685792532, 24.140109133 ],
            [ 120.686002588, 24.140106189 ],
            [ 120.686050935, 24.137994258 ],
            [ 120.686041452, 24.137978084 ],
            [ 120.685971293, 24.137858474 ],
            [ 120.685916471, 24.137789386 ],
            [ 120.685869176, 24.137712286 ],
            [ 120.685794971, 24.137567458 ],
            [ 120.685778394, 24.137535105 ],
            [ 120.685736153, 24.137438478 ],
            [ 120.685724555, 24.137366002 ],
            [ 120.685674704, 24.137054524 ],
            [ 120.685666244, 24.136948791 ],
            [ 120.685632759, 24.136849887 ],
            [ 120.685549137, 24.136797977 ],
            [ 120.685244464, 24.136657042 ],
            [ 120.684009465, 24.136115106 ],
            [ 120.683401085, 24.135937811 ],
            [ 120.683123845, 24.135877651 ],
            [ 120.682466355, 24.13555262 ],
            [ 120.682409143, 24.135528204 ],
            [ 120.682235267, 24.13587901 ],
            [ 120.682167483, 24.135973451 ],
            [ 120.681155456, 24.136868921 ],
            [ 120.680824166, 24.13716205 ],
            [ 120.680370871, 24.137548549 ],
            [ 120.6791183, 24.138616525 ],
            [ 120.678731256, 24.138946524 ],
            [ 120.678384256, 24.139242378 ],
            [ 120.677814537, 24.139734567 ],
            [ 120.677238951, 24.140231818 ],
            [ 120.676765947, 24.140640445 ],
            [ 120.675763237, 24.141506669 ],
            [ 120.675497696, 24.141736062 ],
            [ 120.674715203, 24.142425815 ],
            [ 120.674677036, 24.142459457 ],
            [ 120.673558029, 24.143445817 ],
            [ 120.673834803, 24.143697505 ],
            [ 120.67480668, 24.14463683 ],
            [ 120.67490739, 24.144721035 ],
            [ 120.674960937, 24.144765952 ],
            [ 120.675003347, 24.144815686 ],
            [ 120.675016833, 24.144857945 ],
            [ 120.675026409, 24.144893387 ],
            [ 120.675027561, 24.144942771 ],
            [ 120.675039406, 24.145021847 ],
            [ 120.675030441, 24.145119715 ],
            [ 120.675029229, 24.145174909 ],
            [ 120.675019647, 24.145246356 ],
            [ 120.67504427, 24.145283797 ],
            [ 120.675091301, 24.145317352 ],
            [ 120.675143302, 24.145349643 ],
            [ 120.675181578, 24.145329354 ],
            [ 120.675313558, 24.145307207 ],
            [ 120.675533571, 24.145254582 ],
            [ 120.675579825, 24.145254816 ],
            [ 120.675621323, 24.145265486 ],
            [ 120.675655378, 24.145278606 ],
            [ 120.675690817, 24.145297445 ],
            [ 120.675746042, 24.145360713 ],
            [ 120.675969729, 24.145574322 ],
            [ 120.675988948, 24.145592676 ],
            [ 120.677156947, 24.14673958 ],
            [ 120.677301992, 24.146902216 ],
            [ 120.677379049, 24.146990334 ],
            [ 120.677459774, 24.147074937 ],
            [ 120.677539533, 24.147118184 ],
            [ 120.67762271, 24.147098123 ],
            [ 120.677627785, 24.147096899 ],
            [ 120.677675232, 24.147094814 ],
            [ 120.677705528, 24.147053984 ],
            [ 120.677718764, 24.147031882 ],
            [ 120.67775454, 24.147011641 ],
            [ 120.677777271, 24.147021531 ],
            [ 120.677848996, 24.147041953 ],
            [ 120.677919337, 24.147056648 ],
            [ 120.677959132, 24.147047811 ],
            [ 120.678015813, 24.146959344 ],
            [ 120.678070572, 24.146949066 ],
            [ 120.678114596, 24.146960834 ],
            [ 120.678183218, 24.147008898 ],
            [ 120.678219205, 24.147104738 ],
            [ 120.678368052, 24.147376481 ],
            [ 120.678421317, 24.147462779 ],
            [ 120.678418978, 24.147576598 ],
            [ 120.678458618, 24.147721782 ],
            [ 120.678541185, 24.147831626 ],
            [ 120.67863775, 24.147898673 ],
            [ 120.67872663, 24.14795783 ],
            [ 120.678763641, 24.147990433 ],
            [ 120.678847187, 24.148088766 ],
            [ 120.678947272, 24.148199423 ],
            [ 120.679053324, 24.148244449 ],
            [ 120.679114652, 24.14824782 ],
            [ 120.679208748, 24.148209183 ],
            [ 120.679275089, 24.148159598 ]
          ]
        ]
      }
    },
6
  • 2
    Possible duplicated gis.stackexchange.com/q/305646/49538
    – Fran Raga
    Jul 30, 2019 at 6:13
  • Are you running your map from web server or from your local file system?
    – TomazicM
    Jul 30, 2019 at 7:29
  • @TomazicM Yes, but the file didn't load on the map. I validate the file is a json file.
    – wei shiuan
    Jul 30, 2019 at 7:32
  • Sorry, but answering yes doesn't help. Question is, where are you running you map (your html code above) from? Reply has to be explicit: server OR file system.
    – TomazicM
    Jul 30, 2019 at 7:55
  • @TomazicM I run the map on web server
    – wei shiuan
    Jul 30, 2019 at 7:57

1 Answer 1

1

If you run your map from server and would like show your local GeoJSON file on map, you will have to upload your file. Usual method for this is using FileReader() object (see for example https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript).

In your case I would recommend Leaflet plugin Leaflet.FileLayer, which can do exactly what you want: upload GeoJSON to your map. See example http://makinacorpus.github.io/Leaflet.FileLayer/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.