Maptune by gjrichter

Welcome to Maptune.

MapTune è un Framework in Javascript per visualizzare geo data feed di vari formati. 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.

online demo

Per caricare un dataset sulla mappa di MapTune, si definisce una descrizione della fonte dei dati e della rappresentazione sia per la mappa che per la lista. Questa descrizione è un semplice oggetto in JSON. Di seguito un esempio che dimostra alcuni delle possibilità di configurare la visualizzazione e l'interpretazione dei dati:


maptune.addFeedLayer('http://goo.gl/Fo9jnt',{
  type:  'csv',
  format:'csv',
  flag:  'closed|noinfo|zoomto',
  title: 'Eventi Condivisi',
  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'   
    },
  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'
                  }
	  },
    markerImage : 'resources/icons/default/default_red.png',
    smallImage : 'resources/icons/default/default-small_red.png',
    markerImageType : 'png',
    initialTimeScope:'all',
    },

flag:'zoomto'});
}

Come si può notare, non è solo l'oggetto JSON, ma anche la 'function call' in Javascript per aggiungere la nuova fonte alla mappa. Il primo argumento:


'http://goo.gl/Fo9jnt'

definisce la sorgente dei dati, in questo caso un link ad un 'Google Spreadsheet', che contiene gli 'eventi condivisi'. Il link porta ad avere un documento in CSV

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.


parser: {
...
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]);},
...
}

con 'timeParse' si può definire una funzione in JavaScript, che legge il valore di 'timeStart' e 'timeEnd' e crea un oggetto Date() con la data definita.

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

definire un parser plugin per il formato proprietario del feed 'MateraPulita'

Nella lista dei feed 'Open Data' da aggiungere alla mappa, si trova anche un feed in XML proprietario, 'http://www.materapulita.it/app/segnalazioniopen.xml', che richiede un plugin per essere letto correttamente dai MapTune. Il plugin deve essere definito con il nome 'maptune.feed.parse.MateraPulita()' in un file Javascript con il nome 'maptune.feed.parse.MateraPulita.js'. Poi può essere riferito nella configurazione del feed come parametro 'type':'MateraPulita', quindi con il nome del parser plugin.


...
<a href="javascript:maptune.addFeedLayer('http://www.materapulita.it/app/segnalazioniopen.xml',{
  type:'MateraPulita',
  format:'xml',
  flag:'open|showinfo|zoomto',
  title:'MateraPulita'
 });" >:MateraPulita (xml)</a>
...

Il plugin deve definiere il parser propriertario più o meno cosi:


window.maptune = window.maptune || {};
maptune.feed = maptune.feed || {};
maptune.feed.parse = maptune.feed.parse || {};
(function() {

/**
 * parse the feed data and make an ixmaps layer object  
 * @param the data object received from the feed
 * @param opt optional parameter object
 * @type object
 * @return a maptune layer object
 */
  maptune.feed.parse.MateraPulita = function(data,opt){
    if ( opt.format == "json" ) {
        ...

        // 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;
  };
})();

Esempio di implementazione via template 'maptune_flat.html'

Maptune fornisce una implementazione della sua libreria Javascript con una pagina HTML reattiva, maptune_flat.html, che contiene gli elementi principali per l'applicazione: la mappa e la lista degli elementi mappati, un filtro testuale un menu, tutto configurabile via un config file (.js)

l'url all'applicazione è più o meno cosi


...path/maptune_flat?config=Libera.js

in seguito da esempio il config file utilizzato nella 'online demo'


var MapParam = {
	"default":
		{
		"thumbnailRoot" : "resources/images/tn/",
		"markerImageRoot" : "resources/icons/map-icons-collection/numeric/orange",
		"markerImageType" : "png"
		}
	,
	"noItemText" : "lista vuota",
	,
	"layerdialog" :{"href":"all_feeds.html"}
	,
	"layerbar" :{"href":"Deputati_topbar.html"}
	,
	"layertab" :{"href":"all_feeds.html"}
	,
	"layers": []
};

__init = function(){
	maptune.addFeedLayer('./data/collection.js',{
		type:'data',
		format:'json',
		name:'Collection',
		flag:'collapsed'});

	maptune.addFeedLayer('./data/Libera-Piemonte-Geobeni-Gennaio-2013-draft_1.csv',{
		type:'csv',
		format:'csv',
		name:'Libera-Piemonte',
		title:'Libera-Piemonte',
		proxy: 'true',
		parser: 
			{
			info: 'Id|Storia originale|Oggi originale|Situazione attuale|Ubicazione|Percorso di assegnazione|Data e motivo del sequestro e della confisca|Descrizione del bene|Sottotipologia|Tipologia|Profilo intestatario|Email|Sito web|CAP|Indirizzo|URL Dettagli|URL Immagine ',
			title: 'CAP',
			lat:   'Lat',
			lon:   'Lng',
			image: 'URL Immagine',
			label: 'false'
			},
		layer: 
			{ "name": "Libera-Piemonte",
			  "markerType" : "custom",
			  "markerImage" : "resources/icons/map-icons-collection/libera.png",
			  "smallImage" : "resources/icons/default/default-small_orange.png",
			  "markerImageType" : "png",
			  "description": 'Elenco Beni Confiscati tratto dal GeoBlog di Libera Piemonte; csv preparato da Cesare Gerbinio'
			},

		flag:'zoomto'});
}

setTimeout("__init()",2000);

La pagina html dell'implementazione: maptune_flat.html si trova nel REPO

see it live

Una documentazione del API di maptune sara disponibile in breve

Per qualsiasi domanda sono a disposizione su: guenter.richter@gmail.com

Maptune

a framework for map mashups with arbitrary geo data feeds

Welcome to Maptune.

definire un parser plugin per il formato proprietario del feed 'MateraPulita'

Esempio di implementazione via template 'maptune_flat.html'

see it live