RESTORE_FE/js/map.js

// Raccatto i parametri dall'URL -- mi aspetto un parametro di nome 'link'!
thisUrlParams = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    thisUrlParams[key] = value;
});
console.log('URL get params: ', thisUrlParams);

// Funzioni per eseguire le queries
function prepareQueryURL(query){
    sparqlEndpoint = 'http://dev.restore.ovi.cnr.it:8890/sparql/';
    sparqlUrlParams = '?default-graph-uri=&query=' + encodeURIComponent(query) + '&output=json&callback=?';
    return sparqlEndpoint + sparqlUrlParams;
}

function doJsonQuery(query){

    queryURL = prepareQueryURL(query);

    response = $.ajax({//OGGETTO

        url: queryURL,
        dataType: "json",
        success: function (data){},
        error: function (e) {}
    });

    return response;

}

// Funzioni per raccattare + stringhificare l'output
queryStringOutput = "";
function stringifyResponse(val){
    resultArray = val['results']['bindings'];
    out = "";
    for(i = 0; i < resultArray.length; i++){
        out = out + JSON.stringify(resultArray[i])
    }
    queryStringOutput = (queryStringOutput + out).replace("}{",",");
}

prefixes = "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> \
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> \
PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/> \
PREFIX owl: <http://www.w3.org/2002/07/owl#>"

query = prefixes + " SELECT DISTINCT ?graph ?name_place ?coordinates {\
GRAPH ?graph {<" + thisUrlParams.link + "> crm:P168_place_is_defined_by ?coordinates;\
rdfs:label ?name_place .\
}\
}"

queryRiferimenti = prefixes + " SELECT DISTINCT ?references {\
<" + thisUrlParams.link + "> owl:sameAs ?references\
}"

queryToponimi = prefixes + " SELECT DISTINCT ?toponimi {\
<" + thisUrlParams.link + "> crm:P1_is_identified_by ?uri_toponym .\
?uri_toponym rdfs:label ?toponimi\
}"

queryRicezione = prefixes + " SELECT DISTINCT ?object ?label {\
<" + thisUrlParams.link + "> owl:sameAs ?place .\
?event_to crm:P26_moved_to ?place ;\
rdf:type crm:EL3_Receive_Letter ;\
rdfs:subClassOf ?event .\
?object crm:P25i_moved_by ?event ; \
rdfs:label ?label .\
} "

queryInvio = prefixes + " SELECT DISTINCT ?object ?label {\
<" + thisUrlParams.link + "> owl:sameAs ?place .\
?event_to crm:P27_moved_from ?place ;\
rdf:type crm:EL2_Send_Letter ;\
rdfs:subClassOf ?event .\
?object crm:P25i_moved_by ?event ; \
rdfs:label ?label .\
}"

queryCitazione = prefixes + " SELECT DISTINCT ?object ?label\
{<" + thisUrlParams.link + "> crm:P1_is_identified_by ?toponym .\
?object crm:P67_refers_to ?toponym ;\
rdfs:label ?label\
}"

queryPersone = prefixes + " SELECT DISTINCT ?range ?label \
WHERE{ \
  {?place owl:sameAs <" + thisUrlParams.link + "> .\
  ?event_to crm:P26_moved_to ?place ;\
  rdf:type crm:EL3_Receive_Letter ;\
  crm:P01_has_domain ?domain .\
  ?domain crm:P02_has_range ?range .\
  ?range rdfs:label ?label .\
} UNION {\
  ?place owl:sameAs <" + thisUrlParams.link + "> .\
  ?event_to crm:P27_moved_from ?place ;\
  rdf:type crm:EL2_Send_Letter ;\
  crm:P01_has_domain ?domain .\
  ?domain crm:P02_has_range ?range .\
  ?range rdfs:label ?label .\
  }\
}"

queryCount = prefixes + " SELECT ?place ?label COUNT(?label) AS ?Count \
WHERE{ \
?place_to owl:sameAs <" + thisUrlParams.link + "> . \
?event_to crm:P26_moved_to ?place_to ; \
rdf:type crm:EL3_Receive_Letter ; \
rdfs:subClassOf ?event . \
?event_from rdfs:subClassOf ?event ; \
rdf:type crm:EL2_Send_Letter ; \
crm:P27_moved_from ?place . \
?place rdfs:label ?label \
} \
ORDER BY DESC (?Count)"

queryCount2 = prefixes + " SELECT ?place ?label COUNT(?label) AS ?Count \
WHERE{ \
?place_from owl:sameAs <" + thisUrlParams.link + "> . \
?event_from crm:P27_moved_from ?place_from ; \
rdf:type crm:EL2_Send_Letter ; \
rdfs:subClassOf ?event . \
?event_to rdfs:subClassOf ?event ; \
rdf:type crm:EL2_Send_Letter ; \
crm:P27_moved_from ?place . \
?place rdfs:label ?label . \
} \
ORDER BY DESC (?Count) "



queryURL = prepareQueryURL(query);

queryRef = prepareQueryURL(queryRiferimenti);

queryTopo = prepareQueryURL(queryToponimi);

queryRec = prepareQueryURL(queryRicezione);

querySend = prepareQueryURL(queryInvio);

queryCit = prepareQueryURL(queryCitazione);

queryPer = prepareQueryURL(queryPersone);

queryCon1 = prepareQueryURL(queryCount);

queryCon2 = prepareQueryURL(queryCount2);


response = $.ajax({//OGGETTO

    url: queryURL,
    dataType: "json",
    success: function (data){
    	handle_data(data);
    },
    error: function (e) {}
});


response_ref = $.ajax({//OGGETTO

    url: queryRef,
    dataType: "json",
    success: function (data){
      handle_ref(data);
    },
    error: function (e) {}
});

response_top = $.ajax({//OGGETTO

    url: queryTopo,
    dataType: "json",
    success: function (data){
      handle_toponym(data);
    },
    error: function (e) {}
});

response_receive = $.ajax({//OGGETTO

    url: queryRec,
    dataType: "json",
    success: function (data){
      handle_receive(data);
    },
    error: function (e) {}
});

response_send = $.ajax({//OGGETTO

    url: querySend,
    dataType: "json",
    success: function (data){
      handle_send(data);
    },
    error: function (e) {}
});

response_cit = $.ajax({//OGGETTO

    url: queryCit,
    dataType: "json",
    success: function (data){
      handle_cit(data);
    },
    error: function (e) {}
});

response_per = $.ajax({//OGGETTO

    url: queryPer,
    dataType: "json",
    success: function (data){
      handle_persons(data);
    },
    error: function (e) {}
});

responseCountA = $.ajax({//OGGETTO

    url: queryCon1,
    dataType: "json",
    success: function (data){
      handle_count(data);
    },
    error: function (e) {}
});

responseCountP = $.ajax({//OGGETTO

    url: queryCon2,
    dataType: "json",
    success: function (data){
      handle_count2(data);
    },
    error: function (e) {}
});

function handle_data(json) {
	console.log(json);

	const locations = [];

	$.each(
			json['results']['bindings'],
			function (index, value) {
				const loc = []
				var graph = value['graph']['value'];
				var label = value['name_place']['value'];
				var coord = value['coordinates']['value'];
				const coordinates = coord.split(", ");
				loc.push(label);
				loc.push(coordinates[0]);
				loc.push(coordinates[1]);
				locations.push(loc);

        document.getElementById("grafo").innerHTML = graph;
        document.getElementById("nome_luogo").innerHTML = label;
        document.getElementById("nome_lu").innerHTML = label;
        document.getElementById("nome_lp").innerHTML = label;
        document.getElementById("nome_ll").innerHTML = label;
        document.getElementById("nome_lg").innerHTML = label;
        document.getElementById("nome_st1").innerHTML = label;
        document.getElementById("nome_st2").innerHTML = label;
				
			});

	var map = L.map('map').setView([locations[0][1], locations[0][2]], 7);
	mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

	L.tileLayer(
	  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: '&copy; ' + mapLink + ' Contributors',
	    maxZoom: 18,
	  }).addTo(map);

	for (var i = 0; i < locations.length; i++) {
	  marker = new L.marker([locations[i][1], locations[i][2]])
	    .bindPopup(locations[i][0])
	    .addTo(map);
	}
}


function handle_ref(json) {

  console.log(json);

  const references = [];

  var list_ref = "";

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var ref = value['references']['value'];
        references.push(ref);        
      });

  
  for (i=0; i<references.length; i++) {
      list_ref += "<div class='row'><div class='col'><a href='" + references[i] + "'>" + references[i] + "</a></div></div>";
  }
  
  document.getElementById("riferimenti").innerHTML = list_ref;
  
}

function handle_toponym(json) {

  console.log(json);

  const toponym = [];

  $.each(
      json['results']['bindings'],
      function (index, value) {
        var topo = value['toponimi']['value'];
        toponym.push(" " + topo);        
      });
  
  document.getElementById("toponimi").innerHTML = toponym;

}

function handle_receive(json) {

  console.log(json);

  const received = {};

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        key = value['object']['value'];
        data = value['label']['value'];   
        received[key] = data;  
        i++;   
      });

  var myArray = "";

  for (var key in received) {
    myArray += "<div class='row'><div class='col-10'>" + received[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
  }

  document.getElementById("n_receive").innerHTML = i;
  document.getElementById("object_receive").innerHTML = myArray;

  if (i==0) {
    var messaggio = "<p>Nessun risultato trovato</p>";
    document.getElementById("object_receive").innerHTML = messaggio;
  }

}


function handle_send(json) {

  console.log(json);

  const sent = {};

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        key = value['object']['value'];
        data = value['label']['value'];   
        sent[key] = data;   
        i++;  
      });

  var myArray = "";

  for (var key in sent) {
    myArray += "<div class='row'><div class='col-10'>" + sent[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
  }

  document.getElementById("n_send").innerHTML = i;
  document.getElementById("object_send").innerHTML = myArray;

  if (i==0) {
    var messaggio = "<p>Nessun risultato trovato</p>";
    document.getElementById("object_send").innerHTML = messaggio;
  }

}

function handle_cit(json) {

  console.log(json);

  const citations = {};

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        key = value['object']['value'];
        data = value['label']['value'];   
        citations[key] = data;  
        i++;   
      });

  var myArray = "";

  for (var key in citations) {
    myArray += "<div class='row'><div class='col-10'>" + citations[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
  }

  document.getElementById("n_cit").innerHTML = i;
  document.getElementById("object_cit").innerHTML = myArray;

  if (i==0) {
    var messaggio = "<p>Nessun risultato trovato</p>";
    document.getElementById("object_cit").innerHTML = messaggio;
  }

}

function handle_persons(json) {

  console.log(json);

  const people = {};

  var i=0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        key = value['range']['value'];
        data = value['label']['value'];   
        people[key] = data;  
        i++;   
      });

  var myArray = "";

  for (var key in people) {
    myArray += "<div class='row'><div class='col-9'>" + people[key] + "</div><div class='persona col' id='" + 
    key + "'><i class='fa fa-user'></i></div><div class='col'><a href='" + 
    key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
  }


  document.getElementById("n_per").innerHTML = i;
  document.getElementById("object_per").innerHTML = myArray;

  if (i==0) {
    var messaggio = "<p>Nessun risultato trovato</p>";
    document.getElementById("object_per").innerHTML = messaggio;
  }

}

function handle_count(json) {
  console.log(json);

  const toponimi = [];

  const dataToponimi = [];

  var max = 0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const topo = [];

        var toponimo = value['label']['value'];
        var count = value['Count']['value'];
        var temp = parseInt(count);
        toponimi.push(toponimo);
        dataToponimi.push([toponimo, count]);

        if (temp>max) {
          max = temp;
        }
        
      });

  // set the dimensions and margins of the graph
      var margin = {top: 20, right: 30, bottom: 40, left: 90},
          width = 460 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3.select("#my_dataviz")
        .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

      // Parse the Data
      //d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {
        // Add X axis
        var x = d3.scaleLinear()
          .domain([0, max])
          .range([ 0, width]);
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleBand()
          .range([ 0, height ])
          .domain(toponimi)
          .padding(.1);
        svg.append("g")
          .call(d3.axisLeft(y))

        //Bars
        svg.selectAll("myRect")
          .data(dataToponimi)
          .enter()
          .append("rect")
          .attr("x", x(0) )
          .attr("y", function(d) { return y(d[0]); })
          .attr("width", function(d) { return x(d[1]); })
          .attr("height", y.bandwidth() )
          .attr("fill", "#69b3a2")


  /*var texts = svg.selectAll("myRect")
    .data(dataToponimi)
    .enter()
    .append("text");

  texts.attr("x", function(d){ return d[1] / 4 - 20})
      .attr("y", function(d,i){ return 22.26*i +20})
      .attr("text-anchor", "middle")
      .attr("fill", "#fff")
      .text(function(d){ return d[1]});*/

}


function handle_count2(json) {
  console.log(json);

  const toponimi = [];

  const dataToponimi = [];

  const values = [];

  var max = 0;

  $.each(
      json['results']['bindings'],
      function (index, value) {
        const topo = [];

        var toponimo = value['label']['value'];
        var count = value['Count']['value'];
        var temp = parseInt(count);
        toponimi.push(toponimo);
        dataToponimi.push([toponimo, count]);

        if (temp>max) {
          max = temp;
        }
        
      });

  // set the dimensions and margins of the graph
      var margin = {top: 20, right: 30, bottom: 40, left: 90},
          width = 460 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3.select("#my_dataviz2")
        .append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

      // Parse the Data
      //d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {
        // Add X axis
        var x = d3.scaleLinear()
          .domain([0, max])
          .range([ 0, width]);
        
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleBand()
          .range([ 0, height ])
          .domain(toponimi)
          .padding(.1);

        svg.append("g")
          .call(d3.axisLeft(y))

        //Bars
        svg.selectAll("myRect")
          .data(dataToponimi)
          .enter()
          .append("rect")
          .attr("x", x(0) )
          .attr("y", function(d) { return y(d[0]); })
          .attr("width", function(d) { return x(d[1]); })
          .attr("height", y.bandwidth() )
          .attr("fill", "#69b3a2")

        svg.selectAll("text2")
          .data(dataToponimi)
          .enter().append("text2")
          .text(function(d) {return d[1]})
          .attr("class", "text")
}


function open_info() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "block";
    document.getElementById("topo").style.display = "none";
    document.getElementById("rif").style.display = "none";
}

function open_toponimi() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "none";
    document.getElementById("topo").style.display = "block";
    document.getElementById("rif").style.display = "none";
}

function open_riferimenti() {

    document.getElementById("info_luogo").style.display = "block";
    document.getElementById("place_info").style.display = "none";
    document.getElementById("topo").style.display = "none";
    document.getElementById("rif").style.display = "block";
}

function open_collegamenti() {

    document.getElementById("references").style.display = "flex";
    document.getElementById("statistiche").style.display = "none";
}

function open_statistiche() {

    document.getElementById("references").style.display = "none";
    document.getElementById("statistiche").style.display = "flex";
}

var header = document.getElementById("ref_buttons");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}

//out = "";
//for(i = 0; i < resultArray.length; i++){
 //   out = out + JSON.stringify(resultArray[i])
//}
//queryStringOutput = (queryStringOutput + out).replace("}{",",");


/*

var locations = [
  ["LOCATION_1", 11.8166, 122.0942],
  ["LOCATION_2", 11.9804, 121.9189],
  ["LOCATION_3", 10.7202, 122.5621],
  ["LOCATION_4", 11.3889, 122.6277],
  ["LOCATION_5", 10.5929, 122.6325]
];

var map = L.map('map').setView([11.206051, 122.447886], 8);
mapLink =
  '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
  }).addTo(map);

for (var i = 0; i < locations.length; i++) {
  marker = new L.marker([locations[i][1], locations[i][2]])
    .bindPopup(locations[i][0])
    .addTo(map);
}
*/

$(document).on("click", ".persona", function (ev) {

    var link = this.id;
    //alert(nome_autore);
    //$('#myModal').text("");
    window.open("Persona.html?link="+this.id);
    

  });