How do I use Data Loader with a map?

  • Resolved rando73

    (@rando73)


    9 years, 8 months ago

    I’m trying to use the data loader plugin with a map.
    I’ve looked at this page: https://www.amcharts.com/tutorials/using-data-loader-plugin/
    But I can’t figure out where the code has to go for a map.

    I added the url to ‘Ressources’:
    https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js

    Then I added the following code to ‘JavaScript’:

    var %CHART% = AmCharts.makeChart("%CHART%", {
	"type": "map",
    "theme": "light",
    "pathToImages": "https://www.amcharts.com/lib/3/images/",
"dataLoader": {
      "url": "https://www.lingbot.me/wp-content/uploads/2015/07/tal-map.csv"
      "format": "csv",
      "delimiter": ",",       // column separator
      "useColumnNames": true, // use first row for column names
      "skip": 1               // skip header row
	},
	"areasSettings": {
		"autoZoom": true,
		"selectedColor": "#CC0000"
	},
	"smallMap": {}
});

    But that doesn’t work. Should I put dataLoader somewhere else?

    https://www.ads-software.com/plugins/amcharts-charts-and-maps/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author martynasma

    (@martynasma)

    I don’t think CSV format will work for you. The data should contain the map property at the very least. Yours contains a list of coordinates.

    So, unless you want to use postProcess with a custom function that parses your array of coordinates and produces proper dataProvider, I suggest you use JSON format.

    I.e.:

    {
  "map": "worldLow",
  "images": [{
    "type": "circle",
    "latitude": 48.692846,
    "longitude": 6.168337,
    "title: "Université de Lorraine",
    "url": "https://tal.loria.fr/talmaster/",
    "description": "Master Sciences de la Cognition et Applications (SCA)"
  }, {
    "type": "circle",
    "latitude": 48.839766,
    "longitude": 2.353731,
    "title: "Université Sorbonne Nouvelle – Paris 3e",
    "url": "https://www.univ-paris3.fr/master-1-traitement-automatique-des-langues--25429.kjsp",
    "description": "Master spécialité Ingénierie Linguistique"
  }]
}

    Does that make sense?

    Thread Starter rando73

    (@rando73)

    Thanks for your reply! I’ve tried what I did before but this time with JSON, except it’s not working either. The page only displays “Loading data…” and nothing happens. Is there something wrong with the way I’m calling the data in my code?

    var %CHART% = AmCharts.makeChart("%CHART%", {
	"type": "map",
    "theme": "light",
    "pathToImages": "https://www.amcharts.com/lib/3/images/",

    "dataLoader": {
      "url": "https://www.lingbot.me/data/data.json",
      "format":"json"
      "showErrors": true
	              },

	"areasSettings": {
		"autoZoom": true,
		"selectedColor": "#CC0000"
	},
	"smallMap": {}
});
    Plugin Author martynasma

    (@martynasma)

    The code for chart as well as JSON data looks good/

    Is the page displaying the map located on the https://www.lingbot.me/ domain as well? If it’s not, you might have a cross-domain-origin issue.

    You can check the browser’s console. If this is the case, you will get an error there.

    Thread Starter rando73

    (@rando73)

    So I checked the browser’s console, and it turns out there was a cross-domain-origin issue. Which was quite confusing, because the JSON file is on the same domain as my website. But after looking around I finally figured out what the problem was: apparently “https://example.com” and “https://www.example.com” are not considered to be the same domain.
    So I went to Dashboard > Settings > General Settings and modified both the “WordPress Address” and the “Site Address” fields so that they include WWW. And now it’s solved! Thanks for all your help! ??

    Plugin Author martynasma

    (@martynasma)

    Great. Glad we were able to solve this ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How do I use Data Loader with a map?’ is closed to new replies.

Tags