i'm developing webapp/website using visjs.org timeline displaying historical maps on leaflet map. i've used jquery sparkle plugin deal single , double clicks, single click puts selected historic map top layer while double click sets or desets baselayer.
it works charm on desktop browsers, mobile browsers give me headache. chrome mobile , opera mobile work fine (tap , double tap work expected), firefox mobile, android native browser , ios browser don't register clicking or tapping event.
it propably has sparkle plugin, can't figure out how adjust it.
edit: below code homepage aswell sparkle plugin
var amountclicked = 0; var baseselected = 0; $(".vis-item").bind('click tap', function() { amountclicked++; }); $(".vis-item").bind('singleclick', function() { var isbase = this.classlist.contains("vis-item-base"); if (isbase) { alert("first disable layer baselayer"); } else { var datarray = []; $.each(timeline.itemsdata._data, function(key, value) { datarray.push(value); }); var selectid; var selecteditem = this.firstchild; (j = 0; j < datarray.length; j++) { var currdataobj = datarray[j]; var cc1 = currdataobj.content; var cc2 = selecteditem.innerhtml var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').tolowercase(); var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').tolowercase(); if (currdatacontent == selecteditemcontent) { selectid = currdataobj.id; // if previous selected basemap var prevhistcont; var prevselected; timeline.setselection(selectid) if (previoushistorical != undefined) { previoushistorical.classlist.add("vis-item-base"); } var selecteditemid = timeline.getselection(); var selectedyear = data[selecteditemid - 1].start.getfullyear(); var ind, leng; leng = layers.length; (ind = 0; ind < leng; ++ind) { var tempitem = layers[ind]; if (tempitem.properties.year != selectedyear.tostring()) { if (openmap.haslayer(overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label])) { if (previoushistorical != undefined) { var innertextbase = $(".vis-item-base")[0].innertext; var curlab = layers[ind].properties.label + "-" + layers[ind].properties.year; if (innertextbase.search(curlab) != 0) { var isbase = this.classlist.contains("vis-item-base"); var overlaylayer = $(".leaflet-layer:eq( 1 )").find('.leaflet-tile-container:eq( 1 )').find('.leaflet-tile-loaded'); var selectindex = ind; overlaylayer.animate({ opacity: 0 }, 20, function() { function deletelayer() { openmap.removelayer(overlaymaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]); }; window.settimeout(deletelayer, 1000); // 5 seconds }); updatemarkers(selectedyear); } } else { var isbase = this.classlist.contains("vis-item-base"); var overlaylayer = $(".leaflet-layer:eq( 1 )").find('.leaflet-tile-container:eq( 1 )').find('.leaflet-tile-loaded'); var selectindex = ind; overlaylayer.animate({ opacity: 0 }, 20, function() { function deletelayer() { openmap.removelayer(overlaymaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]); }; window.settimeout(deletelayer, 1000); // 5 seconds }); updatemarkers(selectedyear); } } } else { openmap.addlayer(overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label]); overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringtofront(); updateopacity($("#slide")[0].value); var layertitle = "<h4>" + layers[ind].properties.label + "-" + layers[ind].properties.year + "</h4>"; var layertext = ""; var draaiboeklink = ""; if (layers[ind].properties.text != undefined) { layertext = layers[ind].properties.text; } if (layers[ind].properties.draaiboek != undefined) { if (layers[ind].properties.draaiboek == "ja") { var temp = buildurl('draaiboek.html', 'title', layers[ind].properties.label.tolowercase()); var t2 = temp.replace(" & ", "en"); draaiboeklink = "</br><a target='_blank' href='" + t2 + "'>bekijk de originele kaart</a>"; } } $("#mapinfo")[0].innerhtml = layertitle + layertext + draaiboeklink + " "; } } } }; amountclicked = 0; } }); var previoushistorical; $(".vis-item").bind('lastclick', function() { if (amountclicked > 1) { //alert("doubleclick performed"); var isbase = this.classlist.contains("vis-item-base"); if (isbase) { this.classlist.remove("vis-item-base"); alert("set standard back"); var datarray = []; $.each(timeline.itemsdata._data, function(key, value) { datarray.push(value); }); var selectid; var selecteditem = this.firstchild; (j = 0; j < datarray.length; j++) { var currdataobj = datarray[j]; var cc1 = currdataobj.content; var cc2 = selecteditem.innerhtml; var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').tolowercase(); var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').tolowercase(); if (currdatacontent == selecteditemcontent) { selectid = currdataobj.id; var selectedyear = data[selectid - 1].start.getfullyear(); var ind, leng; leng = layers.length; (ind = 0; ind < leng; ++ind) { var tempitem = layers[ind]; if (tempitem.properties.year == selectedyear.tostring()) { var selectindex = ind; openmap.removelayer(overlaymaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]); } } } }; openmap.addlayer(basec); basec.bringtoback(); baseselected--; previoushistorical = undefined; } else { if (baseselected < 1) { previoushistorical = this; this.classlist.add("vis-item-base"); if (this.classlist.contains("vis-selected")) { this.classlist.remove("vis-selected"); } alert("put base"); openmap.removelayer(basec); var datarray = []; $.each(timeline.itemsdata._data, function(key, value) { datarray.push(value); }); var selectid; var selecteditem = this.firstchild; (j = 0; j < datarray.length; j++) { var currdataobj = datarray[j]; var cc1 = currdataobj.content; var cc2 = selecteditem.innerhtml; var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').tolowercase(); var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').tolowercase(); if (currdatacontent == selecteditemcontent) { selectid = currdataobj.id; var selectedyear = data[selectid - 1].start.getfullyear(); var ind, leng; leng = layers.length; (ind = 0; ind < leng; ++ind) { var tempitem = layers[ind]; if (tempitem.properties.year == selectedyear.tostring()) { openmap.addlayer(overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label]); overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringtoback(); overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label].setzindex(-2); } } } }; baseselected++; } else if (baseselected == 1) { alert("another historical baselayer"); var datarray = []; $.each(timeline.itemsdata._data, function(key, value) { datarray.push(value); }); var tempprev = previoushistorical; tempprev.classlist.remove("vis-item-base"); //timeline.itemset.setselection(888888); var prevselectid; var prevselecteditem = tempprev.firstchild; (j = 0; j < datarray.length; j++) { var currdataobj = datarray[j]; var cc1 = currdataobj.content; var cc2 = prevselecteditem.innerhtml; var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').tolowercase(); var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').tolowercase(); if (currdatacontent == selecteditemcontent) { prevselectid = currdataobj.id; var selectedyear = data[prevselectid - 1].start.getfullyear(); var ind, leng; leng = layers.length; (ind = 0; ind < leng; ++ind) { var tempitem = layers[ind]; if (tempitem.properties.year == selectedyear.tostring()) { var selectindex = ind; openmap.removelayer(overlaymaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]); } } } }; previoushistorical = this; this.classlist.add("vis-item-base"); if (this.classlist.contains("vis-selected")) { this.classlist.remove("vis-selected"); } var selectid; var selecteditem = this.firstchild; (j = 0; j < datarray.length; j++) { var currdataobj = datarray[j]; var cc1 = currdataobj.content; var cc2 = selecteditem.innerhtml; var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').tolowercase(); var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').tolowercase(); if (currdatacontent == selecteditemcontent) { selectid = currdataobj.id; var selectedyear = data[selectid - 1].start.getfullyear(); var ind, leng; leng = layers.length; (ind = 0; ind < leng; ++ind) { var tempitem = layers[ind]; if (tempitem.properties.year == selectedyear.tostring()) { openmap.addlayer(overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label]); overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringtoback(); overlaymaps[layers[ind].properties.year + " - " + layers[ind].properties.label].setzindex(-2); } } } }; } } amountclicked = 0; } }); openmap.addlayer(overlaymaps[layers[0].properties.year + " - " + layers[0].properties.label]); var layertitle = "<h4>" + layers[0].properties.label + "-" + layers[0].properties.year + "</h4>"; var layertext = layers[0].properties.text; $("#mapinfo").html(layertitle + layertext);
Comments
Post a Comment