0

I'm trying to add a Vector Lines into my OpenLayers Website by using GeoJSON and used the OpenLayer docs as a help. I think I did everything according to the example but neither my vector layers nor my map appears on the website. I get the error message:

"unexpected character at line 1 column 1 of the JSON data"

perhabs there is something wrong with my GeoJSON or how I connect my js variables with my GeoJSON? That is my OpenLayers code:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4';
import VectorLayer from 'ol/layer/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import VectorSource from 'ol/source';
import {styles} from './VectorStyles'

window.onload = function(){

  //this should give my layers the correct transformation
  proj4.defs("EPSG:25832","+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
  register(proj4);

  //saves my GeoJSON into an geojsonObejct var
  var geojsonObject = 'C:/Users/user/Desktop/Gonsbach/Gonsbach.geojson'

  //vectorSource as in the docs
  var vectorSource = new VectorSource({
    features: new GeoJSON().readFeatures(geojsonObject)
  })
  
  //with the source and the style I can create a new vector layer
  //the style is in a seperate .js file. 
  var Gonsbach = new VectorLayer({
    source: vectorSource,
    style: styles,
  });
  
  //now I just add the vector Layer to my map
  map.addLayer(Gonsbach)
  
  var map = new Map({
      layers: [
          new TileLayer({
              source: new OSM()
          }), 
      ],
      target: 'map',
      view: new View({
          center: [910318, 6444427],
          zoom: 12,
          projetion: 'EPSG:25832'
    }),
  });
}

That is my GeoJSON code:

{
"type": "FeatureCollection",
"name": "Gewaesserabschnitte",
"features": [
{ "type": "Feature", "properties": { "fid": 1.0, "o2 (in %)": 90.0, "no3 (mg\/l)": 13.0, "ph-wert": 6.0, "nh4 (mg\/l)": 0.04, "no2 (mg\/l)": 0.25, "scale": 8000 }, "geometry": { "type": "LineString", "coordinates": [ [ 439739.539313841727562, 5536104.445168466307223 ], [ 439732.942652594181709, 5536149.877767100930214 ], [ 439724.574578237719834, 5536164.1462333323434 ], [ 439736.724421020888258, 5536233.464011526666582 ], [ 439741.433762245753314, 5536273.098866205662489 ], [ 439751.716323268250562, 5536302.748997206799686 ], [ 439764.745632711332291, 5536323.863738300278783 ], [ 439775.012061203946359, 5536352.096415889449418 ], [ 439775.250725442543626, 5536373.354598745703697 ], [ 439782.611068246420473, 5536395.950129802338779 ], [ 439794.139357308275066, 5536409.994530701078475 ], [ 439818.759993943909649, 5536450.822065219283104 ], [ 439844.610673918505199, 5536474.627294369973242 ], [ 439985.736823005427141, 5536638.875099274329841 ], [ 440051.487035491736606, 5536672.155328895896673 ], [ 440143.888856283971108, 5536673.958007009699941 ], [ 440372.317061513254885, 5536766.372370785102248 ], [ 440460.46961716003716, 5536769.644936578348279 ], [ 440473.36918710207101, 5536779.422698650509119 ], [ 440494.810719052387867, 5536790.522971729747951 ], [ 440533.461811530054547, 5536815.605149755254388 ], [ 440663.670140638074372, 5536894.946598484180868 ], [ 440769.216827536816709, 5536929.21092477440834 ], [ 440817.843910716357641, 5536957.018729401752353 ], [ 440846.420258281519637, 5536970.875719822943211 ], [ 440895.030938066425733, 5536997.266951928846538 ], [ 440918.016575370915234, 5537019.689084901474416 ], [ 440936.754685975844041, 5537043.575195804238319 ], [ 440941.620893525949214, 5537051.748555677011609 ] ] } },
{ "type": "Feature", "properties": { "fid": 2.0, "o2 (in %)": 90.0, "no3 (mg\/l)": 10.0, "ph-wert": 6.0, "nh4 (mg\/l)": 0.02, "no2 (mg\/l)": 0.3, "scale": 15000 }, "geometry": { "type": "LineString", "coordinates": [ [ 441384.502329971117433, 5538295.968604033812881 ], [ 441388.248388875974342, 5538304.033650607801974 ], [ 441486.984163766435813, 5538368.13059963285923 ], [ 441613.72860172187211, 5538395.085631323046982 ], [ 441700.340209427522495, 5538389.892494615167379 ], [ 441856.854399741452653, 5538410.862105940468609 ], [ 441888.415076231642161, 5538438.856543784961104 ], [ 441975.378840433200821, 5538466.251040913164616 ], [ 442016.668193216610234, 5538474.305200132541358 ], [ 442053.848760741471779, 5538496.572216054424644 ], [ 442086.629516030778177, 5538506.135648872703314 ], [ 442165.144049378868658, 5538540.708112339489162 ], [ 442211.13713810039917, 5538589.799856159836054 ], [ 442446.169569074874744, 5538646.775909235700965 ], [ 442555.870853041880764, 5538675.351261466741562 ], [ 442661.006258107256144, 5538675.64237295370549 ], [ 442820.968596133461688, 5538621.513294637203217 ], [ 442960.394285945920274, 5538639.862662608735263 ], [ 443026.131175672868267, 5538675.999395100399852 ], [ 443130.176475008483976, 5538707.479852883145213 ], [ 443172.747448852809612, 5538702.778120253235102 ], [ 443261.000582220905926, 5538718.84419612120837 ], [ 443282.488415336818434, 5538735.617697793059051 ], [ 443329.440673049830366, 5538742.204790784046054 ], [ 443349.432817784952931, 5538751.910620216280222 ], [ 443368.124101502704434, 5538772.964098119176924 ], [ 443467.709655237733386, 5538786.080148205161095 ], [ 443503.536020560306497, 5538815.453566912561655 ], [ 443546.270523696497548, 5538826.337035630829632 ], [ 443586.298030430683866, 5538849.999693596735597 ], [ 443681.754028295108583, 5538875.913258275948465 ], [ 443738.976020118454471, 5538896.739871405996382 ], [ 443761.581921286589932, 5538901.815237099304795 ], [ 443814.187996013090014, 5538905.867785341106355 ], [ 443851.575767821806949, 5538915.038655813783407 ], [ 443864.976196811534464, 5538922.86716360040009 ], [ 443879.071991329197772, 5538929.271726904436946 ], [ 443891.558599009003956, 5538934.630651326850057 ], [ 443907.067388471739832, 5538940.312140363268554 ], [ 443914.363977627595887, 5538941.829551027156413 ], [ 443924.865882664569654, 5538944.198861572891474 ], [ 443935.332587927172426, 5538943.203943868167698 ], [ 443948.433051896747202, 5538939.348140553571284 ], [ 443962.572971375659108, 5538933.002304431982338 ], [ 443970.331894341681618, 5538927.785712188109756 ], [ 443977.227094488684088, 5538924.880268247798085 ], [ 443982.372615102911368, 5538924.472317626699805 ], [ 443997.82583151437575, 5538924.842092296108603 ], [ 444007.10331228346331, 5538928.995219810865819 ], [ 444013.695197907858528, 5538931.051386553794146 ], [ 444054.143437356397044, 5538944.264600476250052 ], [ 444096.206383805256337, 5538942.054868498817086 ], [ 444121.928408540145028, 5538939.484544093720615 ], [ 444152.823648773715831, 5538939.162543863989413 ], [ 444165.078898751118686, 5538939.38903502561152 ], [ 444177.530147141078487, 5538941.384362425655127 ], [ 444188.394419938209467, 5538944.458751395344734 ], [ 444197.323970295372419, 5538949.32414941675961 ], [ 444206.255347423488274, 5538954.366622923873365 ], [ 444232.333618677337654, 5538968.970297968015075 ], [ 444258.698727804643568, 5538977.018981007859111 ], [ 444291.430053489981219, 5538982.522438891232014 ], [ 444302.49565111938864, 5538987.897022088058293 ], [ 444330.965492587420158, 5538993.444992841221392 ], [ 444351.395579352974892, 5538994.295335257425904 ], [ 444366.371015909360722, 5538999.983608996495605 ], [ 444432.356563306122553, 5539010.101137483492494 ], [ 444440.531501115066931, 5539010.724719504825771 ], [ 444458.801463377254549, 5539008.764539915136993 ], [ 444474.210355793358758, 5539004.886153449304402 ], [ 444502.187295756302774, 5538997.158921521157026 ], [ 444503.570831720135175, 5538997.400540792383254 ] ] } },
{ "type": "Feature", "properties": { "fid": 3.0, "o2 (in %)": 98.0, "no3 (mg\/l)": 11.0, "ph-wert": 5.5, "nh4 (mg\/l)": 0.1, "no2 (mg\/l)": 0.06, "scale": 2000 }, "geometry": { "type": "LineString", "coordinates": [ [ 440841.751681211346295, 5538222.189647431485355 ], [ 440841.759497715334874, 5538222.898008081130683 ], [ 440878.743717488949187, 5538226.740707055665553 ], [ 440907.81272040377371, 5538221.461094811558723 ], [ 441019.780499434447847, 5538196.140885054133832 ], [ 441047.343435671937186, 5538183.085618677549064 ], [ 441063.502121792698745, 5538166.613556492142379 ], [ 441096.919274230254814, 5538169.080115532502532 ], [ 441111.235016541846562, 5538178.841180927120149 ], [ 441162.63598513440229, 5538201.655675104819238 ], [ 441237.50079256342724, 5538226.338652867823839 ], [ 441259.066902287711855, 5538249.480941305868328 ], [ 441304.644334121025167, 5538259.608361601829529 ], [ 441323.869715572451241, 5538263.648547666147351 ], [ 441384.69124153238954, 5538295.938052516430616 ] ] } },
{ "type": "Feature", "properties": { "fid": 4.0, "o2 (in %)": 92.0, "no3 (mg\/l)": 6.0, "ph-wert": 6.0, "nh4 (mg\/l)": 0.04, "no2 (mg\/l)": 0.3, "scale": 7000 }, "geometry": { "type": "LineString", "coordinates": [ [ 440941.620893525949214, 5537051.748555677011609 ], [ 440984.535816266899928, 5537123.829144899733365 ], [ 441022.524805039749481, 5537218.361542447470129 ], [ 441095.221280025958549, 5537367.778988471254706 ], [ 441103.430673010763712, 5537468.303140427917242 ], [ 441166.269104428705759, 5537626.325040364637971 ], [ 441168.047478649707045, 5537658.897531099617481 ], [ 441259.126606045640074, 5537801.01802884042263 ], [ 441361.876772109535523, 5537971.347719811834395 ], [ 441388.317306230019312, 5538050.407540929503739 ], [ 441344.125541774032172, 5538167.078247386962175 ], [ 441362.05696347419871, 5538247.645037651993334 ], [ 441384.502329971117433, 5538295.968604033812881 ] ] } },
{ "type": "Feature", "properties": { "fid": 5.0, "o2 (in %)": 60.0, "no3 (mg\/l)": 4.0, "ph-wert": 5.3, "nh4 (mg\/l)": 0.05, "no2 (mg\/l)": 0.18, "scale": 13000 }, "geometry": { "type": "LineString", "coordinates": [ [ 444503.570831720135175, 5538997.400540792383254 ], [ 444542.392090781475417, 5539004.18024480342865 ], [ 444648.868999591795728, 5539031.943952777422965 ], [ 444710.399683696625289, 5539057.871022731997073 ], [ 444723.194584990793373, 5539058.801531734876335 ], [ 444726.610123310238123, 5539062.839158355258405 ], [ 444733.37728233623784, 5539064.717258594930172 ], [ 444734.815976074372884, 5539066.473226956091821 ], [ 444740.900292722857557, 5539071.014579127542675 ], [ 444748.11380950344028, 5539081.742089434526861 ], [ 444771.380679900408722, 5539082.210604277439415 ], [ 444776.386853803298436, 5539085.523534629493952 ], [ 444778.228067258722149, 5539091.879427048377693 ], [ 444786.993860318616498, 5539098.163973402231932 ], [ 444799.330756850773469, 5539106.359613505192101 ], [ 444807.355292531428859, 5539109.641470400616527 ], [ 444813.589703730889596, 5539111.525139356032014 ], [ 444820.883959253085777, 5539112.866667102091014 ], [ 444824.996841031766962, 5539115.657583434134722 ], [ 444833.055973989074118, 5539122.303606402128935 ], [ 444837.359151145617943, 5539126.33211606554687 ], [ 444843.414157298393548, 5539128.040581359528005 ], [ 444849.996350771340076, 5539129.212393677793443 ], [ 444852.137910659075715, 5539130.252826166339219 ], [ 444854.297687702986877, 5539133.063852198421955 ], [ 444855.225527949922252, 5539136.950020257383585 ], [ 444858.446969612326939, 5539139.395965347997844 ], [ 444860.94909254158847, 5539140.963922853581607 ], [ 444864.170529152033851, 5539143.409869476221502 ], [ 444871.673240330070257, 5539147.759630839340389 ], [ 444874.186282303300686, 5539150.389944178052247 ], [ 444879.748655303323176, 5539155.999209297820926 ], [ 444887.76760375907179, 5539158.749978988431394 ], [ 444889.200759540544823, 5539159.974781745113432 ], [ 444895.478772819507867, 5539166.107924435287714 ], [ 444897.096757557010278, 5539168.039134507998824 ], [ 444899.618879073066637, 5539171.554739489220083 ], [ 444911.228849762817845, 5539178.16430152207613 ], [ 444931.472192217770498, 5539195.486804950982332 ], [ 444950.448913972824812, 5539210.520356138236821 ], [ 444957.373351147281937, 5539210.449236093088984 ], [ 444960.799525652022567, 5539215.549232815392315 ], [ 444967.925140598788857, 5539217.778037323616445 ], [ 444975.962127650040202, 5539222.299468290992081 ], [ 444979.212545475165825, 5539227.578344127163291 ], [ 444982.230880156974308, 5539227.547358111478388 ], [ 444984.955911910394207, 5539233.539923885837197 ], [ 444995.485811869322788, 5539238.744077912531793 ], [ 445026.559521985589527, 5539273.308793476782739 ], [ 445028.699173216416966, 5539274.17221250385046 ], [ 445034.39703756920062, 5539275.707430430687964 ], [ 445036.330085953464732, 5539273.73980023432523 ], [ 445040.404601315327454, 5539272.812648594379425 ], [ 445045.020838544587605, 5539272.765311332419515 ], [ 445048.416027733183, 5539274.855376338586211 ], [ 445050.048447368084453, 5539278.203027833253145 ], [ 445051.86930413817754, 5539282.611183260567486 ], [ 445052.074080936610699, 5539285.265176765620708 ], [ 445051.200867740961257, 5539286.690712151117623 ], [ 445050.148292570607737, 5539287.941013601608574 ], [ 445048.570338448567782, 5539289.904992670752108 ], [ 445048.077637007518206, 5539293.805642087943852 ], [ 445048.103053118975367, 5539296.284396600909531 ], [ 445048.126653791056015, 5539298.586096200160682 ], [ 445048.170224254776258, 5539302.83538518473506 ], [ 445048.692336371925194, 5539319.120654282160103 ], [ 445051.033111243741587, 5539322.283943491056561 ], [ 445053.3738833675161, 5539325.447231817059219 ], [ 445055.355930867663119, 5539328.260054174810648 ], [ 445059.100727247016039, 5539329.81530502345413 ], [ 445063.724174973671325, 5539330.476194459944963 ], [ 445067.836762073682621, 5539333.267179316841066 ], [ 445074.971247185778338, 5539336.381336653605103 ], [ 445075.154236314469017, 5539336.910674606449902 ], [ 445074.685109896527138, 5539343.11296780128032 ], [ 445074.712328436900862, 5539345.768751772120595 ], [ 445077.256024260772392, 5539351.408945753239095 ], [ 445077.993421096354723, 5539354.057447520084679 ], [ 445081.747264435980469, 5539356.497965719550848 ], [ 445081.750893114833161, 5539356.852069442160428 ], [ 445086.046685122419149, 5539377.525252304971218 ], [ 445089.122986195026897, 5539383.159960478544235 ], [ 445091.304306094883941, 5539388.095556491985917 ], [ 445097.032866158231627, 5539392.640668426640332 ], [ 445103.147335298999678, 5539400.192003171890974 ], [ 445105.373974823800381, 5539409.553843722678721 ], [ 445108.629593910241965, 5539415.363760245963931 ], [ 445111.33625766239129, 5539419.585679761134088 ], [ 445112.43052736565005, 5539422.407565166242421 ], [ 445116.43075186398346, 5539431.574138262309134 ], [ 445118.45624311681604, 5539438.636108800768852 ], [ 445120.467224532156251, 5539444.281679153442383 ], [ 445123.538013047655113, 5539449.385189610533416 ], [ 445130.502020521438681, 5539453.209363294765353 ], [ 445137.618184168764856, 5539454.553045297972858 ], [ 445138.335600308026187, 5539455.253969573415816 ], [ 445149.457338592968881, 5539466.295344308950007 ], [ 445150.819768608198501, 5539495.320275097154081 ], [ 445162.504817527660634, 5539509.365938354283571 ], [ 445172.015838817460462, 5539536.53661748021841 ], [ 445200.999586171063129, 5539592.723418585956097 ], [ 445231.522646420635283, 5539643.228095235303044 ], [ 445242.813376576290466, 5539705.614845015108585 ], [ 445248.275041925662663, 5539718.838434093631804 ], [ 445268.984569646767341, 5539729.958597558550537 ], [ 445284.906069280114025, 5539741.65887629520148 ], [ 445287.1105668215896, 5539748.895724552683532 ], [ 445299.031883047602605, 5539768.781462080776691 ], [ 445293.948548850603402, 5539775.207394906319678 ], [ 445291.089586363639683, 5539790.817534318193793 ], [ 445291.199845499999356, 5539801.616813910193741 ], [ 445316.661098420619965, 5539860.847282757051289 ], [ 445322.399803986481857, 5539866.454435206949711 ], [ 445325.370311582111754, 5539879.171960248611867 ], [ 445331.110794812964741, 5539884.956136908382177 ], [ 445334.016251381894108, 5539891.300393846817315 ], [ 445336.762234806781635, 5539899.416795822791755 ], [ 445337.894217662455048, 5539905.956182369031012 ], [ 445336.399424291099422, 5539916.06339643150568 ], [ 445335.58042467024643, 5539922.799717777408659 ], [ 445335.266913022496738, 5539926.875102101825178 ], [ 445336.022168320720084, 5539931.293682500720024 ], [ 445336.047453389503062, 5539933.772142833098769 ], [ 445336.092605289362837, 5539938.197962020523846 ], [ 445334.151944904879201, 5539956.808096547611058 ], [ 445331.012491279689129, 5539962.328690385445952 ], [ 445328.577723154972773, 5539967.310939843766391 ], [ 445328.108371826121584, 5539973.51248128246516 ], [ 445328.169787649880163, 5539979.531550157815218 ], [ 445330.723763154936023, 5539986.23337815515697 ], [ 445332.390114112233277, 5539992.944255043752491 ], [ 445333.886162254028022, 5540000.365057868883014 ], [ 445329.531167244713288, 5540008.553743331693113 ], [ 445327.270332442945801, 5540013.180079243145883 ], [ 445326.291902678553015, 5540021.688392317853868 ], [ 445324.056367323268205, 5540028.793135127983987 ], [ 445323.251855076989159, 5540036.945553827099502 ], [ 445321.025363444117829, 5540044.93542399909347 ], [ 445317.437864738982171, 5540076.132328742183745 ], [ 445311.022741607623175, 5540108.597236700356007 ], [ 445306.809249913669191, 5540113.243428451009095 ], [ 445300.015305858221836, 5540160.76074368879199 ], [ 445268.57171350804856, 5540228.35810287296772 ], [ 445282.284620796737727, 5540284.694024560041726 ], [ 445281.613342906406615, 5540340.645162952132523 ], [ 445295.403198275016621, 5540421.941177251748741 ], [ 445332.558520154270809, 5540496.624330694787204 ], [ 445341.453186541679315, 5540507.38438611663878 ] ] } },
{ "type": "Feature", "properties": { "fid": 6.0, "o2 (in %)": 45.0, "no3 (mg\/l)": 6.0, "ph-wert": 5.5, "nh4 (mg\/l)": 0.05, "no2 (mg\/l)": 0.2, "scale": 10000 }, "geometry": { "type": "LineString", "coordinates": [ [ 445341.453186541679315, 5540507.38438611663878 ], [ 445419.193566703237593, 5540601.428475308232009 ], [ 445441.088759432721417, 5540624.750277404673398 ], [ 445474.881795341905672, 5540648.482032387517393 ], [ 445501.932314654462971, 5540655.110845257528126 ], [ 445532.249106257804669, 5540651.261959870345891 ], [ 445576.706219767220318, 5540623.901874651201069 ], [ 445607.16625931893941, 5540529.235568709671497 ], [ 445668.762797841627616, 5540546.313630769960582 ], [ 445803.587556450860575, 5540572.21062892396003 ], [ 445775.107296372181736, 5540669.864389293827116 ], [ 445787.768830923363566, 5540693.103710719384253 ], [ 445911.095938147744164, 5540741.070010594092309 ], [ 446142.088206757907756, 5540833.62669412791729 ], [ 446241.496983615506906, 5540904.498137251473963 ], [ 446380.038474728935398, 5541054.635208867490292 ], [ 446479.442260472569615, 5541161.264134122058749 ], [ 446471.1199163175188, 5541216.574111967347562 ], [ 446475.339375200448558, 5541248.039293149486184 ] ] } }
]

}

That's also the js code the style variable:

import {Stroke, Style} from 'ol/style'

var styles = {
    'MultiLineString': new Style({
        stroke: new Stroke({
          color: 'blue',
          width: 1,
        }),
      }),
}

I don't see where the problem is. Perhabs something with projections or how I get the GeoJSON?

I asked a similar question before but since the error message is another and I'm uploading my OpenLayers code I thought it would be better to ask a new Question.

1
  • 2
    Your geojsonObject is not a GeoJSON, it is the string 'C:/Users/user/Desktop/Gonsbach/Gonsbach.geojson'. You need read the file and use its content.
    – Mike
    Commented Nov 22, 2020 at 11:54

1 Answer 1

1

You cannot read files directly from the filesystem when you are working with the front end. In your case what you are passing to the new GeoJSON().readFeatures() function, is a string with the filepath. Try creating a file inside your project that exports the GeoJSON like so:

Lets call the file GeoJSON.js

export const geoJSON = {......};

Then just import it in the file you want to use it like so:

import {geoJSON} from 'relative/path/to/GeoJSON.js';

You can also verify what I'm saying by using a console.log(geojsonObject) to check the output. In order to access files in your file system you need a backend language or framework like NodeJS and it's fs module. Also, just to eliminate any possible issues, try replacing MultiLineString with LineString in your style because your geometries are LineStrings and those should match in order for OpenLayers to do the mapping. In your previous question, I was able to display the LineString but I had to zoom a lot because there are not enough coordinates in the GeoJSON to have a visible impact on the map. If initially you don't see the LineString try zooming a bit.

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.