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/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="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 ]
          ]
        ]
      }
    },
  • 2
    Possible duplicated gis.stackexchange.com/q/305646/49538 – Fran Raga Jul 30 at 6:13
  • Are you running your map from web server or from your local file system? – TomazicM Jul 30 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 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 at 7:55
  • @TomazicM I run the map on web server – wei shiuan Jul 30 at 7:57
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, privacy policy and cookie policy

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