OpenLayers and Social Networks

OpenLayers and Social Networks

• Jorge Sanz
  • @xurxosanz · jsanz [at] prodevelop [dot] es
• Javier Carrasco
  • @jacarma · jcarrasco [at] prodevelop [dot] es
• Alberto Romeu
  • @alrocar · aromeu [at] prodevelop [dot] es
• Vicente Sanjaime
  • @visancal · vsanjaime [at] prodevelop [dot] es

http://bit.ly/foss4g11-olsocial

Intended audience

• Some basic knowledge of JavaScript
• Some basic knowledge of OpenLayers
• OpenLayers ninjas, you can disappear :-)
  

  Foto by Seth W.

Valencia Tourism Geoportal

• Using Google Maps API
• Yahoo Query Language
• We love Open Layers
  
• So, how to do the same?

POI services

• Many public APIs provide geographic data
• Usually as points in EPSG:4326
• Not just social networks
• Many different clients: desktop web, mobile web, custom mobile applications, ...

OpenLayers concepts:

• Format: the language of your data
• Protocol: how to decide where to retrieve your data
• Strategy: when and with which parameters

More at ­« OpenLayers Vector Mayhem» by Tim Schaub (FOSS4G 2009)

External services on OpenLayers

• Same origin policy: no outside AJAX calls
• JSONP

  //JSON response for AJAX req
  {results:{a:1,b:2,c:3}}
  //JSONP response at script tag
  callbackFunction({results:{a:1,b:2,c:3})

• Before OpenLayers 2.11:
  • Proxy on your server and use normal AJAX
  • Custom OpenLayers.Protocol with JSONP handling (i.e. with FlyJSONP)
• New in OpenLayers 2.11: Script

Example #1: Flickr

 
format: new OpenLayers.Format.FlatJSON({
	getResultArray : function(obj){ return obj.photos.photo},
	getLat : function(obj) { return obj.latitude },
	getLon : function(obj) { return obj.longitude }
}

Example #1: Flickr

 
layer1 = new OpenLayers.Layer.Vector("Flickr",{
  strategies: [new OpenLayers.Strategy.BBOX({resFactor:2})],
  protocol: new OpenLayers.Protocol.Script2({
    url: "http://api.flickr.com/services/rest/",
    callbackKey: "jsoncallback",
    params:{ 
      format: "json", method: "flickr.photos.search",
      api_key: "b3a77fdabcdf31ea15266ccffbb353c0",
      extras: "geo,url_t,owner_name,url_m",
      min_upload_date : "1157285524.213"
    },
    filterToParams: function(filter, params) {
      if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
        params.bbox = ""+ Math.max(filter.value.left,-180) + "," + 
        Math.max(filter.value.bottom,-90) + "," +
        Math.min(filter.value.right,180) + "," + 
        Math.min(filter.value.top,90);}
      return params;
    },
    format: new OpenLayers.Format.FlatJSON({
      getResultArray : function(obj){ return obj.photos.photo},
      getLat : function(obj) { return obj.latitude },
      getLon : function(obj) { return obj.longitude }
    })
  })
});

Example #1: Flickr

Example #2: Twitter

The filterToParams has to convert from BBOX to center & radius

protocol: new OpenLayers.Protocol.Script2({
  url: "http://search.twitter.com/search.json",
  params: { rpp: "100" },
  callbackKey: "callback",
  filterToParams: function(filter, params) {
    if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
      var dist = OpenLayers.Util.distVincenty(
        filter.value.getCenterLonLat(), 
        {lon: filter.value.left, lat: filter.value.bottom}
      );
      params.geocode=filter.value.getCenterLonLat().lat +
        "," + filter.value.getCenterLonLat().lon +
        "," + dist + "km";
    }
    return params;
  },
  

Example #2: Twitter

FlatJSON is a little bit more complicated, Twitter geodata is more ofuscated

 
  format: new OpenLayers.Format.FlatJSON({
    getResultArray: function(obj){ return obj["results"]},
    getLat: function(obj){ 
      if (obj.geo && obj.geo.coordinates)
        return obj.geo.coordinates[0];
      var lat = obj.location.replace(/[^0-9\.\,]+/g,'').split(",")[0];
      return lat;
    },
    getLon: function(obj){ 
      if (obj.geo && obj.geo.coordinates)
        return obj.geo.coordinates[1];
      var lon = obj.location.replace(/[^0-9\.\,]+/g,'').split(",")[1];
      return lon;
    }
  })
})

Example #2: Twitter

Example #3: Tourism Geoportal

protocol: new OpenLayers.Protocol.Script2({
  url: "http://www.comunitatvalenciana.com/geo/search",
  params: { lang: "eng", layerName: "monumentos",
            format: "json", results: "200"},
  callbackKey: "callback",
  filterToParams: function(filter, params) {
    if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
      var dist = OpenLayers.Util.distVincenty(
        filter.value.getCenterLonLat(), 
        {lon: filter.value.left, lat: filter.value.bottom});
      params.lat=filter.value.getCenterLonLat().lat;
      params.lon=filter.value.getCenterLonLat().lon;
      params.radius=dist*1000; //in meters
    }
    return params;
  },
  format: new OpenLayers.Format.FlatJSON({
    getResultArray : function(obj){ return obj.hotspots},
    getLat : function(obj) { return obj.lat },
    getLon : function(obj) { return obj.lon }
  })
})
  

Example #3: Tourism Geoportal

Recap

for every API:

• Protocol with requests by BBOX or center&radius
• Specific set of parameters
• Specific response to process (FlatJSON makes it easier)

Different approximation: POIProxy

• Server app by Alberto Romeu, repo at GitHub
• Similar to chrsmidt's AnyMaps
• Deploy it on your servlet container or at GAE
• Response in GeoJSON
• Demo instance at http://poiproxy.mapps.es/

Example #4: Gowalla from POIProxy

layer1 = new OpenLayers.Layer.Vector("gowalla",{
  projection: "EPSG:4326",
  strategies: [new OpenLayers.Strategy.BBOX({resFactor:1})],
  styleMap: new OpenLayers.StyleMap({
    externalGraphic: 'gowalla.png',
    pointRadius: 8
  }),
  protocol: new OpenLayers.Protocol.Script({
    url: "http://poiproxy.mapps.es/browseByExtent",
    callbackKey: "callback",
    params:{ service: "gowalla"	},
    filterToParams: function(filter, params) {
      if (filter.type === OpenLayers.Filter.Spatial.BBOX) {
        params.minX = Math.max(filter.value.left,-180);
        params.minY = Math.max(filter.value.bottom,-90);
        params.maxX = Math.min(filter.value.right,180);
        params.maxY = Math.min(filter.value.top,90);
      }
      return params;
    },
    format: new OpenLayers.Format.GeoJSON()
  })
});
  

Example #4: Gowalla from POIProxy

Some conclusions

• Adding external POI services is pretty easy with Script class
• With small code it can be simplified even more
• POIProxy can be a good choice to facilitate the access to different POI services
• There's more work to do, for example manage pagination
• A more simplified and ­«OpenLayers style» code is available at http://gis.prodevelop.es/olsocial/. Check the source.

Thanks!