0

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 Nov 15 '18 at 20:12
  • Tried, it ends with the same error data.data.forEach – guzior Nov 15 '18 at 20:15
  • 1
    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 Nov 15 '18 at 20:55
  • Nice , thank you very much :), one last thing, nie to add some kind it background to the test? – guzior Nov 16 '18 at 11:24
  • text* , that automatic corrections on android :) – guzior Nov 16 '18 at 14:43
0

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
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.