Why VC Firms are Investing in Super Voting Nodes

The Huobi Super Nodes are reputable investment institutions with the main responsibility of assisting Huobi Autonomous Digital Asset Exchange (HADAX) in making professional reviews and voting on…

独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Integrating Maps into your Angular Application with Leaflet

Integrating Leaflet Map into Angular version 8

Before starting the deconstruction, point your friendly, neighborhood browser to the following Github.

Now, you can follow along or fork the project and use it as a base for your own applications.

Background

Angular Setup

Very little needs to be done after the ubiquitous npm install. Necessary Leaflet styles are made available through the angular.json file,

I’ve had mixed results with @types/leaflet, so this application does not exploit typings for sake of simplicity. Leaflet and ESRI tiles are imported as shown below,

A Leaflet Map, for example, is temporarily typed as any; feel free to firm up typings as an exercise after you have deconstructed the tutorial.

A coordinate is a two-dimensional point on a map, represented by latitude and longitude. An InjectionToken for a coordinate may be created as illustrated in the /src/app/tokens.ts file,

This moves the definition of the map center to the highest level in the Angular application (where it is easily seen and almost self-documenting).

Map Component

The application covered in this article displays a fixed-height map with a width that extends across the entire browser window. The map redraws as the window resizes. Some markers are also rendered on top of the map tiles.

The map is integrated into the application through the main app component’s template, as shown below

/src/app/app.component.html

and the map component’s source code is found in /src/app/maps/map.component.ts .

The map is rendered into a container (DIV) that is currently in the map component’s template,

/src/app/maps/map.component.html

If the width and height of the containing DIV are fixed, then map tiles can be rendered at an early point in the component lifecycle. Two approaches are possible for passing variable width and height, outside-in and inside-out. The outside-in method defines Angular Inputs for width and height. The parent component is responsible for communicating width and height to the map component. The inside-out approach defines width and height internal to the map component and ‘passes’ that information to its template. Most applications use the outside-in approach. This tutorial employs the inside-out method for purposes of illustration. Modify the code to change the passing of width and height as an exercise.

Variable width and height introduce some subtle issues relative to map rendering. It is tempting to perform everything related to Leaflet setup in the on-init handler, and this typically works with fixed width and height. Since map width varies with browser size in this tutorial, it is better to separate the map initialization process between the on-init and after-view-init lifecycle handlers. This is illustrated in the following code segments from /src/app/maps/map.component.ts .

First, the identification of a containing DIV for map initialization is offloaded to a ViewChild,

Most of the map setup is performed in ngOnInit,

Invalidating the map size is deferred to ngAfterViewInit, when the full width and height necessary for the map tiles to work is available. The map variable refers to the Leaflet Map created in the ngOnInit handler.

Note that the update map size handler recomputes the class currentWidth and currentHeight variables, which are bound to the DIV styles that control the width and height of the map DIV. Leaflet uses that width/height information to re-tile and re-render the map.

Since map width/height definition and resizing the map with window changes are handled internal to the map component, a simple window-resize handler is added.

This could also be handled by an outside service, run outside Angular, and debounced. If there is sufficient interest, I will provide a tutorial that illustrates the technique.

Map Controls

Refer to /src/app/maps/map.component.scss for relevant styling.

Beware the z-index

If tiling or some other aspect of map display does not appear to work, it may be an issue with z-index. In the past, I’ve had to re-map z-indices simply from changing tile providers or even migrating from Angular 7 to Angular 8!

Map Markers

Markers with known coordinates may be added to a map. Define the coordinates and then create a Leaflet Icon for each one. Marker coordinates for this tutorial are defined in the main app component,

/src/app/app.component.ts

and are passed as an Angular Input to the Map Component,

/src/app/app.component.html

Markers are rendered in the map component,

/src/app/maps/map.component.ts

Interactivity

A couple handlers for basic map interactivity have been added for you, namely mouse-click and mouse-move. The latter updates the current map position (lat/long) based on the mouse position.

/src/app/maps/map.component.ts

The string reflecting the current position is displayed in the map component’s template,

/src/app/maps/map.component.html

The Result

Build the application and you should observe something similar to this screenshot,

Move the mouse over the map to observe updates of the mouse position in map coordinates.

I hope this gets you started on working with Angular and Leaflet. These two applications work very well together and there is near-limitless potential for highly interactive, engaging maps.

Good luck with your Angular efforts!

Why VC Firms are Investing in Super Voting Nodes

Integrating Maps into your Angular Application with Leaflet

Add a comment

Related posts:

Outdoor Session

The Dual Struggle

The times BoJack Horseman got too real