Coordinates in OpenLayers and JSON

Question

First, I'm Spanish so, sorry for my English.

I have a problem with the coordinates and the OpenLayers.

The problem is that the function called "mapa_tren" is working when I write the coordinates directly in the code, if I write this:

geometry: new ol.geom.Point(transformacion(-4.231575155, 43.308034436))

The map is showing properly, but if I write this:

geometry: new ol.geom.Point(transformacion(resp.long, resp.lat )),

The map is showing in the ocean.

I checked the json, I Checked the functions which is using the json and I dind't find anything wrong

Here is the code:

    function transformacion(lng, lat) {//Funcion para convertir las coordenadas
       return ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857');
    }   

function mapa_tren(resp) {// Funcion que contiene el código para mostrar el mapa

var capa1 = new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'sat'})
      });

 var capa2 = new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'hyb'})
      });


var iconFeature = new ol.Feature({ 
   geometry: new ol.geom.Point(transformacion(resp.long, resp.lat )),
   //geometry: new ol.geom.Point(transformacion(-4.231575155, 43.308034436)),
   name: 'Tren'
});


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: 'icono_localizacion.png'
    }))
});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
    features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
});


 var map = new ol.Map({
    target: document.getElementById('map'),
    layers: [capa1, capa2, vectorLayer],
    view: new ol.View({
      //center: ol.proj.transform([longitud, latitud ], 'EPSG:4326', 'EPSG:3857'),
      center: ol.proj.transform([-4.231575155, 43.308034436 ], 'EPSG:4326', 'EPSG:3857'),
      //center: [0,0],
      zoom: 7
    })
  });

}

function call_map(resp){
    mapa_tren(resp)
}


$.post('serv.php',{vble: 'real_sorpheo'}, function (json){ call_map(json) },"json")

Answer 1

As expressed under comments, I had the same problem: using numeric coordinates works, while placing the json content variable results in failure.

The solution is simple, all we need is a parseFloat done on json returns:

// add to map   
var mapItem = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(unit.longitude), parseFloat(unit.latitude)])),
        name: unit.devid,
        online: unit.online,
        outdoor: unit.outdoor,
        chart24h: "http://www.uradmonitor.com/data/0.1/charts/'+unit.devid+'.usvh.png"  
});
vectorSource.addFeature(mapItem);

This did the trick for me: