JavaScript googlemaps read coordinates from file - javascript

I want to display some markers using googlemaps. The information (coordinates) are stored in a local *.csv file (wich I want to use a "ressource-file").
How can I read this *.csv file? If I use "jQuery.get('myFile.csv', function (data) {..." it dosn't work.
The error message is: Cross origin requests are only supported for protocol schemes
Do I hava to make a file selection to read the file? Is there no other way?
Thanks

Is it possible that you are trying to load data from a file and not a running server(for example by double-clicking the .html from your file manager)?
If your are on the file:// protocol (which you can see in your url) this will not work. You could try changing to the development directory and runnig python3 -m http.server which will start a small development server. You can than change to http://localhost:8000 and see if it works.

Related

How to read KMLfile from local server for Openlayers "EarthQuakes in KML"?

I use the following EarthQuake map on my local server:
https://openlayers.org/en/v4.6.5/examples/kml-earthquakes.html
I have a standalone "map.html" for the map in my application in my "Views" folder.
Impementing this works ok, the map loads, and using the examples data:
url: 'https://openlayers.org/en/v4.6.5/examples/data/kml/2012_Earthquakes_Mag5.kml'
The data shows up in the map, all good so far
By going to this'data-url', a file is downloaded. So i download and edit this file with my own KML-datapoints. And then i place this file in the same folder as my "map.html" (The views folder).
I have tried to reference it manually by path, but got some CORS issues, then i sought out some xmlhttprequest, but not sure that is the right path since it's supposed to be a file (?) .....
So it all boils down to:
How do i reference my kml-file from within the script tags in the HTML-eartquake-file to this file in the same folder?
Update feb 2020:
I think now the CORS issue is removed. However, when i try to implement this it does not work:
If i use the Openlayer example link in the VectorSource - URL; https://openlayers.org/en/v4.6.5/examples/data/kml/2012_Earthquakes_Mag5.kml, my app downloads a file like this: "filename.kml"
If i use my own file on my server, i get a file like this "filename"
That is without the .kml extension.
The url looks like this in this case: https://myapp.net/mydata.kml
In express/nodejs i send the file like this:
router.get("/mydata", function (req, res) {
res.sendFile(path + "mydata.kml");
});
Here is a example from the Chrome download bar:
How can i send my file WITH extension? And will that solve my problem?
Thanks
If you are using IIS you need to go to the management panel and add .kml to the MIME types. If you are planning a lot a mapping applications adding .geojson (application/json) and .gml and .gpx (text/xml) might also be useful.
You will also need to enable cross origin access for your data folder

Javascript to read Text File to Array without a Webserver or external libraries local on Windows PC

I have an HTML file with JavaScript that I am running without any Webserver/host so I am just opening the file in a browser local to my windows PC. In that HTML file I would like to be able to read a text file in the same folder as the html file. That file will contain data in rows and columns separated with tabs. i.e
1 a
2 b
3 c
I want to keep this as simple as possible so all I have to do is share the HTML and Text file to others so the can open it up local to their computer without any webserver/host and without having to also copy of external libraries like node.js or jquery.
I have searched and tested everything I can find but either I need to reference an external library or I have to run it in a webserver or I need to click a button to load the file through the browser, none of what I want.
Does native JavaScript support the function to read a text file and save it to an array? If so, any code direction would be great.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
XMLHttpRequest() exists in native JavaScript, I think it will help you.
You also can send a request to the file. Or use library: axios.js because when you use XMLHttpRequest() you lose many time to write code which just get content from file, with axios I got file content with one line: `axios.get('file.txt').then(result => console.log(result.data));
To connect Axios: <script src="https://unpkg.com/axios#0.18.0/dist/axios.min.js"></script>
You can read official documentation about axios.js and XMLHttpRequest() in the net.

How can i read local file from D drive in javascript

My requirement is to read the json file which contains some data and store in some other .js file.
I got task to read local file from local disk in Javascript , i have used file path like - D:\json\analytics.json.
(document).ready(){
($).getData("D:\json\analytics.json");
}
when i see in firebug it takes other url.
How I can do it, is it possible to read file from javascript.
I don't know javascript , i have seen some answer but i am not able to understand .
Need Solution , how I can achieve it. is there any other way to read file on jsp without using scriptlet . From server side , can send it on the jsp page.
I think Jaronmanda's answer won't work cause it will hit cross origin issue, see "Cross origin requests are only supported for HTTP." error when loading a local file.
As the page suggested, in general you need to serve that json file from a web service (same domain, or allow your domain to access), but it depends on what you really need to do. If you can control where that json file is stored, the easier way is to put that in a subdirectory of your html file, and do:
$(document).ready(function () {
$.get('<directory>/analytics.json', function (data) {
// Do your stuff
});
});

External URL linking

I have the following code:
<script>
var fileContent;
$.ajax({
url : "text.txt",
dataType: "text",
...
It loads the text from a .txt file in order to obtain the data. If the text.txt is on the same path as the html code, it loads the data. However, if I type for example (placing the file in a different folder):
url: "../../../files/text.txt"
It does not allow me to obtain the file. Any ideas of how to do it or how to implement it without changing the code in a significant way? Thanks!
There are three possible causes of this:
You are using HTTP
You are using HTTP and the path you are trying to access is not exposed by your web server. (You cannot access files above the directory root by default).
You need to give the file a URL on your web server and request that URL.
You are using local files
Different browsers have different security restrictions for Ajax on local files.
You can get this problem if the file is in a directory above the HTML document (some browsers only allow you to access files in the same or a lower directory).
You can resolve this by using HTTP. Ajax in general works very poorly without HTTP.
You simply have the URL wrong
Correct the URL.

Xml to js code problem

So i'm very new to xml to javascript so i thought I would learn from w3schools, but this site
http://www.w3schools.com/xml/xml_to_html.asp shows an example that I can't mimic locally. I copy/pasted the .js and downloaded the xml but I just get a blank screen!
It's working in there try it yourself but not for me? Do I need it on a server or something?
Yes, that code retrieves the XML data from a web server using AJAX. Since you don't have a server running locally, you can change the URL to point directly to the w3school's version:
xmlhttp.open("GET","http://www.w3schools.com/xml/cd_catalog.xml",false);
Alternatively, play around on their online version ;)
well i guess you have to add the example xml (cd_catalog.xml) to your file system. and you definitively have to access the html file on a server (apache i.e.)
First, ensure that both HTML file (with the Javascript block in it) and XML file are placed in the same directory.
Next, you probably need to place those files under your local web-server and open the HTML like this:
http://[local server host]/ajax.html
instead of opening the file directly from e.g. Windows Explorer:
C:\[path to the file]\ajax.html
For the latter case you'll get an "Access is denied" error.
-- Pavel
Are you running this under a web server or just creating a couple of text files and loading them in your browser?
The "GET" request this relies upon could possibly be failing.
Use Apache or another similar HTTP server and run the example as if it were hosted on the web.

Categories

Resources