0

I am attempting to load a very large geojson to a leaflet map. The map is written in a JavaScript script and is referenced by the HTML script as is outlined below. This was done in accordance (I believe) with the leaflet documentation.

Here is the javascript file:

const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';

const mymap = L.map('map').setView([54.828018, -125.049246],6);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: apiKey
}).addTo(mymap);

This creates a base map with the desired bounds as expected. ALl good so far. I now know that my html is properly linked to my JS script seemingly correctly. However, after that, displaying my own data on the map is not working. When I try to set the source of my geojson within the html script, then load it into the JS script, it does not get displayed upon loading html in server. The basemap still shows but nothing else.

HTML

<!-- Make sure you put the following AFTER Leaflet CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- Load the geojson file tobe mapped by leaflet-->
<script src="C:\Users\User\Desktop\CPAWS\website\cp.geojson"></script>

<!-- Refer to the JS file containing the mapping information -->
<script src="PAWSmap.js"></script>

JavaScript Added to the above JS script

L.geoJSON(cp).addTo(map)

So I figured, try starting more simple. I added script for a marker instead using the simple following, copied directly from the leaflet documentation but with coordinates found within my map range:

var marker = L.marker([50.1, -122.9]).addTo(map);

So my question is: Why is geospatial data not being displayed on my map? Additionally, is my geojson not being shown for the same reason as the marker or is there something else wrong with my methodology there.

Edit browser console error messages

when attempting to place marker:

Uncaught TypeError: t.addLayer is not a function
at i.addTo (Layer.js:52:7)
at PAWSmap.js:16:49

when attempting to laod geojson:

Not allowed to load local resource: file:///C:/Users/User/Desktop/CPAWS/website/cp.geojson

Uncaught ReferenceError: cp is not defined at PAWSmap.js:14:11

crbug/1173575, non-JS module files deprecated.

I have noticed in some tutorials involving feature collection geojsons that they are converted to json files before loading. Not sure if this is the problem but I was not able to do so due to the size of the file. I also thought it would be ok as geojson as leaflet seems to suggest so.

Thank you very much for reading and hopefully understanding my issue.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Max Duso
  • 305
  • 1
  • 4
  • 15
  • 1
    Should map be mymap? – teddybeard Apr 21 '22 at 20:22
  • 1
    Do you get any errors or messages in the console of the browser? – Jimmy Smeijsters Apr 21 '22 at 20:24
  • @teddybeard I think that you can call the variable anything as long as it is consistent. In the documentation they call it "map" also. – Max Duso Apr 21 '22 at 20:28
  • @JimmySmeijsters Ahhh I see. So I get the following `PAWSpage.html:1 Not allowed to load local resource: file:///C:/Users/User/Desktop/CPAWS/website/cp.geojson` and 'Uncaught ReferenceError: cp is not defined at PAWSmap.js:14:11` This is obviously in the case where I try to load the geojson. In tutorials I have watched, users have changed their geojson files to json files to load to leaflet maps. I am wondering if this is an issue as the next line says `non-JS module files deprecated.` – Max Duso Apr 21 '22 at 20:36
  • @JimmySmeijsters I have updated the question to contain this info, thanks. – Max Duso Apr 21 '22 at 20:47
  • 2
    You are referencing a local system file which is not allowed in most browsers for security reasons. It wouldn't be good if anyone on any site could access files on your machine with a little HTML and JavaScript. You will need to load the file from a web server. There are many options out there. One simple option is to use a browser extension explained here: https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource – Jscrip Apr 21 '22 at 21:24
  • So I just tried uploading to geojson.io and the page crashed. Not sure why but my file is 1,700,000 KB. Is that going to be possible to work with anywhere? – Max Duso Apr 21 '22 at 23:49
  • 1.7GB? Even locally it will probably not work. – ghybs Apr 22 '22 at 01:56
  • 1
    I don't think you can put a .geojson file in a script tag. Try renaming the file to cp.js and update your – teddybeard Apr 22 '22 at 02:07
  • Also, are you running a web server or are you just opening the index.html file in the browser? – teddybeard Apr 22 '22 at 02:11
  • @teddybeard @ghybs So I have now simplified the geojson with "mapshaper". Reduced to 0.7 GB, still large I guess. But upon outputting it back to my project folder I converted it to a .js file with `var data = {` at the beginning. Then I tried to implement the leaflet-geojson-vt (vector tiles) script to help with loading the data only when a near enough zoom is achieved. This however still didnt seem to help as now when I run the index.html (PAWSpage.html) in the browser it fails, displaying: "This page is having a problem". I am assuming this might still be because the file is too large? – Max Duso Apr 22 '22 at 16:28
  • 700MB is massive. Can you create and download a simple geojson on geojson.io and try it? – teddybeard Apr 22 '22 at 17:50
  • @teddybeard hmm geojosn.io gives me this message upon upload: `Invalid JSON file: SyntaxError: Unexpected token u in JSON at position 0` . The file being uploaded is an output from mapshaper which saved to my file as a`.json` (even thought specified geojson). I tried uploading it to geojson.io with both the `.json` and `.geojson` extensions. Nothing changed in the actual file though. Both options resulted in the above error. Didn't notice anything wrong in the first element of the file but not really sure what to check. Thanks for putting so much thought into this. – Max Duso Apr 22 '22 at 19:05
  • Here is a simple geojson object: `{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -97.3828125, 39.90973623453719 ] } } ] }` It places a marker in the center of the United States. You can save it to a file and use it with your code. If the marker displays, then your geojson file is too big or wrong format. You will need to name this file with .js extension and assign the json the a variable as before. – teddybeard Apr 22 '22 at 19:28
  • OK, so I saved the above marker to `test_geojson .json` and added `var test_geojson =` to the front of it. Then within my html page I added `` . Finally, within my `PAWSmap.js` file I put `var vtLayer = L.geoJson.vt(test_json, options).addTo(map);`, centered the map of united states and played with the zoom level. Didn't find any marker. I guess this means that there is still hope for my json but also that I need to figure out where I am going wrong. Thanks for that suggestion, good idea. – Max Duso Apr 25 '22 at 22:22

0 Answers0