Leaflet Map JS console issues after view-source copying - javascript

I have a problem with using the Leaflet JS map when copying code from view-source:
According to my previous question:
Leaflet Map code copied from View-source: not working
It looks like I require a web server,
Unfortunately It is not working in Localhost too.
After using the javascript code from the web I always get a lot of issues in my console.
I copy deliberately each single line of the code, taking into account any links. Now I don't understand where the problem lies.
In the web server someone's code looks clear and console is clear.
like here:
https://harrywood.co.uk/maps/examples/leaflet/kml.html
Once I copy all stuff on my drive and put it into the Wampp localhost I got a lot of errors in my console as per in the picture below:
Access to XMLHttpRequest at 'file:///U:/Work/Leaflet/KML/LotA.kml'
from origin 'null' has been blocked by CORS policy: Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https. KML.js:31 GET
file:///U:/Work/Leaflet/KML/LotA.kml net::ERR_FAILED
The code KML.js works on the web server and it's exactly the same as in my file!
Could you clarify for me please? Can I rut it on the localhost?
Do you know how to copy the code correctly? What stuff I have forgotten?

You need to download the KML file from your console's network tab, store it locally and then copy paste the client side code.
Note that this example is using a really old version of leaflet, 0.7.x
You can see the example in the following Demo
Edit:
I checked it locally and you are right regarding the previous library.
I made a plunker that seems to work locally using leaflet omnivore library to visualize a kml. I ran it with npm's serve and seems be working.
var runLayer = omnivore.kml('test.kml').addTo(map).on('ready', function () {
map.fitBounds(runLayer.getBounds());
});
Alternate demo

Related

graph editor doesnt open in locally in the browser

I am trying to run graph editor example in mxgraph. But i am unable to run it locally on my system.
It gives the error msg of unable to load the resource.
it says that it is blocked by cors.. i have disable XMLHTTP support in the browser but still same error. i am using it for development processes so want to run it locally.
i expected to run the graph editor locally on my machine. but getting error of unable to load the resources.
the error msg is as follows:
Access to XMLHttpRequest at 'file:///C:/Users/USER/Desktop/projects%20bpmn/mxgraph-master/javascript/examples/grapheditor/www/resources/grapheditor.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
If you use Chrome you could disable web security which would allows you to do XHR locally (Check this out).
However... I tried that and it didn't work with grapheditor, I imagine it has to do with the responses you get when reading from the filesystem using file:///, I'm guessing you don't get 200 and other responses). Also disabling Chrome security is, well... insecure; so I wouldn't recommend that as a go to alternative.
From what I've tried you can go with two alternatives:
Have your own webserver running somewhere, add grapheditor to some path inside you webserver and access grapheditor that way. There's a disadvantage in running it this way, you don't get all the functionalities because you need some back-end to process stuff and you would have to have one (or create one).
(I assume you know your way around in a Command Line and that you have java installed) Use the included Java webserver. To run it, download Ant. Then inside the java dir of mxgraph run ant grapheditor. The java dir is: mxgraph/java , you will find a build.xml file inside.
I am currently doing some experimentation using the second alternative and it's working ok. I would definitely spend some time on option 2 so you can have grapheditor running smoothly.
Hope this helps...

Issue with Youtube Data API integration

I wanted to integrate the Youtube Data API in my application. For the same reason, with reference to the following link,
https://github.com/youtube/api-samples and create my client id and tried running the code.
I am working with Javascript + HTML. While running the code I am getting the following error.
Load denied by X-Frame-Options: https://accounts.google.com/o/oauth2/auth?client_id=AIzaSyARXJSURlAnAm48f3uXok0rB7GrEGb3pLc&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube&immediate=true&include_granted_scopes=true&proxy=oauth2relay311121687&redirect_uri=postmessage&origin=http%3A%2F%2Flocalhost%3A8080&response_type=token&state=475509781%7C0.2158929842&authuser=0 does not permit cross-origin framing.
Can anyone suggest me what went wrong and how can I fix the same.
Try to break down your requested URL to the minimum. Maybe there is one GET that conflicts with other configs.

How to scrape websites from within browser?

I would like to scrape a website by just running code in a browser. In this case, the scraper has to run on a specific machine, and I cannot install any software on that machine. However, there is already a browser installed (recent version of Firefox), and I can configure the browser however I want.
What I would like is a javascript solution for scraping, contained in a webpage on site A, that can scrape site B. It seems like this would run into some CORS-type problems; I assume that part of the solution is to disable any cross-origin checks in the browser.
What I have tried so far: I looked up "web scraping in javascript", this brings up a lot of stuff intended to run in nodejs with cheerio for example this tutorial, and also stuff like pjscrape which requires PhantomJS. However, I couldn't find anything equivalent that is intended to run in a browser.
P.S. This is interesting: Firefox setting to enable cross domain ajax request Apparently Chrome --disable-web-security takes care of the cross-origin/cross-domain issues. Firefox equivalent?
P.S. Looks like ForceCORS extension to Firefox is also useful: http://www-jo.se/f.pfleger/forcecors I'm not sure if I'll be able to install that though.
P.S. This is a nice collection of ways to allow cross-domain in different browsers: http://romkey.com/2011/04/23/getting-around-same-origin-policy-in-web-browsers/ Sadly, the suggested Firefox solution doesn't work in versions >=5.
edit: looks like import.io service shut down and the url points to something completely different now. consider this answer obsolete.
try to do it with import.io: ( basically a scraping service with REST API)
as soon as i have a example javascript call to the API i can provide it. Or you check the docs yourself.
Import.io allows you to structure the data you find on webpages into rows and columns, using simple point and click technology.
First you locate your data: navigate to a website using our browser (download it from us here: http://import.io).
Then, enter our dedicated data extraction workflow by clicking the pink IO button in the top right of the Browser.
We will guide you through structuring the data on the page. You teach import.io how to extract the data by showing us examples of where the data is. We create learning algorithms that generalize from these examples to work out how to get all the data on the website.
The data you collect is stored on our cloud servers to be downloaded and shared. And every time you publish to our platform we create an API to get the data programatically so you can easily integrate live web data into your applications or third party analytics and visualization software.
EDIT:
If the data recognition works in the browser you can simply access the data by heading to "simple API integration" and Copy the url
the url u can paste here:
function reqListener () {
console.log(JSON.parse(this.responseText));
return JSON.parse(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "yourUrlFromClipboardComesHere", true);
oReq.send();
xhr request source

Sourcemap in jQuery 1.10.0 causes insecure content when loaded over HTTPS

i have a small problem by using HTTPS. By using SSL in my Rails-Application Chrome shows me the following error-message:
The page at 'https://www.thesitename.de/shop/counter/checkout/cart' was loaded over HTTPS, but displayed insecure content from 'http://www.thesitename.de/assets/jquery-1.10.0.min.map': this content should also be loaded over HTTPS.
Does that mean that the jquery-file is not loaded via HTTPS or that some requests in the jquery-script are over HTTP? In the sourcecode of the Site i don't see any HTTP-Javascript-includes. The jquery-File is local stored.
I hope this is enough information and someone can help me.
Thanks!
The file being requested forms the sourcemap for jQuery. This can be used by some browsers to help with debugging.
It's referenced in the download documentation here: http://jquery.com/download/
When looking at the problem elsewhere on stackoverflow I came across this:
sourceMappingURL from jquery generates 404 error in apache
There may be useful info in there.
My advice would be to try the following:
Remove the line from your jQuery library (this means that you won't have access to the sourcemap when you're debugging - which may not be a problem for you)
Use a CDN to source your jQuery libraries instead - both jQuery and Google have ones.
Try downloading a local copy of jquery-1.10.0.min.map beside your version of the jQuery distribution.
Hopefully one of the above should resolve your issue.

Google Maps Remote .js and Access-Control-Allow-Origin

I wrote a Google Maps API wrapper in JS, did some local tests with static html, and everything worked just fine. Then I loaded the files into a local web server running in localhost:8080, tested the map panels, and once again, everything worked just fine.
Then a week went by, I added a map to a page, and I couldn't get it to load. Nothing has changed (that I know of anyway, obviously something has), and static tests continue to work just fine, but when I try to load the API from the server I get this in the debug console:
XMLHttpRequest cannot load http://maps.google.com/maps/api/js?sensor=false.
Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
I read a bit around, but I still can't understand the error, much less fix it. Can someone please give me a hand?
edit: I use a simple tag to load google's js. No jQuery, no nothing.
Thanks in advance!
#Santiago hopefully I can help you now :) The error you are receiving is due to Google's prohibiting of cross site scripting. You can find the info here: Google which also references:Wikipedia Article
It looks like you'll need to create a proxy service for your client on your public facing webserver. Since the request comes from your public webserver and the reply goes back to your webserver it will meet the same domain requirements that Google requires. I do not know enough python yet to create a pythonic cgi proxy but I have to think that there are many different solutions out there already. Plus you will be limited by your server as to what type of solution you employ.
HTH!
~MWR

Categories

Resources