CODEWITHSUNDEEP
jqueryworld-map
Meg Lepett
Meg Lepett

Reputation: 71

Jvectormap markers from json

$(function(){
$.getJSON('data.json', function(data){
new jvm.WorldMap({
map: 'world_mill_en',
container: $('#map'),
markers: [
  {latLng: [47.5, 19.0833], name: '1'},
  {latLng: [51.5170, -0.1050], name: '2'}
],
//markers : data.results,
});
});
});

The code works, but when loading from JSON nothing happens. I assume my JSON format is not right. How to correct my data.json?

{["latLng":[47.5,19.0833], "name": "1"},{latLng: [51.5170, -0.1050], name: "2"}]}

Upvotes: 1

Views: 1679

Answers (2)

HardikT
HardikT

Reputation: 751

So this is the answer for those who came to this question searching for a proper answer-

This should be the code inside <script> tag:

$(function(){
    $.getJSON('data.json', function (data) {
      $('#world-map').vectorMap({
        map: 'world_merc',
        hoverOpacity: 0.7,
        hoverColor: false,
        backgroundColor: '#ddd',
        markerStyle: {
            initial: {  
                stroke: null
            }
        },
        markers: data       // --- The data from the JSON file will be given here
        })
      }); 
    });

The JSON file is as below: 

[
    {
        "latLng": [-36.85, 174.78],
        "name": "Singapore",
        "style": {"fill": "green"}
    },
    {
        "latLng": [-36.85, 174.78],
        "name": "Brazilia",
        "style": {"fill": "green"}
    },
    {
        "latLng": [-36.85, 174.78],
        "name": "Rio De Janeiro",
        "style": {"fill": "green"}
    }
]

(PS: The style line in JSON file is for another function.)

Hope its helpful, cheers!

Upvotes: 4

Ravi K Thapliyal
Ravi K Thapliyal

Reputation: 51711

Quotes are missing around your second Array object elements.

{["latLng":[47.5,19.0833], "name": "1"},{latLng: [51.5170, -0.1050], name: "2"}]}

It should be

{["latLng":[47.5,19.0833],"name":"1"},{"latLng":[51.5170,-0.1050],"name":"2"}]}

Upvotes: 0

Related Questions