w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Using leaflets to load circle coordinates from a json file/Using data retrieved from a circle object

You're running into a Cross Domain Request issue when requesting the json from a remote server.

If you look at your debugging tools when you load your page (or the jsfiddle page) you'll see the No Access-Control-Allow-Origin error in your cosole.

One solution would be to set up a proxy server to get around this...but...

An easier solution would be to do the following:

  1. Copy the actual contents of the circle.json file you're trying to load,

  2. Paste that content into a local document on your file system

  3. Refer to the local file in your script tag

Note: If you'd like to learn more about the Cross Domain Request issue, google 'cross domain requests' or 'cors'. Or read this article on cross domain ajax requests or this wikipedia page on Same Origin Policy. Good times...

Just saw your edit to the question. Changing the extension from .json to .js won't solve the problem (the json won't be recognized as valid javascript unless you modify it somewhat (like assign it to a variable), at which point the D3 object will no longer be able to recognize it as json...).

Yet another solution would be to paste the json directly into your javascript...

Here's a working jsfiddle that does just that.

© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.