openlayers 3 ol.proj.transform is converting dynamic geolocation points to zero

Question

I am trying to use an example from stackoverflow to insert dynamic data into map using openlayers 3.* . the problem is : the code is running OK when I insert the numbers direct to the statement like this:

 geometry: new ol.geom.Point(ol.proj.transform([-72.0704,46.678],'EPSG:4326','EPSG:3857')),

but when I tried to simulate json data as the following code: then some magic happened :

• When substituting only the longitude I got the marker on the right location,
• When substituting only the latitude then the latitude will be converted to zero,

• When substituting longitude and latitude, the marker will not show up.

  function AddMarkers() {
  var iconFeatures=[];
  data  = [{"longitude":"-72.0704","latitude":"46.678"},{"longitude":"-73.1234","latitude":"45.678"},{"longitude":"46.738586","latitude":"24.774265"}];
  
  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([data[0].longitude,46.678], 'EPSG:4326',     
    'EPSG:3857')),
    name: 'Null Island',
    population: 4000,
    rainfall: 500
  });
  
  var iconFeature1 = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([28.7753927 , data[1].latitude], 'EPSG:4326',     
    'EPSG:3857')),
    name: 'Null Island Two',
    population: 4001,
    rainfall: 501
  });
  var iconFeature2 = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([data[2].longitude,data[2].latitude], 'EPSG:4326',     
    'EPSG:3857')),
    name: 'Null Island Two',
    population: 4002,
    rainfall: 502
  });
  iconFeatures.push(iconFeature);
  iconFeatures.push(iconFeature1);
  iconFeatures.push(iconFeature2);
  
  var vectorSource = new ol.source.Vector({
    features: iconFeatures //add an array of features
  });
  
  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      opacity: 0.75,
      src: 'images/icon.png'
    }))
  });
  
  
  var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: iconStyle
  });
  
  return vectorLayer;
  

  }

So, why this magic happened only when using data from a json array, but is not happening when the numbers inserted directlty to the statement.

Answer 1

I am using php json encoding json_encode() and adding quotation marks to data , So Remove (trim) the quotation marks from the longitude and latitude values.