search

miridius / worldie

worldie.vercel.app
2 stars 1 forks source link

Visual issues with Leaflet (blurry while zooming etc.) #27

Open miridius opened 2 years ago

miridius commented 2 years ago

The map library we use, Leaflet.js, has a few visual issues that I'm not sure if it's possible to solve, such as:

  1. When flying to a country, the country outlines don't re-render during the animation and just use a CSS transform which is why they look all weird/blurry sometimes. This was a conscious decision by the leaflet authors so might be unavoidable
  2. Outline width is too wide when zoomed out... not sure if we can somehow make it dependent on zoom level (maybe just listen for zoom events and manually change all the line widths or something)
  3. Possibly other stuff that I've forgotten

The alternatives that I know of would be either to use mapbox-gl.js but not sure if that can be used forever for free, or use D3.js to render the GeoJSON data on a canvas but then we need to re-implement a TON of stuff around zooming, panning, input controls etc.

xariov commented 2 years ago

@miridius Consider looking at Maplibre GL. Maplibre is a fork of Mapbox GL before they went to a paid model. I don't think Mapbox GL is worth considering anymore as the free version isn't maintained and the paid version is expensive.

https://github.com/maplibre/maplibre-gl-js