Mashups with geo data feeds
MapTune è un Framework in Javascript per visualizzare geo data feed di vari formati in un unica mappa
MapTune può interpretare vari formati geodata 'standard' tra i quali KML, geoJson e GeoRSS ma
anche tabelle georeferenziate in CSV.
Inoltre il parser di MapTune è estendibile via plugin, e cosi adattabile a nuovi o proprietari formati, basta che si basino su XML o JSON
informazioni tecniche
Per caricare un dataset sulla mappa di MapTune, si definisce la sorgente del dataset e la rappresentazione sulla mappa (con oggetto in JSON) utilizzando la funzione maptune.addFeedLayer() dell'interfaccia applicativa:
Qui un esempio:
javascript:maptune.addFeedLayer('http://dati.comune.lecce.it/dataset/8bdfb184-a818-4707-89b2-2c2738bc7bf2/resource/1dfd1257-d32f-476a-b446-2742ea9e05a0/download/cittadileccedaeprogettocomunecardioprotetto1.geojson',{
type:'GeoJson',
format:'json',
flag:'open|showinfo|zoomto',
title:'Defibrillatori DAE',
name:'Defibrillatori DAE',
layer:{'name': 'Defibrillatori DAE',
markerType:'custom',
markerImage : 'resources/icons/map-icons-collection/Automated_External_Defibrillator.png',
smallImage : 'resources/icons/default/default-small_red.png',
markerImageType : 'png'
}
});
In questo oggetto JSON si possono definire vari parametri per la interpretazione della sorgente e la rappresentazione sulla mappa.
Di seguito un esempio più complesso per gli 'Eventi condivisi' usata in 'Eventi Lecce':
maptune.addFeedLayer('http://crossorigin.me/http://goo.gl/pRj7Hu',{
type:'LecceEvents',
format:'csv',
flag:'open|showinfo',
title:'Eventi Condivisi',
proxy:'true',
parser:
{
title: 'nomeevento',
latlon: 'coordinate',
timeStart: 'dataorainizio',
timeEnd: 'dataorafine',
timeParse:
function(value){
var dateA = value.split(' ')[0].split('\/');
if (value.split(' ')[1]){
var timeA = value.split(' ')[1].split(':');
return new Date(dateA[2],dateA[1]-1,dateA[0],timeA[0],timeA[1]);
}
return new Date(dateA[2],dateA[1]-1,dateA[0]);
},
label: 'true',
info: 'date|idevento|emailcontatto|organizzatore|nomeevento|tipologia |dettagli|dataorainizio|dataorafine|pagamento',
image:'linkimg'
},
layer:{ name:'Eventi Condivisi',
initListState : "expanded|showinfo",
markerType : 'categorical',
sort : 'timeUp',
category : 'tipologia ',
categoryList: {
Musica : { 'markerImage' : 'resources/icons/map-icons-collection/music_classical.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Teatro : { 'markerImage' : 'resources/icons/map-icons-collection/theater.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Danza : { 'markerImage' : 'resources/icons/map-icons-collection/theater.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Sport : { 'markerImage' : 'resources/icons/map-icons-collection/indoor-arena.png',
'smallImage' : 'resources/icons/default/default-small_orange.png'
},
'Arte' : { 'markerImage' : 'resources/icons/map-icons-collection/museum_art.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
'Cultura e Libri' : { 'markerImage' : 'resources/icons/map-icons-collection/museum_art.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Cinema : { 'markerImage' : 'resources/icons/map-icons-collection/cinema.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
'Attualità' : { 'markerImage' : 'resources/icons/map-icons-collection/farmstand.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
'Innovazione' : { 'markerImage' : 'resources/icons/map-icons-collection/departmentstore.png',
'smallImage' : 'resources/icons/default/default-small_red.png'
}
},
markerImage : 'resources/icons/default/default_red.png',
smallImage : 'resources/icons/default/default-small_red.png',
markerImageType : 'png',
initialTimeScope:'today',
maxLargeIcons: '5000',
},
flag:'zoomto'});
}
Il primo argomento:
'http://crossorigin.me/http://goo.gl/pRj7Hu'
definisce la sorgente dei dati, in questo caso un link ad un 'Google Spreadsheet', che contiene gli 'eventi condivisi'. Il link contiene un servizio ('http://crossorigin.me') che permette di caricare documenti da domini diverso dell'applicazione
Il secondo argomento da il oggetto JSON che definisce il tipo della sorgente e la rappresentazione sulla mappa. In seguito due elementi particolari del suddetto oggetto.
Il 'parser':
parser: {
lat: 'lat',
lon: 'lng',
timeStart: 'Data inizio',
timeEnd: 'Data fine',
timeParse: function(value){var dateA = value.split(' ')[0].split('\/');return new Date(dateA[2],dateA[1]-1,dateA[0]);},
label: 'true',
info: 'Organizzatore|Note|Pagamento|Tipologia|Data inizio|Data fine|Luogo|Link|Email_contatto|Link_immagine ',
image: 'Link_immagine'
},
definisce i campi della tabella in CSV dove si trovano: la posizione (lat,lon) dell'evento, la data di inizio e fine dell'evento, ed i campi da presentare nella lista o sulla mappa.
l'oggetto 'layer':
layer:{
name: 'Eventi Condivisi',
description: 'Eventi OpenData in collaborazione con Comitato Matera 2019 Mappa ... ',
markerType : 'categorical',
sort : 'timeUp',
category : 'Tipologia',
categoryList: {
Musica : { 'markerImage' : 'resources/icons/map-icons-collection/music_classical.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Teatro : { 'markerImage' : 'resources/icons/map-icons-collection/theater.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Danza : { 'markerImage' : 'resources/icons/map-icons-collection/theater.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Sport : { 'markerImage' : 'resources/icons/map-icons-collection/indoor-arena.png',
'smallImage' : 'resources/icons/default/default-small_orange.png'
},
Mostre : { 'markerImage' : 'resources/icons/map-icons-collection/museum_art.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Cinema : { 'markerImage' : 'resources/icons/map-icons-collection/cinema.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
Tradizione: { 'markerImage' : 'resources/icons/map-icons-collection/farmstand.png',
'smallImage' : 'resources/icons/default/default-small_violet.png'
},
'Altri eventi':
{ 'markerImage' : 'resources/icons/map-icons-collection/departmentstore.png',
'smallImage' : 'resources/icons/default/default-small_red.png'
}
},
definisce la rappresentazione categorizzata degli elementi sulla mappa
parser plugin per 'LecceEvents'
Nell'oggetto JSON per il feed degli 'Eventi condivisi' di Lecce, la proprietà 'type' viene definito come 'LecceEvents'. Questo significa, che Maptune viene programmato di usare un 'parser' di nome 'maptune.feed.parse.LecceEvents' per interpretare il file CSV caricato.
...
<a href="javascript:maptune.addFeedLayer('http://crossorigin.me/http://goo.gl/pRj7Hu',{
type:'LecceEvents',
format:'csv',
flag:'open|showinfo|zoomto',
title:'Eventi Condivisi'
});" >:Eventi Condivisi Lecce (csv)</a>
...
Maptune cercera il file con il nome maptune.feed.parse.LecceEvents.js nella cartella ./plugins per caricare il parser definito. Il plugin deve definiere il parser propriertario maptune.feed.parse.LecceEvents(...) più o meno cosi:
/**
* define namespace maptune
*/
window.maptune = window.maptune || {};
maptune.feed = maptune.feed || {};
maptune.feed.parse = maptune.feed.parse || {};
(function() {
/**
* parse the feed data and make an maptune layer object
* @param the data object received from the feed read function
* @param opt parameter object
* @type object
* @return an maptune layer object
*/
maptune.feed.parse.LecceEvents = function(data,opt){
var dataA = null;
if ( opt.format == "csv" ) {
...
// define at least one layer
var layerset = new ixmaps.feed.LayerSet(title);
layer = layerset.addLayer(title);
// define the features
var feature = layer.addFeature(szTitle);
feature.setPosition(pointA[1],pointA[0]);
...
return layerset;
}
return null;
};
})();
Link alla sorgente di MapTune: https://github.com/gjrichter/maptune
