How To Build Maps in Angular with Leaflet, Part 1: Generating Maps

Learn how to build dynamic and stylish maps in Angular using Leaflet.

Leaflet is a JavaScript library for creating maps. It comes packed with nice features and is extremely mobile-friendly.

Note: This is Part 1 of a 4-part series on using Angular and Leaflet.

You can use this library to display a map that supports zooming in and out and panning with click and drag.

In this tutorial, you will learn how to integrate Leaflet into an Angular app.

#angular #leaflet #javascript #google-maps

What is GEEK

Buddha Community

How To Build Maps in Angular with Leaflet, Part 1: Generating Maps

Learn how to build dynamic and stylish maps in Angular using Leaflet.

Leaflet is a JavaScript library for creating maps. It comes packed with nice features and is extremely mobile-friendly.

Note: This is Part 1 of a 4-part series on using Angular and Leaflet.

You can use this library to display a map that supports zooming in and out and panning with click and drag.

In this tutorial, you will learn how to integrate Leaflet into an Angular app.

#angular #leaflet #javascript #google-maps

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

• When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
• When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
• When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular

Leaflet and Angular = Maps Apps (Part 1)

Leaflet is an awesome JavaScript library for creating maps. It comes packed with nice features and is extremely mobile-friendly. Let’s see how we can integrate Leaflet into our Angular app.

Setup

Before we begin, let’s first create a project using Angular CLI Schematics:

$ ng new leaflet-example

For this tutorial I’ll be using SCSS as my stylesheet syntax, but you can choose your favorite flavor.

Once the CLI has finished generating the project, open up your package.json file and add the following dependency and run npm install:

package.json

"leaflet": "1.5.1"

(At the time of writing this, the latest version of leaflet is 1.5.1)

Let’s add a map component that will serve as our leaflet map container. Navigate to src/app and type:

$ ng generate component map

We’re going to be building a few services as well so create a folder for that called _services in your app folder.

Ignoring the generated files, our directory structure should now have at least:

leaflet-example
|_ node_modules/
|_ package.json
\_ src/
    \_ app/
        |_ app.module.ts
        |_ app.routing.ts
        |_ app.component.ts
        |_ app.component.html
        |_ app.component.scss
        |
        |_ map/
        |     |_ map.component.ts
        |     |_ map.component.html
        |     \_ map.component.scss
        |
        \_ _services/

Open up app.component.html, and replace everything inside it with our new component:

app.component.html

<app-map></app-map>

Generating the Map

Let’s first create a full-size map by constructing a simple skeleton:

map.component.html

<div class="map-container">
  <div class="map-frame">
    <div id="map"></div>
  </div>
</div>

map.component.scss

.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 30px;
}

.map-frame {
  border: 2px solid black;
  height: 100%;
}

#map {
  height: 100%;
}

We first have our outermost div that will position the map in the DOM, and then the innermost div will be the target for Leaflet’s script injection to produce the map. The id that we give it will be passed as an argument when we construct our Leaflet map.

OK, the boring part’s done. Now we can start using Leaflet and construct our map.

Open up map.component.ts and import the Leaflet package:

import * as L from 'leaflet';

We’ll also declare a variable for our map object, (creatively called map), and assign it as a new leaflet map object.

Note that the map div needs to already exist on the DOM before we can reference it to create our map. So, we put this in the AfterViewInit lifecycle hook. Extend your component to implement AfterViewInit and add the ngAfterViewInit() function to your component.

Our component should now look like this:

import { AfterViewInit, Component } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements AfterViewInit {
  private map;

  constructor() { }

  ngAfterViewInit(): void {
  }
}

Looking good so far! Let’s create a separate private function called initMap() to isolate all the map initialization. We can then call it from ngAfterViewInit.

In this function, we need to create a new Leaflet map object, and the API allows us to define some options in it as well. Let’s start off simple and set the center of the map and starting zoom value.

I want to center our map on the continental United States, and according to Wikipedia the center is located at 39.828175°N 98.579500°W.

The decimal coordinate system Leaflet uses assumes that anything to the west of the prime meridian will be a negative number, so our actual center coordinates will be [ 39.8282 -98.5795 ].

If we use a default zoom level as 3, then we can create our map, as:

private initMap(): void {
  this.map = L.map('map', {
    center: [ 39.8282, -98.5795 ],
    zoom: 3
  });
}

Note the value passed into the map function 'map' is referring to the id of the div where our map will be injected.

Run npm start and navigate to http://localhost:4200 to see your shiny new map!

…Whoops, maybe not. Why? Well, we created our map object but we didn’t populate it with anything. With Leaflet, we visualize data as Layers. The kind of data you think of when you picture a map are called “tiles”. In brief, we create a new tile layer and add it to our map.

We first create a new tile layer which we must first pass a tile server URL. There are many tile server providers out there, but I personally like using the OpenStreetMap tile server.

As with creating the map object, we can pass in a parameters object. Let’s go with setting the max zoom to 18, the min zoom to 3, and the attribution for the tiles. We cap it off by adding the tile layer to the map:

const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

tiles.addTo(this.map);

Let’s now take a look at our browser and see how our map it coming along:

Well this is progress, at least. But why are the tiles so garbled? One thing we need to do when we include the Leaflet package into our project is to also include the Leaflet stylesheet into the build. There are several ways we can do this, but my personal favorite (if you’re using SCSS, that is) is to simply import it into your root styles.scss file.

styles.scss

/* You can add global styles to this file, and also import other style files */
@import "~leaflet/dist/leaflet.css";

If you’re currently running npm start you will need to stop the process and restart so it refreshes the base stylesheet. Take a final look at the browser:

Looking good! You now have a map that you can drag around and zoom.

In the next tutorial, I will show you how to add data and render it on top of your map.

#leaflet #angular #maps

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

1. Installing Node.js and npm
2. Installing Angular CLI
3. Creating workspace
4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

• Node.js
• npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

1. npm -v

Installing Angular CLI

• Open Terminal/Command Prompt
• To install Angular CLI, run the below command:

1. npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

• Using CLI
• Using Visual Studio Code

1. Using CLI

To create a workspace:

• Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
• Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

1. Ng new YourAppName

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

How To Build Maps in Angular with Leaflet, Part 2: The Marker Service

Learn how to build Maps in Angular with Leaflet, learn how to add markers to your map using a service to manage the marker logic.

Leaflet supports markers. These are indicators placed on the map that can contain information. This provides a way to highlight landmarks and destinations on a map.

Note: This is Part 2 of a 4-part series on using Angular and Leaflet.

In this tutorial, you will learn how to add markers to your map using a service to manage the marker logic.

#angular #leaflet #javascript