diff --git a/index.htm b/index.htm index eb87a76..eb0b0f6 100755 --- a/index.htm +++ b/index.htm @@ -37,8 +37,7 @@ function myDropmenu() { document.getElementById("myDropdown").classList.toggle("show"); } -//map layers -//var artobj = L.layerGroup(); +var layers_by_field = {}; // Leaflet var map = L.map('map', { @@ -46,9 +45,11 @@ var map = L.map('map', { crs: L.CRS.Simple, //changes coordinate reference system to a x,y one instead of map cartesian coordinates minZoom: -1, maxZoom: -2, - //layers: [art, technology] //adds layers for my map + layers: [] //adds layers for my map + }); + var yx = L.latLng; var xy = function(x, y) { if (L.Util.isArray(x)) { // When doing xy([x, y]); @@ -122,11 +123,6 @@ for (var i = 15; i <= 25; i++) { lon3Array.push(i * 50); } - -//create a variable for every field. -//var variable_field = L.layerGroup(); - - //The function to wrap the result. It waits for API call to be completed. var callback = function (response) { var pages = response.query.results; @@ -136,14 +132,12 @@ var callback = function (response) { var category = pages[key].printouts.Category[0].fulltext; var category1 = pages[key].printouts.Category[1].fulltext; var connection = pages[key].printouts.Connection[0]; - var field = pages[key].printouts.Field; + var fields = pages[key].printouts.Field; console.log(pagename); if (category == "Category:Archiving"){ - var obj = L.layerGroup(); - var lan = lanArray[Math.floor(Math.random() * lanArray.length)]; //chooses random number from the array, x coordinate lanArray.splice(lanArray.indexOf(lan), 1); //removes the chosen number from the array to avoid repetitions @@ -156,12 +150,25 @@ var callback = function (response) { var myIcon = L.divIcon({ iconSize: new L.Point(200, 35), html: ' ' + pagename + ' ' });//divIcon is the name, label. - L.marker(archivingcoordinates, {icon: myIcon}).addTo(map).addTo(obj); + var marker = L.marker(archivingcoordinates, {icon: myIcon})//.addTo(map); + + for(var i = 0; i < fields.length; i++) { + //for each page, each "field"... + //adds to object "overlays" a key and a value. key is the text displayed, value is group layer +// Add the marker to the layer for each field + var field = fields[i]; - for(var i = 0; i < field.length; i++){ //for each page, each "field"... - overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer - } + if ( layers_by_field[ field ] == undefined ) { + layers_by_field[field] = L.layerGroup(); + } + // assume it exists... + marker.addTo(layers_by_field[ field ]); + } + + //for(var i = 0; i < field.length; i++){ //for each page, each "field"... + //overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer + //} dict[pagename] = [lan, lon];//adding to the dictionary the page name and its coordinates @@ -228,7 +235,7 @@ var callback = function (response) { console.log('calling'); const result = await resolveAfter1Second(); - var layer = L.control.layers(null, overlays).addTo(map); //null is for no baselayer + var layer = L.control.layers(null, layers_by_field).addTo(map); //null is for no baselayer // placing layers controls on the dropdown menu var htmlObject = layer.getContainer(); // Returns the HTMLElement that contains the control. @@ -236,16 +243,20 @@ var callback = function (response) { function setParent(el, newParent){ // "unchilds" and gives new parent newParent.appendChild(el); - } + } + setParent(htmlObject, a); + + console.log(result); // expected output: 'resolved' } asyncCall(); + //connecting with dash lines the pages with connections var groups = []; diff --git a/style.css b/style.css index 5219fd3..7cdfd1e 100755 --- a/style.css +++ b/style.css @@ -435,7 +435,7 @@ svg.leaflet-image-layer.leaflet-interactive path { input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked { - display: none; + /*display: none;*/ } input[type="checkbox"]:not(:checked) {