8

My dataset is hosted on my dropbox account but not the Javascript files calling it. I am working with D3 and Polymaps to visualize the data, however I get an error saying - "XMLHttpRequest cannot load https://www.dropbox.com/s/89adzt973quosda/solaruse.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." (the link to the dropbox file works so you can have a look see)

Here is the code I used to load the JSON file (I am developing the site locally) I'm not exactly sure what to do from this point.

var po = org.polymaps;
        //Create map object, append to #map
        var map = po.map()
            .container(d3.select("#map").append("svg").node())
            .zoom(4)
            .add(po.interact());
        // Add the CloudMade image tiles as a base layer…
        map.add(po.image()
            .url(po.url("http://{S}tile.cloudmade.com"
            + "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
            + "/998/256/{Z}/{X}/{Y}.png")
            .hosts(["a.", "b.", "c.", ""])));
        // Add the compass control on top.
        map.add(po.compass()
            .pan("none"));
        // Add the custom locations/acres
        d3.json("https://www.dropbox.com/s/89adzt973quosda/solaruse.json", function(data){
            // Insert layer beneath the compass.
            var layer = d3.select("#map svg").insert("svg:g", ".compass");
            // Add an svg:g for each Name.
            var marker = layer.selectAll("g")
                .data(d3.entries(data))
                .enter().append("svg:g")
                .attr("transform", transform);
            // Adding the circles
            marker.append("svg:circle")
            //function scraping the acres from the dataset
            .attr()
        });
tijanicharles
  • 183
  • 3
  • 17
  • [This question](http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin) may help. – Lars Kotthoff Dec 03 '13 at 21:47
  • Attempted all the different solutions on there, none worked. I am considering loading it as a csv file and circumvent this issue all together. – tijanicharles Dec 03 '13 at 23:42
  • Solved the problem by simply migrating all my files on to my server and working from there. Thanks for the link to the other question. It made more sense after giving it a second look. – tijanicharles Dec 04 '13 at 04:53

1 Answers1

1

Problem

This is happening because Dropbox doesn't allow cross origin requests through their normal domain. See the MDN CORS docs for more info on cross origin requests.

Solution

You should be able to use the Dropbox HTTP api (specifically the get file resource). Or, you can use the Dropbox JS api if you want to use JS functions instead of http requests.

Or, as you have mentioned in the comments, you can simply avoid dropbox all together by hosting your own JS files

Jordan Shurmer
  • 946
  • 7
  • 21
  • I've contemplated Dropbox as a more than just a storage solution and this goes a long way towards making that a reality. Thanks for that answer, I wasn't aware how things had progressed since then. I'm giving the documentation a good read to see how I can leverage it for future projects. Much appreciated! – tijanicharles Apr 02 '18 at 15:05