Use zoom to calculate line width.

src/demo/map_demo_v2.ts

@@ -91,6 +91,7 @@ export function renderMap() {
     maxZoom: 15,
     layers: {
       water: [95, 200, 255, 255],
+      globallandcover: [173, 226, 167, 255],
       landcover: [173, 226, 167, 255],
       park: [202, 255, 193, 255],
       building: [222, 215, 211, 255],

src/map_v2/camera/map_camera.ts

@@ -133,12 +133,12 @@ export class MapCamera {
   private updateProjectionMatrix() {
     // update camera matrix
     const zoomScale = 1 / Math.pow(2, this.zoom); // inverted
-    const widthScale = this.tileSize / this.width;
-    const heightScale = this.tileSize / this.height;
+    const tileWidthScale = this.tileSize / this.width;
+    const tileHeightScale = this.tileSize / this.height;
 
     const cameraMat = mat3.create();
     mat3.translate(cameraMat, cameraMat, [this.x, this.y]);
-    mat3.scale(cameraMat, cameraMat, [zoomScale / widthScale, zoomScale / heightScale]);
+    mat3.scale(cameraMat, cameraMat, [zoomScale / tileWidthScale, zoomScale / tileHeightScale]);
     mat3.rotate(cameraMat, cameraMat, (Math.PI / 180) * this.rotationInDegree);
 
     // update view projection matrix

src/map_v2/map.ts

@@ -305,9 +305,10 @@ export class GlideV2Map extends Evented<MapEventType> {
     }
 
     const tiles = this.tilesGrid.getCurrentViewTiles();
+    const zoom = this.getZoom();
     const projectionMatrix = this.camera.getProjectionMatrix();
 
-    this.renderer.render(tiles, projectionMatrix, this.mapOptions);
+    this.renderer.render(tiles, zoom, projectionMatrix, this.mapOptions);
 
     this.statsWidget.style.display = 'none';
 

src/map_v2/renderer/renderer.ts

@@ -13,5 +13,5 @@ export interface Renderer {
 
   resize(width: number, height: number): void;
 
-  render(tiles: MapTile[], matrix: mat3, mapStyles: MapStyles): void;
+  render(tiles: MapTile[], zoom: number, matrix: mat3, mapStyles: MapStyles): void;
 }

src/map_v2/renderer/webgl/webgl_renderer.ts

@@ -1,8 +1,8 @@
-import { mat3, vec2, vec4 } from 'gl-matrix';
+import { mat3, vec4 } from 'gl-matrix';
 import { addExtensionsToContext } from 'twgl.js';
 import { Renderer, MapStyles } from '../renderer';
-import { MapTileFeatureType } from '../../tile/tile';
-import { PbfMapTile, PbfTileLayer } from '../../tile/pbf/pbf_tile';
+import { MapTile, MapTileFeatureType } from '../../tile/tile';
+import { PbfTileLayer } from '../../tile/pbf/pbf_tile';
 import { WebGlProgram, ExtendedWebGLRenderingContext } from './programs/program';
 import { PolygonProgram } from './programs/polygon_program';
 import { LineProgram } from './programs/line_program';
@@ -67,7 +67,7 @@ export class WebGlRenderer implements Renderer {
     this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
   }
 
-  render(tiles: PbfMapTile[], matrix: mat3, styles: MapStyles) {
+  render(tiles: MapTile[], zoom: number, matrix: mat3, styles: MapStyles) {
     const gl = this.gl;
     let program;
     let globalUniformsSet = false;
@@ -99,7 +99,7 @@ export class WebGlRenderer implements Renderer {
             program.setMatrix(matrix);
             program.setColor(color);
             if (feature.type === MapTileFeatureType.line) {
-              (program as LineProgram).setLineWidth(0.0000003);
+              (program as LineProgram).setLineWidth(0.003 / Math.pow(2, zoom));
             }
           }