ACTIVITY:

“LEAFLET API”

ACTIVDAD PARA OBTENER EL TÍTULO DE:

TÉCNICO SUPERIOR UNIVERSITARIO EN
TECNOLOGÍAS DE LA INFORMACIÓN
ÁREA DESARROLLO DE SOFTWARE
MULTIPLATAFORMA

PRESENTA:

CARLOS ENRIQUE GONGORA ESCALONA

CD. REYNOSA, TAMAULIPAS MAYO 2024.

Index

Topic Page

Index of Figures.................................................................... ii

Introduction ......................................................................... 1

Requirements ....................................................................... 2

App Creation ......................................................................... 3

Directory Creation ......................................................................................... 3
Map Creation................................................................................................. 5
Markers, Circles and Polygons ........................................................................ 8
Polygon ........................................................................................................ 8
Circle ............................................................................................................ 9
Marker .......................................................................................................... 9
Result ......................................................................................................... 10

i
Index of Figures

Figure Page

Figure 1 My Pin .............................................................................................1

Figure 2 Directory Creation ............................................................................3
Figure 3 Platforms .........................................................................................3
Figure 4 Libraries Installation .........................................................................4
Figure 5 Leaflet Installation ............................................................................4
Figure 6 Bootstrap Importation.......................................................................4
Figure 7 Organization of the directories ..........................................................5
Figure 8 Link Stylesheets and Scripts ..............................................................5
Figure 9 Content-Security-Policy Remove ........................................................5
Figure 10 Map <div> Creation........................................................................6
Figure 11 Map <div> CSS ..............................................................................6
Figure 12 SetView Code .................................................................................6
Figure 13 TileLayer Code ...............................................................................6
Figure 14 Set UTTN Coordinates to the Script..................................................7
Figure 15 Add Tile Layer to the Map ...............................................................7
Figure 16 Include Script .................................................................................7
Figure 17 Leaflet Map ....................................................................................8
Figure 18 Polygon Script ................................................................................8
Figure 19 Circle Script ....................................................................................9
Figure 20 Marker Script ..................................................................................9
Figure 21 Final Result .................................................................................. 10

ii
Introduction

In the realm of web mapping and interactive applications, developers frequently

grapple with the challenge of seamlessly integrating dynamic and user-friendly
maps into their projects. Leaflet, a leading open-source JavaScript library,
emerges as the beacon of simplicity and efficiency in this landscape. Weighing a
mere 42 KB of JavaScript, Leaflet encompasses a robust set of mapping features,
catering to the diverse needs of developers across major desktop and mobile
platforms.

The primary objective of this activity is to guide through the installation process
and demonstrate the creation of a pinpoint location on the campus of
“Universidad Tecnológica de Tamaulipas Norte”.

Figure 1 My Pin

1
Requirements

For the development of the application, make sure to have the following essential
elements installed on your system:

• Visual Studio Code

• NodeJS
• Apache Cordova

2
App Creation

Follow the steps below to set up a project, integrate essential libraries and create
an interactive map that enhances the application's functionality.

Directory Creation

Commence the project by creating a directory through Visual Studio and Apache
Cordova. Execute the command "Cordova create leaftlet_API" in the terminal to
establish the project framework.

Figure 2 Directory Creation

Navigate to the project directory with "cd leaflet_API" and enhance platform
compatibility by adding the browser and Android platforms.

Figure 3 Platforms

3
Install essential libraries seamlessly by running npm commands. Use "npm install
jquery" and "npm install bootstrap" to add jQuery and Bootstrap to the project.

Figure 4 Libraries Installation

Incorporate Leaflet's map functionality by running "npm install leaflet". By adding

the Leaflet library to the project, it facilitates seamless map integration.

Figure 5 Leaflet Installation

Optimize the project structure by relocating the "bootstrap" directory into the
"css" directory. Import it into the "init.css" file.

Figure 6 Bootstrap Importation

Organize JavaScript dependencies by moving the "jquery" and "leaflet" directories

into the "js" directory.

4
 Figure 7 Organization of the directories

Map Creation

Open the "index.html" file located in "www" directory and ensure that the Leaflet,
jQuery, and CSS files are properly linked to guarantee the correct functionality of
the application.

Figure 8 Link Stylesheets and Scripts

Remove the line containing "Content-Security-Policy" from the HTML file.

Figure 9 Content-Security-Policy Remove

Add a new <div> element with the id "map" inside the main "app" <div> in the
HTML file.

5
 Figure 10 Map <div> Creation

In the CSS file, set specific height and width constraints for the map to ensure
proper styling.

Figure 11 Map <div> CSS

Create a new JavaScript file and copy the following scripts into it.

Figure 12 SetView Code

Figure 13 TileLayer Code

6
Initialize the map by setting its view to the geographical coordinates of
“Universidad Tecnológica de Tamaulipas Norte” and configuring an appropriate
zoom level.

Figure 14 Set UTTN Coordinates to the Script

Adds a tile layer to the map, in this case it is an OpenStreetMap tile layer.

Figure 15 Add Tile Layer to the Map

Include the JavaScript file in the "index.html" after adding the Leaflet.js library
and defining the <div>. This order ensures that the script executes after loading
dependencies and structural elements, ensuring proper functionality.

Figure 16 Include Script

The Leaflet map should now be working.

7
 Figure 17 Leaflet Map

Markers, Circles and Polygons

In addition to tile layers, other things can be easily added to the map, such as
markers, polylines, polygons, circles, and pop-ups.

Polygon

Define the area covered by the “Universidad Tecnológica de Tamaulipas Norte”

using a polygon. To create the polygon, identify vertices shaping the area.
Express the coordinates of each vertex within brackets, concluding the sequence
by connecting back to the initial vertex. Include a pop-up with the label
"Universidad Tecnológica de Tamaulipas Norte."

Figure 18 Polygon Script

8
Circle

Establish the "Reunion Point" with a circle. Construct the circle by specifying
center coordinates and customizing its appearance. Provide the center
coordinates within brackets and adjust attributes like color, fill, opacity, and radius
for the desired visual effect. Include a pop-up describing the purpose of the circle
as the "Reunion Point."

Figure 19 Circle Script

Marker

Locate the current classroom position with a marker. Markers, being fixed images,
can't be modified directly. Pinpoint the classroom on the map by specifying its
coordinates. Display the classroom number with a popup.

Figure 20 Marker Script

9
Result

If all instructions have been followed correctly, the map should look like this:

Figure 21 Final Result

10