[GIS] How to json_encode without those quotes for the coordinates in leaflet geojson polygon

geojsonleafletPHPpolygon

I have a field name: 'coordinates'
I have the coordinates stored in there: like this:
[[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]]

when I json_encode($geojson);

I get this output:

"coordinates": "[[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] "

notice the double quotes

it needs to be:

"coordinates": [[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]

How do I json_encode without those quotes for the coordinates?

Here is my full code. 

while ($row = mysql_fetch_assoc($rs)) {
    $properties = $row;
    $geometry = $row;
    # Remove fields
    unset($properties['coordinates']);
    unset($properties['type']);
    unset($geometry['unitID']);
    unset($geometry['milesSq']);
    unset($geometry['acres']);
    $feature = array(
        'type' => 'Feature',
        'properties' => $properties,
        'geometry' => array($geometry)        
    );
    # Add feature arrays to feature collection array
    array_push($geojson['features'], $feature);
}

echo json_encode($geojson);

results: 

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"unitID":"001","milesSq":"111.000000","acres":"222.000000"},"geometry":[{"type":"Polygon","coordinates":"[[[-109.048595341028587, 40.834756771179649], [-108.966734749488324, 40.562222787215255],  [-109.048595341028587, 40.834756771179649]]]"}]}]}

ON JS: 

$.ajax({
            type: "post", 
            url: "<?php echo $this->app_lib->FOLDER['admin'].$this->router->class ?>/buscador", 
            dataType: "json", 
            data: {clat:center.lat, clng:center.lng, zoom:zoo, minlat:min.lat, minlng:min.lng, maxlat:max.lat, maxlng:max.lng, layers:<?php echo json_encode($layers); ?>}, 
            success: function(result){
              //if (data.error) {
                //map.removeLayer(data.points); 
                $("#loader").hide()
                $.each(result, function(index, layer) {
                    if(layer.data.layer == 3){
                            $.each(layer.data.features, function(index, polygons) {
                                console.log(polygons.geometry.coordinates);
                                var poly = L.geoJson(campus, {
                                style: function (feature) {
                                    return feature.properties && feature.properties.style;
                                },
                                onEachFeature: onEachFeature,
                            });
                            map.addLayer(poly); 
});

Best Answer

In the javascript code the array is treated as a string so try to parse this sting as json before using , then assign the result to coordinates . So if your result in success function is result , parse its coordinates attribute before using it this is example how to do so :

      result = {
     "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
            "unitID": "001",
            "milesSq": "111.000000", "acres": "222.000000"
        },
        "geometry": [
            {
                "type": "Polygon",
                "coordinates": "[[[-109.048595341028587, 40.834756771179649], [-108.966734749488324, 40.562222787215255],  [-109.048595341028587, 40.834756771179649]]]"
            }
          ]
        }
       ]
     }


$.each(result.features, function (index, polygons) {
    $.each(polygons.geometry, function (index, geo) {
    console.log(geo.coordinates);
    var coordinates = JSON.parse(geo.coordinates);
    geo.coordinates = coordinates;


})
})


console.log(result)

  ///////  here u can start using the result object
  ///////   the leaflet code goes here

OR in the php code you can decode the stringified array before passing it like this :

 $geometry['coordinates']=json_decode($geometry['coordinates']);

Hope this helps.

Related Question