publicar en #facebook desde #php con su #api #sdk #blablabla by @Minipunk

fuente: http://el-internauta-de-leon.blogspot.com.es/2012/12/como-publicar-en-facebook-como-pagina.html

buenas

despues de dos dias (y no es broma) de sangrar por los ojos y repetir muchas veces los mismos insultos he logrado que esta basura funcione

que bonito el SDK de facebook, ayuda un monton … una mierda muy gorda pa ellos

al final conssegui hacerlo funcionar seguramente no de manera muy limpia ni razonable pero me suda todo el ciruelo, funciona y punto

el articulo que me ha hecho ver la luz es del año 2012, se supone que es la version anterior de la API de facebook pero funciona asi que ya no quiero saber absolutamente nada mas … que el dia de mañana los hipsters de facebook tumban esta version y deja de funcionar? pues ya me buscare la vida pero de momento salgo al paso y no pierdo mas el tiempo con esto

bueno no me enrollo mas, vamos al lio

este es el codigo:

<?php require_once 'src/facebook.php'; //Esto llama a la carpeta con el parse que nos descargamos antes $app_id = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Sustituimos las X por el ID de nuestra aplicación $app_secret = 'xxxxxxxxxxxxxxxxxxxxxxxx'; // Sustituimos las X por el Secret de nuestra aplicación $token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // ponemos nuestro token $facebook = new Facebook(array( 'appId' => $app_id,
    'secret' => $app_secret,
    'cookie' => false
));
$req =  array(
    'access_token' => $token,
    'message' => 'Mensaje de prueba con mi aplicación');

$res = $facebook->api('/me/feed', 'POST', $req);

?>

biblioteca facebook-PHP-SDK de https://github.com/facebook/facebook-php-sdk
necesitamos la app-id la secret no se que y el token, en https://developers.facebook.com creamos una nueva aplicacion y nos genera los dos primeros datos necesarios, teneis un tutorial cojonudo aqui (fuente original aqui)

como esta api ta desfasada antes en developers nos daban el token pero ahora como van de guays (bueno sera por temas de seguridad pero que me la coman) no nos la dan, entos pa obtener un token que nunca expira seguir instrucciones de este otro post (original aqui)

me da vueltas todo creo que no me dejo nada … voy a echar un pitu, espero a ver servido de ayuda a alguien. A una persona se que la ayudare en el futuro … a mi cuando tenga que volver a implementar esto y no me acuerde de nada xDD

publicar-en-facebook-desde-php-con-su-api-sdk-blablabla-by-minipunk-coudlain

#PHP + #TWITTER: CÓMO PUBLICAR #TWEETS by @GeekyTheory

Fuente: https://geekytheory.com/php-twitter-como-enviar-tweets-desde-php/

ACTUALIZADO: subir imagenes en post a twitter, este articulo solo funciona conpublicar texto!!

Hola a todos, debido a la gran acogida que ha tenido el post Cómo usar la API de twitter en PHP he decidido hacer una serie de tutoriales sobre la API de twitter. En un principio no voy a numerar los tutoriales, porque no tengo un plan establecido, escribiré los tutoriales según se me ocurran.

En este tutorial vamos a aprender cómo enviar tweets desde PHP de una manera fácil. Para realizar esta tarea vamos a usar la librería  TwitterAPIExchange. Esta librería contiene todas las funciones necesarias para conectar la API con los credenciales del usuario. y obtener de una manera fácil los datos que queramos.

Antes de entrar en detalle hay que indicar que si queremos enviar tweets desde nuestra aplicación. Tenemos que indicar en la configuración de la aplicación que creamos en twitter que nuestra aplicación tiene acceso de escritura y lectura. Para ello cambiamos los permisos de escritura desde el siguiente enlace Twitter APPs.

Una vez que le hemos dado permisos de escritura a nuestra aplicación vamos a comenzar con el contenido del tutorial. Vamos a crear una función en PHP que tenga como argumento de entrada el mensaje que queremos enviar desde nuestra cuenta personal de twitter, es decir desde la cuenta que ha creado la aplicación de twitter.

Si todo ha salido bien, esta función devuelve un JSON con el estado del tweet que se acabamos de enviar. Por lo tanto, vamos a usar esta información y mostrarla en pantalla.

Captura2Finalmente, indicar que el uso de la API de twitter tiene unas cuantas limitaciones respecto al envío de tweets.

PODÉIS DESCARGAR EL CÓDIGO EN EL SIGUIENTE REPOSITORIO DE GITHUB.

github-logo

Y esto es todo, espero que os haya gustado el tutorial. Saludos @alex_esquiva.

#php vs API 3 de #youtube para subir video desde tu site

fuente: https://developers.google.com/youtube/v3/code_samples/php#resumable_uploads

con este codigo podremos subir un video en nuestro server a la cuenta de youtube desde nuestro site php

necesitaremos previamente obtener nuestras claves de OAuth 2.0 en https://console.developers.google.com creando un proyecto nuevo basado en youtube

$OAUTH2_CLIENT_ID = 'REPLACE_ME';
$OAUTH2_CLIENT_SECRET = 'REPLACE_ME';

y autorizando en el formulario la url de nuestro servidor desde donde se van a recibir los videos
<?php

// Call set_include_path() as needed to point to your client library.
require_once 'Google/Client.php';
require_once 'Google/Service/YouTube.php';
session_start();

/*
 * You can acquire an OAuth 2.0 client ID and client secret from the
 * Google Developers Console <https://console.developers.google.com/>
 * For more information about using OAuth 2.0 to access Google APIs, please see:
 * <https://developers.google.com/youtube/v3/guides/authentication>
 * Please ensure that you have enabled the YouTube Data API for your project.
 */
$OAUTH2_CLIENT_ID = 'REPLACE_ME';
$OAUTH2_CLIENT_SECRET = 'REPLACE_ME';

$client = new Google_Client();
$client->setClientId($OAUTH2_CLIENT_ID);
$client->setClientSecret($OAUTH2_CLIENT_SECRET);
$client->setScopes('https://www.googleapis.com/auth/youtube');
$redirect = filter_var('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'],
    FILTER_SANITIZE_URL);
$client->setRedirectUri($redirect);

// Define an object that will be used to make all API requests.
$youtube = new Google_Service_YouTube($client);

if (isset($_GET['code'])) {
  if (strval($_SESSION['state']) !== strval($_GET['state'])) {
    die('The session state did not match.');
  }

  $client->authenticate($_GET['code']);
  $_SESSION['token'] = $client->getAccessToken();
  header('Location: ' . $redirect);
}

if (isset($_SESSION['token'])) {
  $client->setAccessToken($_SESSION['token']);
}

// Check to ensure that the access token was successfully acquired.
if ($client->getAccessToken()) {
  try{
    // REPLACE this value with the path to the file you are uploading.
    $videoPath = "/path/to/file.mp4";

    // Create a snippet with title, description, tags and category ID
    // Create an asset resource and set its snippet metadata and type.
    // This example sets the video's title, description, keyword tags, and
    // video category.
    $snippet = new Google_Service_YouTube_VideoSnippet();
    $snippet->setTitle("Test title");
    $snippet->setDescription("Test description");
    $snippet->setTags(array("tag1", "tag2"));

    // Numeric video category. See
    // https://developers.google.com/youtube/v3/docs/videoCategories/list 
    $snippet->setCategoryId("22");

    // Set the video's status to "public". Valid statuses are "public",
    // "private" and "unlisted".
    $status = new Google_Service_YouTube_VideoStatus();
    $status->privacyStatus = "public";

    // Associate the snippet and status objects with a new video resource.
    $video = new Google_Service_YouTube_Video();
    $video->setSnippet($snippet);
    $video->setStatus($status);

    // Specify the size of each chunk of data, in bytes. Set a higher value for
    // reliable connection as fewer chunks lead to faster uploads. Set a lower
    // value for better recovery on less reliable connections.
    $chunkSizeBytes = 1 * 1024 * 1024;

    // Setting the defer flag to true tells the client to return a request which can be called
    // with ->execute(); instead of making the API call immediately.
    $client->setDefer(true);

    // Create a request for the API's videos.insert method to create and upload the video.
    $insertRequest = $youtube->videos->insert("status,snippet", $video);

    // Create a MediaFileUpload object for resumable uploads.
    $media = new Google_Http_MediaFileUpload(
        $client,
        $insertRequest,
        'video/*',
        null,
        true,
        $chunkSizeBytes
    );
    $media->setFileSize(filesize($videoPath));


    // Read the media file and upload it chunk by chunk.
    $status = false;
    $handle = fopen($videoPath, "rb");
    while (!$status && !feof($handle)) {
      $chunk = fread($handle, $chunkSizeBytes);
      $status = $media->nextChunk($chunk);
    }

    fclose($handle);

    // If you want to make other calls after the file upload, set setDefer back to false
    $client->setDefer(false);


    $htmlBody .= "<h3>Video Uploaded</h3><ul>";
    $htmlBody .= sprintf('<li>%s (%s)</li>',
        $status['snippet']['title'],
        $status['id']);

    $htmlBody .= '</ul>';

  } catch (Google_ServiceException $e) {
    $htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',
        htmlspecialchars($e->getMessage()));
  } catch (Google_Exception $e) {
    $htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',
        htmlspecialchars($e->getMessage()));
  }

  $_SESSION['token'] = $client->getAccessToken();
} else {
  // If the user hasn't authorized the app, initiate the OAuth flow
  $state = mt_rand();
  $client->setState($state);
  $_SESSION['state'] = $state;

  $authUrl = $client->createAuthUrl();
  $htmlBody = <<<END
  <h3>Authorization Required</h3>
  <p>You need to <a href="$authUrl">authorize access</a> before proceeding.<p>
END;
}
?>

<!doctype html>
<html>
<head>
<title>Video Uploaded</title>
</head>
<body>
  <?=$htmlBody?>
</body>
</html>

#php obtener coordenadas introduciendo direccion en google map api v3 by @miguelperezsubi

Fuente: miguelperezsubias.aui.es

Ejemplos de uso Google Maps V3

Cada vez son más las aplicaciones que requieren utilizar funciones relacionadas con la geolocalización bien para posicionar un punto o una dirección en un mapa o bien para obtener sus coordenadas, calcular distancias, dibujar caminos, …..

Google acaba de lanzar la V3 de su API (Application Interface) que facilita, a través de su librería en javascript, la integración de mapas en páginas web, API que esta bien documentada en su web oficial donde también encontraras una buena batería de ejemplos que pueden ayudarte a entender las funciones básicas.

Me he propuesto aprender más sobre como utilizar la V3 de Google Maps y para ello he desarrollado y documentado estos ejemplos prácticos:

  • Posicionar un marcador en el mapa por coordenadas, dirección y obtener estos datos si lo sitúo en un punto diferente del mapa.
  • Dibujar una polilínea (polyline), escribir etiquetas y personalizar los iconos de los marcadores
POSICIONAR UN MARCADOR EN EL MAPA

Es habitual necesitar las coordenadas de un punto (longitud, latitud, dirección postal) en un mapa bien porque queremos localizarlo el punto en el mapa a partir de su dirección o coordenadas o lo contrario obtener los datos de un punto, coordenadas y direccion, que situó en el mapa.

El primer ejemplo se ocupa de esto, le he dado el nombre de mapas_marcador.php

Ver demo -//- Ver código fuenteParámetros de llamada

En la llamada se le pueden pasar opcionalmente hasta cuatro parámetros en la llamada que nos van a permitir:

Situar el marcador en el mapa. Admite dos posibilidades:

a) lat, lon: darle las coordenadas latitud y longitud

b) dir: darle la dirección (codificada con urlencode)

Si se especifican ambos, la dirección prevalece sobre las coordenadas.

Especificar el zoom y el tipo de mapa:

c) zoom: nivel de zoom (1,19)

d) tipo: tipo de mapa a utilizar (ROADMAP, SATELLITE, HYBRID o TERRAIN)

Ejemplo de llamada:

mapas_marcador.php?lat=41.4235720334046&lon=-0.4985787200928371&zoom=15

mapas_marcador.php?dir=segovia,spain&zoom=15&tipo=ROADMAP

En el mapa

Una vez en el mapa el marcador que señala el punto se puede mover arrastrandolo(drag&drop) o bien haciendo click en otro punto del mapa en cuyo caso el nuevo marcador sustituirá al anterior. En todo momento en las cajas de texto se decodifica la dirección y las coordenadas (latitud y longitud) del punto.

También incorpora el mapa los controles clásicos del Google Maps para hacer zoom, mover el mapa o cambiar el tipo de mapa.

Geo-Localizar direcciones o coordenadas desde el formulario

En la parte superior del mapa tenemos tres campos editables: Dir, Lat y Lon correspondientes a la Dirección, Latitud y Longitud cuyos valores se actualizan dinámicamente al mover el marcador.

También pueden utilizarse para escribir en estos campos unos valores y geolocalizar el marcador correspondiente en el mapa a partir de la Dirección (Botón Geo-Dir) o bien a partir de las coordenadas (Geo-LatLon) escritas previamente en las cajas de texto.

En este caso el nuevo marcador se situa en el centro del mapa sin modificar el nivel de zoom.

Procesar los datos del marcador

El botón Procesar permite llamar a la función mapas_marcador_procesar.php pasándole como parámetro los valores que hay en las cajas de texto (Dir, Lon y Lat) a través de variables de formulario ($_POST) con los nombres (longitud/latitud/direccion .

En este caso simplemente hacemos eco de las mismas ($_POST[“longitud”],$_POST[“latitud”] y $_POST[“direccion”]) para mostrarlas en pantalla.

POLILINEAS, MARCADORES PERSONALIZADOS y ETIQUETAS

En este caso el ejercicio que he resuelto es el siguiente:

Posicionar tres marcadores en un mapa, a partir de sus coordenadas, cuyo zoom se ajusta para que todas quepan en el tamaño de mapa elegido.

Personalizar los marcadores cada uno con un icono diferente.

Unir los marcadores por una polilinea (polyline)

Que todos los marcadores se puedan arrastrar y cambiar de posición.

Situar el marcador central en la posición del mapa donde haga click con el ratón

Al mover cualquiera de los marcadores imprimo en su base la distancia total entre ellos, en el primero, y la distancia con el otro en el segundo y tercer marcador respectivamente.

Y este es el resultado que esta bien comentado para los que quieran analizar como lo he resuelto.

Ver demo -//- Ver código fuenteEspero que te sea útil y seguiré añadiendo nuevos ejemplos.

#php Herramientas para comunicar con Twitter y crear aplicaciones web con el #API de Twitter by @deswebcom

Fuente : desarrolloweb.com

Listado de los capítulos
1.- Introducción al API de Twitter y cURL
Generalidades sobre el API de Twiter y el acceso a la información por HTTP utilizando la librería cURL. Entrar
2.- API de Twitter, PHP y cURL
Hacemos un primer script PHP que se conecta con el API de Twitter y accede a la información por medio de la librería cURL. Entrar
3.- Utilizar una librería PHP para trabajar con el API de Twitter
Cómo utilizar la librería Twitter class para trabajar con el API de Twitter de una manera sencilla bastante sencilla. Entrar
4.- Más sobre la Twitter Class
Otros cuantos ejemplos de uso de la librería PHP para acceder fácilmente al API de Twitter desde nuestras aplicaciones web. Entrar
5.- Enviar mensajes a Twitter desde PHP y el API de Twitter
Cómo enviar mensajes a una cuenta de Twitter desde tus propios scripts PHP y utilizando el API de Twitter. Entrar
6.- Cliente de Twitter con PHP
Explicamos cómo hacer un cliente de Twitter en PHP. Comenzamos el desarrollo del sistema de autenticación del usuario en el API de Twitter y el almacenamiento de sus datos de sesión. Entrar
7.- Cliente Twitter 2: Timeline del usuario autenticado o de otros usuarios
Segunda parte del desarrollo de un cliente Twitter en PHP, en el que mostramos cómo hacer el timeline del usuario autenticado o los últimos post públicos de cualquier otro usuario. Entrar
8.- Cliente Twitter 3: Listado de usuarios seguidos
Cómo incorporar a nuestro cliente Twitter un listado de los usuarios seguidos. Entrar
9.- Cliente Twitter 4: Enviar mensajes a Twitter
Agregamos funcionalidades para postear mensajes desde el cliente Twitter PHP que estamos realizando. Entrar

google font api por fin podemos usar en html cualquier tipo de fuente o tipografia

Gracias a google se acabo usar siempre para tus desarrollos web las tipografias estandar que vienen instaladas en el sistema operativo de tu pc

En Google Font Directory podemos visualizar todas las fuentes disponibles

Implementar una tipografía de Google Web Fonts en nuestra página web

Una vez seleccionada la tipo que quieres, para configurarla en tu páginas web, Google nos ofrece tres formas distintas:

1. Stantdar: A través de la etiqueta Link, como cualquier otro estilo css, (dentro de las etiquetas head de la página web).

<link href="http://fonts.googleapis.com/css?family=Fuentes+Escogidas+Google" rel='stylesheet' type='text/css'>

2. @import: Haciendo un include de la fuente directamente en el archivo de estilos css (ejemplo style.css).

@import url(http://fonts.googleapis.com/css?family=Fuentes+Escogidas+Google);

3. Javascript: A través de un script de javascript (dentro las etiquetas head de la página web).

<script type="text/javascript"><!--
  WebFontConfig = {
    google: { families: [ &prime;Fuentes+Escogidas+Google&prime; ] }
  };
  (function() {
    var wf = document.createElement(&prime;script&prime;);
    wf.src = (&prime;https:&prime; == document.location.protocol ? &prime;https&prime; : &prime;http&prime;) +
      &prime;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&prime;;
    wf.type = &prime;text/javascript&prime;;
    wf.async = &prime;true&prime;;
    var s = document.getElementsByTagName(&prime;script&prime;)[0];
    s.parentNode.insertBefore(wf, s);
  })();
// --></script>

Para usar la fuente o tipografía seleccionada e implementada, solamente hay que indicarlo en la propiedad Font-family:

h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; }

google maps cluster xml – agrupar iconos marcas chinchetas para que no se superpongan con javascript by geocodezip.com

Fuente : geocodezip.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

    <title>Google Maps Javascript API v3 Example: Loading clustered data from an XML</title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

<script type="text/javascript" src="scripts/downloadxml.js"></script>

<style type="text/css">

html, body { height: 100%; } 

</style>

<script type="text/javascript"> 

//<![CDATA[

      // this variable will collect the html which will eventually be placed in the side_bar 

      var side_bar_html = ""; 

    

      // arrays to hold copies of the markers and html used by the side_bar 

      // because the function closure trick doesnt work there 

      var gmarkers = []; 



     // global "map" variable

      var map = null;

      var markerclusterer = null;



// A function to create the marker and set up the event window function 

function createMarker(latlng, name, html) {

    var contentString = html;

    var marker = new google.maps.Marker({

        position: latlng,

        // map: map,

        zIndex: Math.round(latlng.lat()*-100000)<<5

        });



    google.maps.event.addListener(marker, 'click', function() {

        infowindow.setContent(contentString); 

        infowindow.open(map,marker);

        });

    // save the info we need to use later for the side_bar

    gmarkers.push(marker);

    // add a line to the side_bar html

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';

}

 

// This function picks up the click and opens the corresponding info window

function myclick(i) {

  google.maps.event.trigger(gmarkers[i], "click");

}



function initialize() {

  // create the map

  var myOptions = {

    zoom: 8,

    center: new google.maps.LatLng(43.907787,-79.359741),

    mapTypeControl: true,

    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},

    navigationControl: true,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  map = new google.maps.Map(document.getElementById("map_canvas"),

                                myOptions);



  google.maps.event.addListener(map, 'click', function() {

        infowindow.close();

        });

      // Read the data from example.xml

      downloadUrl("cga-3_gndc_harvard_edu_cluster.xml", function(doc) {

        var xmlDoc = xmlParse(doc);

        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker

          var lat = parseFloat(markers[i].getAttribute("lat"));

          var lng = parseFloat(markers[i].getAttribute("lng"));

          var point = new google.maps.LatLng(lat,lng);

          var id = markers[i].getAttribute("id");

          var country = markers[i].getAttribute("country");

          var html="<b>"+country+"</b><br>"+id;

          // create the marker

          var marker = createMarker(point,country+" "+id,html);

        }

        markerCluster = new MarkerClusterer(map, gmarkers);

        // put the assembled side_bar_html contents into the side_bar div

        document.getElementById("side_bar").innerHTML = side_bar_html;

      });

    }

 

var infowindow = new google.maps.InfoWindow(

  { 

    size: new google.maps.Size(150,50)

  });

    



    // This Javascript is based on code provided by the

    // Community Church Javascript Team

    // http://www.bisphamchurch.org.uk/   

    // http://econym.org.uk/gmap/

    // from the v2 tutorial page at:

    // http://econym.org.uk/gmap/basic3.htm 

//]]>

</script> 



  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

 

    <!-- you can use tables or divs for the overall layout --> 

    <table border="1"> 

      <tr> 

        <td> 

           <div id="map_canvas" style="width: 550px; height: 450px"></div> 

        </td> 

        <td valign="top" > 

           <div id="side_bar" style="width:300px;height:450px; text-decoration: underline; color: #4444ff; overflow:auto;"></div> 

        </td> 

      </tr> 

    </table> 

 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 

      However, it seems JavaScript is either disabled or not supported by your browser. 

      To view Google Maps, enable JavaScript by changing your browser options, and then 

      try again.</p>

    </noscript> 

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 

</script> 

<script type="text/javascript"> 

_uacct = "UA-162157-1";

urchinTracker();

</script> 

<script type="text/javascript"><!--

google_ad_client = "pub-8586773609818529";

google_ad_width = 728;

google_ad_height = 90;

google_ad_format = "728x90_as";

google_ad_type = "text";

google_ad_channel ="";

google_color_border = "CCCCCC";

google_color_bg = "FFFFFF";

google_color_link = "000000";

google_color_url = "666666";

google_color_text = "333333";

//--></script>

<script type="text/javascript"

  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 

<div id="w3valid">

    <a href="http://validator.w3.org/check?uri=referer" ><!-- target="validationresults" --><img

        src="http://www.w3.org/Icons/valid-xhtml10"

        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

</div>   

  </body> 

</html> 

Y el xml

<markers>

<marker id="12253" lat="43.369810" lng="-8.395300" country="Spain"/>

<marker id="12256" lat="43.316570" lng="-5.711210" country="Spain"/>

<marker id="12258" lat="43.252700" lng="-2.386930" country="Spain"/>

</markers>

Solo añado tres marcas para ver el ejemplo del codigo, para ver el xml completo pincha aqui

google maps – agrupar marcas (cluster) para mejorar el rendimiento con marcadores masivos – libreria MarkerClusterer by maestrosdelweb.com

Fuente: maestrosdelweb.com

MarkerCulterer agrupa los marcadores y muestra la cantidad de marcadores que hay en cierto segmento. En la documentación en el directorio llamado examples, muestra varios ejemplos de como utilizar esta librería.

Estos son los posibles colores que se pueden mostrar en el mapa que viene por defecto:

  • Azul 2-9
  • Amarillo 10-99
  • Rojo 100-999
  • Violeta 1,000-9,999
  • Violeta oscuro 10,000+

El comportamiento que trae por defecto la clase MarkerClusterer se puede modificar en el tercer parametro. Las posibles opciones son:

  • gridSize: Número entero. Valor por defecto 60
  • maxZoom: Número entero entre el 1 al 23. Indica hasta donde debe hacer el agrupamiento
  • zoomOnClick: Valor booleano para hacer “zoom” al pulsar en el marcador. true ofalse. Valor por defecto true
  • averageCenter: Centrar aproximádamente el marcador. true o false. Valor por defecto true
  • minimumClusterSize: Número mínimo para agrupar los marcadores. Por defecto 2

styles: Es un array que contiene uno o varios objetos de MarkerStyleOptions.
Posibles valores son:

  • url: La dirección de la imagen a mostrar
  • height: El alto de la imagen
  • width: El ancho de la imagen
  • anchor: Array con la posición x y y de los números en la imagen. Por defecto centrado
  • textColor: Color de los números. Por defecto black
  • textSize: Tamaño de los números. Por defecto 11
  • backgroundPosition: Posición del fondo

Es importante el orden en que se indican los objetos en el tercer parametro de la clase MarkerClusterer, las imágenes se van a mostrar conforme al orden de los valores numéricos indicados en los colores por defecto.

También los números de imágenes a colocar son importante, ya que si se coloca uno, esa es la imagen a mostrar en cada uno de los niveles indicados en los colores, si son dos la primera representa el primer valor numérico y la segunda del segundo al quinto, si se colocan tres, la primera representa el primer valor numérico, la segunda el segundo y la tercera del tercero al quinto y así sucesivamente.

Ejercicio práctico sobre el consumo de un archivo JSON desde una página PHP y de trabajo con el API de Panoramio

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

JSON es un formato utilizado para el intercambio de información entre sistemas. Utiliza Javascript como lenguaje y sintaxis para la definición de objetos, en archivos de texto que son transferidos fácilmente por Internet. Poco a poco se ha ido incorporando al uso habitual en el desarrollo web por su facilidad de uso y su integración en lenguajes de programación habituales, como PHP. En este artículo vamos a presentar una práctica con JSON en PHP basada en el uso del API de Panoramio.Panoramio es un popular servicio de Google, como probablemente sabremos, que permite subir imágenes localizadas geográficamente en los mapas de Google. Panoramio dispone de un API para la integración de las fotografías de su base de datos en otras aplicaciones web, de manera que cualquier persona puede presentar fotos de lugares del mundo subidas por los usuarios de Panoramio, en su propio sitio web.El API de Panoramio utiliza JSON como formato de intercambio de la información de las fotos. Por medio de este API podemos construir URL, que solicitadas al sitio de Panoramio, nos devuelven un JSON con los datos de las fotografías, es decir, su título, autor, URL del archivo gráfico, etc. Gracias a la integración de JSON en la mayoría de los lenguajes de programación de aplicaciones web, desde casi todas las plataformas de programación para el desarrollo, se pueden obtener fácilmente las fotos y presentarlas en un sitio web.

Como venimos explicando en el Manual de Trabajo con JSON en PHP, este lenguaje de programación dispone de varias funciones que sirven para consumir archivos JSON y convertirlos en objetos PHP con los que podemos trabajar. Podemos ver como es de práctico el JSON al utilizar el API de Panoramio y cómo en pocas líneas de código podemos acceder a Panoramio y consultar su base de datos de fotografías y mostrarlas en nuestra página web.

Referencia: En DesarrolloWeb.com hemos publicado anteriormente un artículo para aprender a consumir JSON del API de Panoramio con el lenguaje de programación del lado del cliente JSON: API Panoramio + ejemplo de JSON con Mootools .

Pasos del script PHP para consultar el API de Panoramio
Para crear un programa en PHP que consulte el API de Panoramio tenemos que realizar varios pasos:

  1. Conectar con una URL de Panoramio, enviando los datos sobre la localización desde donde queremos obtener fotos, para recibir un JSON con los datos de dichas fotos.
  2. Procesar el JSON, para obtener un objeto PHP con los datos de las fotografías.
  3. Hacer un bucle para recorrer las fotografías del objeto, para mostrar las fotografías obtenidas en nuestra página.

Todos estos pasos son sencillos, pero necesitaremos alguna idea sobre distintas partes de PHP, pero afortunadamente en Desarrollo web .com tenemos artículos para obtener la base de conocimientos necesaria para realizar cualquiera de estos pasos.
Conectar con una URL de Panoramio:
Esto lo tenemos que hacer con las funciones de trabajo con archivos de texto que dispone PHP, pues la lectura de ficheros se hace con las mismas funciones que la lectura de URLs, tal como explicamos en el artículo Leer ficheros con PHP.Primero tenemos que crear una URL para la consulta en el API de Panoramio, que tendrá una forma como esta:

http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium

Esto nos devolvería fotos:

  • por orden de popularidad,
  • desde la foto encontrada en posición 0 hasta la posición 5 de ese ranking por popularidad,
  • entre unas coordenadas (minx, miny) y (maxx, maxy), o lo que es lo mismo (mínima longitud y latitud) y (máxima longitud y latitud),
  • de tamaño medio

Las fotos están indicadas, como se decía, en texto con código Javascript en formato JSON. Así pues, si accedemos a esa URL obtendremos el JSON de respuesta.

Para obtener el texto que devuelve Panoramio al acceder a esa URL tenemos que leerlo con las funciones de archivos. Utilizaremos una función ya explicada en el artículo Leer ficheros con PHP

function leer_contenido_completo($url){
$fichero_url = fopen ($url, “r”);
$texto = “”;
while ($trozo = fgets($fichero_url, 1024)){
$texto .= $trozo;
}
return $texto;
}

Así pues, con una llamada a esta función, enviando la URL que deseamos consultar, podríamos obtener el JSON con las fotos.

$URL_API_PANORAMIO = “http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium&#8221;;

$contenido_url = leer_contenido_completo($URL_API_PANORAMIO);
Procesar el JSON:
Como ya vimos en el artículo Consumir un JSON desde PHP, PHP dispone de la función json_decode() que devuelve un objeto PHP resultante de procesar el JSON enviado como un string por parámetro. En nuestro ejemplo podríamos hacer lo siguiente:$JSON_PANORAMIO_PHP = json_decode($contenido_url);

En la variable $JSON_PANORAMIO_PHP tendremos el objeto PHP resultante de la decodificación del JSON recibido en el contenido de la URL.
Hacer un bucle para recorrer las fotografías del objeto
Ahora nos queda el paso más sencillo para los que ya tienen cierta experiencia con PHP, hacer un recorrido de todas las fotos que hayamos recibido. Ese recorrido deberá tener en cuenta el formato del objeto que se recibe en el JSON. Ese objeto tiene los siguientes atributos:

  • count (con el número de fotos encontradas en todo panoramio entre las coordenadas dadas, que no tiene por qué corresponder con el subconjunto de fotos recibidas.
  • photos (que es un array con todas las fotos recibidas. Cada foto es otro objeto, que tiene los datos de esa foto en particular)
  • has_more (con un boleano que indica si hay o no otras fotos disponibles para este punto)
Nota: En realidad podemos obtener la información completa sobre el formato de este objeto en la propiadocumentación del API de Panoramio.

Entonces nuestro bucle PHP tiene que hacer un recorrido al array de fotografías que hay en el atributo “photos” del objeto PHP. Podría tener esta forma:for ($i=0; $i<count($JSON_PANORAMIO_PHP->photos); $i++){
$foto_actual = $JSON_PANORAMIO_PHP->photos[$i];
echo “<p>”;
echo “<img src='” . $foto_actual->photo_file_url . “‘ width='” . $foto_actual->width . “‘ height='” . $foto_actual->height . “‘>”;
echo “<br>”;
echo “<small>” . $foto_actual->photo_title . “, por ” . $foto_actual->owner_name . “</small>”;
echo “</p>”;
}

Este recorrido se podría haber hecho de otra forma, pero nos sirve perfectamente un bucle for. Además, quizás vosotros colocaríais las fotos con otro estilo, para adaptarlas al diseño de vuestra página.

Si se desea, podemos ver las fotos de Panoramio que hay en esa localización, que corresponde con la Ciudad de las Ciencias y las Artes de Valencia.
Código PHP completo
A continuación para una referencia más completa, podemos ver el código completo de la página PHP que hemos creado para hacer este ejemplo de trabajo con JSON en PHP.<html>
<head>
<title>Consumir JSON del API de Panoramio desde PHP</title>
</head>

<body>

<?

function leer_contenido_completo($url){
$fichero_url = fopen ($url, “r”);
$texto = “”;
while ($trozo = fgets($fichero_url, 1024)){
$texto .= $trozo;
}
return $texto;
}
$URL_API_PANORAMIO = “http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium&#8221;;

$contenido_url = leer_contenido_completo($URL_API_PANORAMIO);

echo $contenido_url;

$JSON_PANORAMIO_PHP = json_decode($contenido_url);

echo “<hr>”;

//echo $JSON_PANORAMIO_PHP->count; //esto muestra el número de fotos totales que existen en Panoramio en esa localización
for ($i=0; $i<count($JSON_PANORAMIO_PHP->photos); $i++){
$foto_actual = $JSON_PANORAMIO_PHP->photos[$i];
echo “<p>”;
echo “<img src='” . $foto_actual->photo_file_url . “‘ width='” . $foto_actual->width . “‘ height='” . $foto_actual->height . “‘>”;
echo “<br>”;
echo “<small>” . $foto_actual->photo_title . “, por ” . $foto_actual->owner_name . “</small>”;
echo “</p>”;
}
?>
</body>
</html>

Podemos ver el script en marcha en una página aparte.