I am trying to get data from json with Leaflet. I am using Leaflet Data visualization framework. I want to use ajax, because in future I want to generate random numbers in my data properties (something like Math.random() in time intervals)
What I have already tried
I downloaded Leaflet-ajax plugin, included it in header. When i use something like that: new L.geoJSON.ajax I can't see any of my markers on map. I do not get any errors in this case.
Data, stored in data.js (this file is included in header):
var geojsonred = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "1",
"value": 20 //I want to replace this with Math.random()
},
"geometry": {
"type": "Point",
"coordinates": [315, -360]
}
},
{
"type": "Feature",
"properties": {
"name": "2",
"value": 50 //I want to replace this with Math.random()
},
"geometry": {
"type": "Point",
"coordinates": [360, -360]
}
}
]
}
This is how my script looks like:
var minHue = 120;
var maxHue = 0;
//var marker = new L.RadialMeterMarker(new L.LatLng(-360, 320), meterMarkerOptions);
var marker = new L.geoJSON(geojsonred, {
pointToLayer: function(feature, latlng) {
return new L.RadialMeterMarker(latlng, {
data: {
'Speed': feature.properties.value
},
chartOptions: {
'Speed': {
displayName: 'Speed',
displayText: function (value) {
return value.toFixed(1);
},
color: 'hsl(240,100%,55%)',
fillColor: 'hsl(240,80%,55%)',
maxValue: 200,
minValue: 0
}
},
displayOptions: {
'Speed': {
color: new L.HSLHueFunction(new L.Point(0,minHue), new L.Point(200,maxHue), {outputSaturation: '100%', outputLuminosity: '25%'}),
fillColor: new L.HSLHueFunction(new L.Point(0,minHue), new L.Point(200,maxHue), {outputSaturation: '100%', outputLuminosity: '50%'})
}
},
fillOpacity: 0.8,
opacity: 1,
weight: 0.5,
radius: 20,
barThickness: 15,
maxDegrees: 360,
rotation: 0,
numSegments: 10
});
},
});
marker.addTo(map);
Do someone have any idea?