Hugging Face's logo

Spaces:
malteos
/
emnlp2022-papers
Running

App Files Community
malteos commited on
Commit
abb8a87
·
1 Parent(s): ce2a8f2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +92 -23
index.html CHANGED
@@ -1,24 +1,93 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>
13
- You can modify this app directly by editing <i>index.html</i> in the
14
- Files and versions tab.
15
- </p>
16
- <p>
17
- Also don't forget to check the
18
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank"
19
- >Spaces documentation</a
20
- >.
21
- </p>
22
- </div>
23
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </html>
 
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
+ <html xmlns="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <title></title>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
7
+ <link rel="stylesheet" href="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.css" />
8
+ <link rel="stylesheet" href="./style.css" />
9
+ <meta charset="utf-8" />
10
+ <meta name="viewport" content="width=device-width" />
11
+ </head>
12
+
13
+ <body>
14
+
15
+ <h1>Some 2022 Papers</h4>
16
+ <div id="post-it">
17
+ <b>Search values:</b><br />
18
+ aquamarine, black, blue, cyan, darkblue, darkred, darkgray, dodgerblue, gray, green, red, skyblue, yellow, white ...
19
+ </div>
20
+
21
+ <div id="map"></div>
22
+
23
+
24
+
25
+ <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
26
+ <script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script>
27
+ <script>
28
+
29
+ //sample data values for populate map
30
+ var data = [
31
+ {"loc":[41.575330,13.102411], "title":"aquamarine"},
32
+ {"loc":[41.575730,13.002411], "title":"black"},
33
+ {"loc":[41.807149,13.162994], "title":"blue"},
34
+ {"loc":[41.507149,13.172994], "title":"chocolate"},
35
+ {"loc":[41.847149,14.132994], "title":"coral"},
36
+ {"loc":[41.219190,13.062145], "title":"cyan"},
37
+ {"loc":[41.344190,13.242145], "title":"darkblue"},
38
+ {"loc":[41.679190,13.122145], "title":"Darkred"},
39
+ {"loc":[41.329190,13.192145], "title":"Darkgray"},
40
+ {"loc":[41.379290,13.122545], "title":"dodgerblue"},
41
+ {"loc":[41.409190,13.362145], "title":"gray"},
42
+ {"loc":[41.794008,12.583884], "title":"green"},
43
+ {"loc":[41.805008,12.982884], "title":"greenyellow"},
44
+ {"loc":[41.536175,13.273590], "title":"red"},
45
+ {"loc":[41.516175,13.373590], "title":"rosybrown"},
46
+ {"loc":[41.506175,13.273590], "title":"royalblue"},
47
+ {"loc":[41.836175,13.673590], "title":"salmon"},
48
+ {"loc":[41.796175,13.570590], "title":"seagreen"},
49
+ {"loc":[41.436175,13.573590], "title":"seashell"},
50
+ {"loc":[41.336175,13.973590], "title":"silver"},
51
+ {"loc":[41.236175,13.273590], "title":"skyblue"},
52
+ {"loc":[41.546175,13.473590], "title":"yellow"},
53
+ {"loc":[41.239190,13.032145], "title":"white"}
54
+ ];
55
+
56
+ var map = new L.Map('map', {zoom: 9, center: new L.latLng(data[0].loc) }); //set center from first location
57
+
58
+ // map.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer
59
+
60
+ var markersLayer = new L.LayerGroup(); //layer contain searched elements
61
+
62
+ map.addLayer(markersLayer);
63
+
64
+ var controlSearch = new L.Control.Search({
65
+ position:'topright',
66
+ layer: markersLayer,
67
+ initial: false,
68
+ zoom: 12,
69
+ marker: false
70
+ });
71
+
72
+ map.addControl( controlSearch );
73
+
74
+ ////////////populate map with markers from sample data
75
+ for(i in data) {
76
+ var title = data[i].title, //value searched
77
+ loc = data[i].loc, //position found
78
+ abstract = 'This is an abstract',
79
+ track = 'NLP Applications',
80
+ url = 'https://'
81
+
82
+ trackLabel = track.replace(' ', '-')
83
+ // circleMarker, Marker
84
+ marker = new L.circleMarker(new L.latLng(loc), {title: title, radius: 5, className: 'label-' + trackLabel} );//se property searched
85
+ marker.bindPopup('<b><a href="'+ url + '">' + title + '</a></b> (' + track + '):<br />' + abstract );
86
+
87
+ markersLayer.addLayer(marker);
88
+ }
89
+
90
+ </script>
91
+
92
+ </body>
93
  </html>