A Lightweight 3D Globe With Dotted World Map Using WebGL

COBE is a lightweight (5 KB) WebGL Globe. The name “COBE” stands for Cosmic Background Explorer. Cobe is a WebGL library for creating a customizable, animated, 3D globe with a pixelated world map.

dotted world map generator, world map dotted svg, javascript world map visualization, d3 world map visualization, css world map, world map dotted svg

How to make use of it:

1. Import createGlobe from the package.

import createGlobe from 'cobe'

2. Create a 3D globe on the Canvas.

const globe = createGlobe(canvas, {
      devicePixelRatio: 3,
      width: 600,
      height: 600,
      phi: 1,
      theta: 0.41,
      dark: 1,
      diffuse: 1.63,
      mapSamples: 15000,
      mapBrightness: 6,
      baseColor: [0.3, 0.3, 0.3],
      markerColor: [1, 0.5, 1],
      glowColor: [1, 1, 1],
      markers: [ // add custom markers
        { location: [37.7595, -122.4367], size: 0.03 },
        { location: [40.7128, -74.006], size: 0.1 },
      ],
      onRender: (state) => {
        // Called on every animation frame.
        // `state` will be an empty object, return updated params.
        state.phi = phi
        phi += 0.01
      },
})

3. Toggle the animation.