Getting data from JSON data API?

Question

As asked in previous question: Displaying icon name next to icon using OpenLayers? , now I need to change data source to the JSON API data, and used jquery plugin bypass CORS (http://www.ajax-cross-origin.com/install.html). The code part i changed from previous question jsfiddle:

var apiURL = 'https://map.navifleet.pl/api.php?api_key=[api-key]&type=1';

$.ajaxSetup({
    crossOrigin: true,
    proxy: 'proxy.php'
});

$.getJSON(apiURL, null, function(data){
        console.log(data);
    console.log(JSON.stringify(data));
  var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
  data.forEach(function(item) {
     console.log(item);
     console.log(JSON.stringify(item));
    var feature = new ol.Feature(item);
    feature.set('name', item.name);
    var coordinate = transform([parseFloat(item.lon), parseFloat(item.lat)]);
    var geometry = new ol.geom.Point(coordinate);
    feature.setGeometry(geometry);
    mapSource.addFeature(feature);
  });
});

The code returns Uncaught TypeError: data.forEach is not a function.
Updated code: code

Example JSON Data from API:

{
    "success": true,
    "data": [{
        "device": {
            "id": 1555,
            "name": "Iveco Daily 2015",
            "icon_color": "009900",
            "mark": "IVECO",
            "model": "DAILY",
            "license": "K1 NAVI",
            "mileage": 20966.707
        },
        "data": [{
            "gps_timestamp": 1542282655,
            "lon": 18.5842,
            "lat": 49.7232,
            "speed": 101,
            "direction": 239,
            "distance": 0.8741,
            "total_distance": 199918
        }]
    }, {
        "device": {
            "id": 7102,
            "name": "Iveco Daily 2018",
            "icon_color": "1873BA",
            "mark": "Iveco",
            "model": "Daily",
            "license": "",
            "mileage": 0
        },
        "data": [{
            "gps_timestamp": 1541508344,
            "lon": 20.0676,
            "lat": 50.0865,
            "speed": 0,
            "direction": 258,
            "distance": 0,
            "total_distance": 322.622
        }]
    }]
}

You console log of data shows it comprises a success boolean followed by a data array {"success":true,"data":[{ so you will need to use data.data.forEach() — Mike
– Mike, Commented Nov 15, 2018 at 20:12
data is being returned as a string, that's why you see \" in the log when you stringify it. So you will need JSON.parse(data).data.forEach() — Mike
– Mike, Commented Nov 15, 2018 at 20:55
Nice , thank you very much :), one last thing, nie to add some kind it background to the test? — guzior
– guzior, Commented Nov 16, 2018 at 11:24

Mike · Accepted Answer · 2018-12-28 12:21:45Z

You could cluster if you want, you would need to create a cluster source to use your original source and make that the source for your layer. The style function would need to style a cluster if there was more than one feature in the cluster, otherwise if could style the only feature in a cluster as a feature.

var mapSource = new ol.source.Vector();
var mapCluster = new ol.source.Cluster({
  source: mapSource,
  distance: 20
});

function mapStyle(cluster) {
  var style;
  var features = cluster.get('features');
  var size = features.length;
  if (size > 1) {
    style = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        stroke: new ol.style.Stroke({
          color: '#fff'
        }),
        fill: new ol.style.Fill({
          color: '#3399CC'
            })
      }),
      text: new ol.style.Text({
        text: size.toString(),
        fill: new ol.style.Fill({
          color: '#fff'
        })
      })
    });
  } else {
    var feature = features[0];
    style = new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'http://guzior.fastwww.pl/car.png'
      }),
      text: new ol.style.Text({
        text: feature.get('name'),
        offsetY: -30,
        offsetX: 60,
        fill: new ol.style.Fill({color: 'rgba(0, 0, 0, 1)'}),
        backgroundFill: new ol.style.Fill({  color: 'rgba(255, 255, 255, 0.9)'  }),
        backgroundStroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.5)'}),
        padding: [3, 5, 3, 5]
      })
    });
  }
  return [style];
}

var mapLayer = new ol.layer.Vector({
  source: mapCluster,
  style: mapStyle
});

Stack Exchange Network

Getting data from JSON data API?

1 Answer 1

Your Answer

Hot Network Questions

Getting data from JSON data API?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions