-
Notifications
You must be signed in to change notification settings - Fork 0
/
Documentation.html
321 lines (257 loc) · 27 KB
/
Documentation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Documentation</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/icons8-fairytale-24.png" rel="icon">
<link href="assets/img/icons8-fairytale-24.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<!--leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="leaflet/leaflet.js"></script>
<!-- Template Main CSS File -->
<link href="css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: iPortfolio - v3.9.1
* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
<style>
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
<!-- ======= Header ======= -->
<header id="header">
<div class="d-flex flex-column">
<div class="profile">
<h1 class="text-light"><a href="index.html">InFabula</a></h1>
</div>
<nav id="navbar" class="nav-menu navbar">
<ul>
<li><a href="index.html" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
<li><a href="SDedition.html" class="nav-link"><i class="bx bx-file-blank"></i> <span>Digital Edition</span></a></li>
<li><a href="NetAnal.html" class="nav-link"><i class="bx bx-book-content"></i> <span>Network analysis</span></a></li>
<li><a href="SpaAnalysis.html" class="nav-link"><i class="bx bx-server"></i> <span>Spatial analysis</span></a></li>
<li><a href="Documentation.html" class="nav-link "><i class="bx bx-envelope"></i> <span>Documentation</span></a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<main id="main">
<!-- ======= Breadcrumbs ======= -->
<section class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>Documentation</h2>
<ol>
<li><a href="index.html">Home</a></li>
<li> Documentation</li>
</ol>
</div>
</div>
</section><!-- End Breadcrumbs -->
<section class="inner-page">
<div class="textsection" id="documentation">
<h2>Documentation of the Project</h2>
<div id="indexdoc">
<ol>
<li><a href="#projintro">Our Idea</a></li>
<li><a href="#workflow">Workflow</a></li>
<ol>
<li><a href="#digitaledition">Digital Edition</a></li>
<li><a href="#spatialanalysis">Spatial analysis</a></li>
<li><a href="#networkanalysis">Network Analysis</a></li>
<ol>
<li><a href="#networkanalysisintro">Introduction</a></li>
<li><a href="#data"> Organizing Data</a></li>
<li><a href="#graphs">Mapping Folklore</a></li>
</ol>
</ol>
<li><a href="#remarks">Results and Final Remarks</a></li>
<li><a href="#bibliography">Bibliography</a></li>
</ol>
</div>
<div id="projintro">
<h3>1. Our idea</h3>
<p>InFabula’s origins are directly rooted in Fiabe Italiane di Italo Calvino, an anthology of tradition Italian fables written and translated in a simpler form by Italo Calvino in 1956. This collection aims to regroup centuries of oral and written stories into an organized and contemporary structure, dividing them by region and enriching them with critical notes and annotation of linguistic and cultural content. </p>
<p>Calvino rewrote the fables basing its work on their original source, such as the Le piacevoli notti by Francesco Straparola (Venice, 1550) and Lo Cunto de li Cunti by Giambattista Basile (Naples, 1636); other fables have been provided to Calvino trough the transcription of regional oral stories, then redacted by the author in a national language accessible to everyone.</p>
<p> To this day, Calvino’s work is unmatched: Fiabe Italiane represents the only Italian literary instance containing examples of folklore coming from the entire peninsula. The effect created by this co-existence is unique: while reading, it’s possible to identify patterns between regional traditions and stories of European matrix, but it’s also possible to follow a sort of trace among the Italian fables themselves. </p>
<p>Our team wanted to design a model capable of navigating trough this enormous variety of characters, situations, rites and patterns. It’s not a ground-breaking concept, since it’s possible to find similar projects online: what distinguishes InFabula from other examples, in our opinion, is how we decided to explore this sea of possibilities. </p>
<p>Roles and archetypes play a key point in our project, since they’re our compass, so to say: every character in Fiabe Italiane has been coded to be distinguishable by their name, the role they play in the story, and by their archetype, and because of this, each one of them is connected to other individuals sharing their same attributes. </p>
<p>To better explain, every Princess with the role “protagonist” and the archetype “lover” is linked to another one of the same type, and every “helper” interacting with them is therefore compared according to their nature and actions: for example, we could ask ourselves, who is the perfect helper (and with this we mean, the most common) in an Italian fable? And what does this say about our culture and our remotest mindset? We’ll delve into this in the dedicated section, exploring both the technical and the practical segments of our project, but for now let’s keep this in mind: this is a digital edition and an example for network analyses of literary characters (in this case, interpreted by their role and archetype), which has the aim to represent a wider point of view, a regional and national one, if not, on the long run, a European one. </p>
</div>
<div id="workflow">
<h3>2. Workflow</h3>
<h2>Roles and Archetypes in “InFabula” </h2>
<p>Our characters’ classification is based on two main sources. The first one is related to the traditional roles in fables, as analysed and explained by Vladimir Propp in his essay Morphology of Fables: Propp indicates a set of recurrent characters’ types in all the legends, myths, and fables of modern cultures; he divided them into categories that all of us are familiar with, such as: </p>
<p>-<strong>The Villain</strong>, the main opposing force </p>
<p>-<strong>The Protagonist</strong>, the main acting force </p>
<p>-<strong>The Dispatcher</strong>, the quests giver </p>
<p>-<strong>The Helper</strong>, who can also be called a “donor”, a figure that through magic or common sense guides the protagonist </p>
<p>-<strong>The Prize</strong>, is the ultimate aim for our protagonist (in our analysis, usually a loved one, a princess or a prince) </p>
<p>-<strong>The Trickster</strong> </p>
<p>The last one, the role “Trickster”, has been added by us: it is traditionally related to our second source, but we thought that it could perfectly embody a character that moves the plot by scheming and deceiving those around them without really sticking out as a villain or a helper. </p>
<p>Propp also delves into specifying two additional types of characters, an ulterior definition of the “fake hero” (the antagonist posing himself after the protagonist, aiming to steal his success or to marry the princess) and the sso-called “Her father” (who follows the same actions of the dispatcher, while also being the father of the prized love interest). </p>
<p>We decided to just focus on the one listed above this paragraph since we specified the inner nature of the characters with the additional attribute “subtype”, the archetype. </p>
<p>The source for our archetypes comes, instead, from psychology: Carl Jung defined them as “universal and primal symbols” of our “collective unconscious”, a concept extremely close to the one exemplified by Propp’s work. Jung’s analysis goes well beyond our classification: he describes 12 different types, yes, but he also focuses on sexuality, gender identity, and the subconscious, something that could have been more than interesting to incorporate into our analysis, but not immediately essential. </p>
<p>Therefore, we selected and re-elaborated some of his archetypes, while keeping their core intact. They represent the character’s personality and attitude throughout the narration, as interpreted by us: </p>
<ul>
<li><strong>The Hero</strong>, a courageous and righteous character, sometimes too impulsive for their good </li>
<li><strong>The Caregiver</strong>, a caring and protective figure, could turn into a cruel and controlling villain </li>
<li><strong>The Sovereign</strong>, an authority figure, is usually capable of changing the plot with a single action </li>
<li><strong>The Creator</strong>, is a character that uses their wits and creativity to achieve success or plan someone else’s demise </li>
<li><strong>The Innocent</strong>, a naif character, moved by curiosity, inexperience, or just silliness </li>
<li><strong>The Sage</strong>, wise and intelligent, someone that puts knowledge above anything else </li>
<li><strong>The Rebel</strong>, a complex figure, who aims to destroy order for personal reasons or to achieve their goals without following the rules </li>
<li><strong>The Jester</strong>, similar to the Creator, but characterized by the ultimate desire of just having fun or getting what they want while doing the bare minimum </li>
<li><strong>The Lover</strong>, describing a character moved by their emotions: the Lover will try to follow their dreams in any way possible, even if they’re motivated by jealousy, love, desire, or malice </li>
<li><strong>The Magician</strong>, similar to the Sage, but characterized by a mysterious and eccentric aura </li>
</ul>
<p><br></p>
<p>In the tag “subtype”, we also specified the nature of certain characters, such as “monster” (used for any humanoid creature with strange and horrific traits, such as orcs, giants, and so on), “object” (applied to talking or magical instruments and items), “animal” (used for talking or magical beasts, and also for human characters turned into animals) and “element” (a generic subtype that we applied to humanized weather conditions or landscape’s location of interest, like winds, rivers, and so on).</p>
</div>
<div id="digitaledition">
<h4>2.1 Digital Edition</h4>
<p>We approached a digitised version of Fiabe Italiane, in a classic <code>.txt format</code> , and the first step was transferring the fables’ content in an <code>XML format</code>.</p>
<p>We decided to use <code>Oxygen</code> to work on our file, now called <code>Infabula.xml</code> , and then we proceeded with adding the tags and the attributes to our data: coding was completed alongside a complete reading of Calvino’s work, which necessary to integrate the correct attributes and therefore the correct values to assign to every character.</p>
<p>The document starts with the declaration of the namespaces and with the TEI declaration, followed by all the mandatory tags, and then with the content segment of Infabula.xml: the <code>text</code> tag, containing the <code>body</code> and dividing itself in <code>div</code> , the containing node for all our data.</p>
<p>Every div has an attribute called <code>XML:id</code> , which we used to differentiate, at least from an id point of view, every fable from one another. The outline of our project, therefore, looks like this:</p>
<img src="./assets/img/doc1.png" class="imgcenter">
<p>Inside every <code>div</code>, the structure is instead the following:
</p>
<img src="./assets/img/doc2.png" class="imgcenter">
<p>With the tag <code>head</code> , we identified the title of the fable, while with span and <code>placeName</code> we added the region or location of the provenance of it, to allow a spatial analysis later on. In the tag <code>p</code> , we find the element <code>persName</code> (referring to any character appearing in the narration) with its respective attributes: <code>type</code> contains the value representing the role we assigned to the character in question, <code>subtype</code> stands for its Jungian archetype or its most important characteristic (as explained before), while <code>source</code> creates a reference to the fable which the character belongs to, expressed in the <code>div</code> with the attribute <code>xml: id</code>.</p>
<div>Additional annotations in the XML document contain tags such as <code>note</code> , that we inserted for any critical commentary provided by Italo Calvino and for eventual linguistic analysis, <code>emph</code> , a stylistic and textual tag specifying the particular nature of a segment of text (a song, for example) and <code>addName</code> , related to the characters and expressing an alternative name for a specific individual.</div>
<br>
<h5>Organizing data: creating the CSV</h5>
<p>After finishing the first tagging process, we had to retrieve the characters’ roles and archetypes: this is the first step to obtaining sufficient material for an efficient network analysis. We didn’t yet possess any statistical indicator about our data, therefore it was essential to organize all the information in a readable form. </p>
<p>We chose to create a <code>.csv file</code> and a <code>.json file</code> to store our characters’ data. If obtaining a JSON file was easy (Oxygen provides a tool to do so with a click), we had to use Python and the Pandas library to generate a <code>CSV</code> table from our XML document. </p>
<p>Here we realized that our data was not correctly formatted for such a task: the structure shown before didn’t allow us to interpret<code> type</code>, <code>subtype</code> or <code>source</code> as if they were elements and, therefore, children nodes of the <code>persName</code> node; Python interpreted them as content inside of the node <code>persName</code>, and the csv resulted either incomplete or completely wrong (for example, incorrect types and subtypes would be assigned to different characters, so that a character with the type “protagonist” and the subtype “explorer” resulted as a “villain” “magician” in the <code>csv</code>). </p>
<p>At this point, we went trough these following steps: </p>
<ol start="1" type="1">
<li>We retrieved the <code>persName</code> content and attributes by using XQuery, on Oxygen, and then we asked XQuery to return a specific result, as shown here. </li>
<img src="./assets/img/doc3.png" class="imgcenter">
<p>We requested the character’s name to use as an <code>id</code>, a necessary element to better identify our character in the csv table. </p>
<p>What we obtained was something along these lines: </p>
<li><p><br>It was now time to generate our <code>CSV</code> table on Python. While keeping in mind what was necessary for the network analysis, we created three <code>CSV</code> files (a general one, containing all the <code>XML</code>elements; a nodes one, containing the elements to turn into nodes; an edges one, containing the future edges). </p></li>
<br>
<img src="./assets/img/doc4.png" class="imgcenter" style="padding: 20px;">
<img src="./assets/img/doc5.png" class="imgcenter" style="padding: 20px;">
<img src="./assets/img/doc6.png" class="imgcenter" style="padding: 20px;">
<p>In the Edges.csv we needed to identify the type of each character (Source) and the type of the character(s) they interacted with (Target): we did this by taking into consideration the fables that each character belonged to, and we grouped them accordingly; if this prerequisite was satisfied, they were then connected as a <code>Source</code> and its <code>Target</code>. </p>
<p>For this passage, we decided to unite the element <code>type</code> and <code>subtype</code> under one single tag (type), since otherwise, the code would have lacked efficiency: we could say that this happened as an afterthought, but it’s an easy solution applied for an essential technical segment of our project. </p>
<h5>The network analysis: mapping folklore </h5>
<p>We obtained a general network graph by importing our CSV tables on Gephi, an open-source visualization and exploration software. We opted for an undirected graph, that would sum all the common edges shared by the nodes’ network, and we discovered what we point out in the network analysis dedicated page. </p>
</ol>
</div>
<div id="#spatialanalysis">
<h4>2.2 Spatial Analysis</h4>
<p>In order to realize the spatial analysis we used the tool Leaflet, it is an open-source JavaScript library for mobile-friendly interactive map.</p>
<p>After setting up the map centered in order to show the whole of italy , we pin-pointed with the designated markers. the cities linked to the fables selected by Calvino. thanks to leaflet technologies we inserted popups in each marker, and by clicking on it the list of all the fables of that certain place appear.</p>
<p>Thank to this kind of visualization we are able to immediately envision the spatial distribution of Clavino's Fables in different regions. By looking at the map we get the sense that there is a stronger presence of fables in the area between Emilia Romagna and Toscana and in sicilia.</p>
</div>
<div id="networkanalysis">
<h4>2.3 Network Analysis</h4>
<p>We obtained a general network graph by importing our CSV tables on Gephi, an open-source visualization and exploration software. We opted for an undirected graph, that would sum all the common edges shared by the nodes’ network, and we discovered what we point out in the network analysis dedicated page. </p>
<img src="./assets/img/doc11all.jpeg" class="imgcenter">
<figcaption>The darker the line connecting the words, the more prevalent a connection between two nodes. </figcaption>
<p>To summarise our results, we can say that the graph containing the entirety of our data shows a specific pattern: an average Italian fable has a prevalence of realistic elements, such as demanding kings, helpful or avid citizens, and damsels in distress, respectively in the roles of the dispatcher or the villain, the helper or the villain and the prize. The protagonist is usually an explorer, an individual deeply fascinated with discovering the world and making a name for themselves, or an innocent, a unaware, and curious presence who stumbles into the story and in their main character’s role. </p>
<p>Even if this graph technically contains all the elements recurring in an average Italian fable (interestingly so, Italo Calvino proposes the first story of the anthology, “Giovannin Senza Paura”, as the representative fable for Italian folklore, and according to our model, it fits perfectly this definition) we asked ourselves if there were deeper differences according to the area the fables had been collected from. </p>
<p>To answer this question, we generated three new CSV tables, one for Northern Italy, one for Central Italy, and one for Southern Italy and the Isles. We did this by implementing the code already mentioned before, and by checking the region each fable comes from while dividing them into new XML documents (north.xml, center.xml, and south.xml); we then imported these new spreadsheets on Gephi. </p>
<p>We can affirm that there are some substantial differences, that could be explained broadly by the different cultures that influenced Italy in the course of history: if in the north, for example, the villain is either a sovereign or a magician, in the center they’re usually a lover and, in the south, a simple citizen; southern fables also differ from the others, because one of their most common protagonist is a trickster (a sly main character, used to deceiving and outsmart those stronger than them). </p>
<div class="row">
<div class="column">
<img src="./assets/img/doc8nord.jpeg" class="imgcenter" style="width:100%">
<figcaption>Northern fables (as a graph of types)</figcaption>
</div>
<div class="column">
<img src="./assets/img/doc9centro.jpeg" class="imgcenter" style="width:100%">
<figcaption>Central fables (as a graph of types)</figcaption> </div>
<div class="column">
<img src="./assets/img/doc10sud.jpeg" class="imgcenter" style="width:100%">
<figcaption>Southern fables (as a graph of types)</figcaption> </div>
</div>
<p>To visualize our graph we used the free, open-source web application <a href="https://ouestware.gitlab.io/retina/beta/#/"> Retina</a>, this tool allows you to embed your graph into a website. Users can filter nodes on their attributes. Retina tries to detect whether attributes represent quantitative, qualitative or textual information. Graph editors can select which fields can be used to filter or not for graph explorers, it also allows mapping node colors on node attributes (in a way inspired by Gephi), so that it can display a proper caption. </p>
<div id="remarks">
<h3>3. Results and Final Remarks</h3>
<p>InFabula demonstrates that it’s possible to map old folklore and myths to find new, meaningful connections: our model could be applied to any corpora of fables and stories, no matter the culture, and it could also be enriched, by analyzing, for example, the patterns among events, characters’ appearances or anthropological elements. </p>
<p>Most importantly, we managed to showcase what is the structure of an ancient Italian story, and we digitally proved Italo Calvino’s critical observations. </p> </div>
<div id="bibliography">
<h3>4. Bibliography</h3>
<ul>
<li><a href="https://umanisticadigitale.unibo.it/article/view/9091">- Daquino, M., Giovannetti, F., & Tomasi, F. (2019). Linked Data per le edizioni scientifiche digitali. Il workflow di pubblicazione dell’edizione semantica del quaderno di appunti di Paolo Bufalini. Umanistica Digitale, 3(7).</a></li>
<li><a href="https://books.openbookpublishers.com/10.11647/obp.0095.pdf">- Matthew James Driscoll, Elena Pierazzo. (2016). Digital Scholarly Editing
Theories and Practices</a></li>
<li><a href="https://www.digitalstudies.org/article/id/7357/">- El Khatib, R., & Schaeben, M. (2020). Why Map Literature? Geospatial Prototyping for Literary Studies and Digital Humanities. Digital Studies/le Champ Numérique, 10(1)</a></li>
<li><a href=" https://tei-c.org/">- Tei Documentation</a></li>
<li>- Moretti, F. (2005). Graphs, Maps, Trees: Abstract Models For A Literary History: Abstract Models for Literary History </li>
<li>- Propp, V. (1968). Morphology of the folktale. Austin :University of Texas Press</li>
<li>- Calvino, I. (1968) Fiabe italiane, Oscar Mondadori, Arnoldo Mondadori Editore</li>
<li>- Jung, C. G. (1959) The Archetypes and the Collective Unconscious</li>
</ul>
</div>
</div>
</section>
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>InFabula</span></strong>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/typed.js/typed.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="js/main.js"></script>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="js/Map.js"></script>
</body>
</html>