Creating web geo applications with Angular and Leaflet

Simplify the creation of web applications using frameworks is a difficult goal to accomplish. In this course we will focus on Angular and how to develop web applications with geographic component (where a map is displayed and you can interact with it in different levels of data).

Every developer often has to write JavaScript code to initialize a map, or add many lines to perform simple tasks in the world geo. Besides all this mixes with the application code and gradually makes JavaScript development tiresome. Here comes Angular, where objects are actually reusable across applications; we will not initialize a display anymore and encapsulate the different data models between some parts of the application creating MVC applications where the model will become the natural way of working.


  1. Angular (4h)
    1. Introduction and basic concepts
    2. Initialization, data link and handlers
    3. Expressions and Forms
    4. Data Filters
    5. Areas
    6. Templates
    7. Directives
  2. Leaflet (Leaflet Angular Directive) (6h)
    1. Introduction: the Map
      1. Position
      2. Knowing the limits
      3. Limit
    2. Layers
    4. Mixing markers and layers
    5. Paths
    6. GeoJSON
    7. Events
  3. Application (2h)
    1. MVC
    2. Plugins Leaflet
    3. Exercises
Benefits for the students 
  • Web application development with geographic component with Angular and Leaflet and avoiding problems and difficulties of development in JavaScript.
To whom it is addressed 
  • Web application developers who want to incorporate geographic component to development process methodology and benefits of using Angular and Leaflet.
  • Students of Computer Science or Telecommunications who want to broaden their knowledge in this area.
  • Professionals, with minimal knowledge, interested to expand their theoretical and practical knowledge in the development of geo-applications with Angular and Leaflet.

Segueix-nos a

Els nostres articles del bloc d'inLab FIB


inLab FIB incorporates esCert


First LogoCSIRT Logo

inLab is member of

inLab és centre TECNIO