webgl-map's Introduction

webgl-map

Note: this repo is for learning purposes only, and not intended for production use

See Demo

This repo contains the code that accompanies the Build a WebGL Vector Map tutorial.

It's pirmarily used as an exercise in learning WebGL and rendering Vector Tiles. Any comments or suggestions are more than welcome 😄

Usage

To use, a map can be instantiated with the id of the div to render to.

const map = new WebGLMap({
  id: 'myCanvasId',
  tileServerURL: 'https://maps.ckochis.com/data/v3/{z}/{x}/{y}.pbf',
  width: 800,
  height: 600,
  center: [-73.9834558, 40.6932723]
  minZoom: 4,
  maxZoom: 18,
  zoom: 13,
  debug: true,
  layers: {
    water: [180, 240, 250, 255],
    landcover: [202, 246, 193, 255],
    park: [202, 255, 193, 255],
    building: [185, 175, 139, 191],
  }
});

The other requrement is a URL to a tile server that uses the Mapbox Vector Tile Specification.

// example
"https://maps.ckochis.com/data/v3/{z}/{x}/{y}.pbf"

You will also need to specify the layers to render, along with an RBG value. The demo is using the OpenMapTiles scehma.

webgl-map's People

Contributors

Stargazers

Watchers

webgl-map's Issues

Rendering lines and text

Will there be a part 2 & 3 where you talk about adding line work and text?

Disappearing Island

At certain zoom level, several islands are disappeared.

Maybe also related with this issue?

maptiler/tileserver-gl#598

issue with pan/zoom mobile interactions on iOS?

Hey there!

I left this comment on Hacker News.

I've started to dig into it a tad more:

simply testing the example on Hammer's homepage on mobile (I'm using Safari 15.6 on iOS 15.6.1) does work. Panning works correctly. Pinch to zoom works correctly, although because rotation is also implemented in their example, there's a little bit of a feeling-of-a-glitch when pressing down with two fingers. I think that without rotation detection it would be completely correct.
after testing your examples one by one, I see that reproducing the panning issue (e.g. where moving your finger to pan moves the map by an amount that seems to be multiplied by some factor -- giving a "sped up panning" effect) is actually not easy. Some of the initial examples pan correctly, but then, out of the blue, one of the examples will show the "super pan" behaviour. If I reload the page, the same example that didn't work will start working... but if I pan more examples, at some point, one of them will start panning incorrectly
the zoom gesture definitely does not work, even after reloading the page (i.e. it reproduces immediately)

Recommend Projects