How to use the viewport-mercator-project.worldToPixels function in viewport-mercator-project

To help you get started, we’ve selected a few viewport-mercator-project examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github GlobalFishingWatch / map-client / app / src / activityLayers / components / HeatmapLayer.jsx View on Github external
// of the antimeridian just by looking at its value (where with lat/lon we can simply look at -/+)
        // Therefore we compare it to the viewport's left or right boundary, depending on what is currently
        // "the right side" of the antimeridian
        let worldX = frame.worldX[index];
        if (viewportLeft > 0 && worldX < viewportLeft) {
          // worldX is "behind" viewportLeft, which means it is "on the right" of the antimeridian
          worldX += 512;
        } else if (viewportLeft < 0 && worldX > viewportRight) {
          worldX -= 512;
        }

        const scaledX = worldX * viewport.scale;
        const scaledY = frame.worldY[index] * viewport.scale;
        const mtx = viewport.pixelProjectionMatrix;

        const [x, y] = (viewport.pitch === 0) ? worldToPixelsSimple(scaledX, scaledY, mtx) : worldToPixels([scaledX, scaledY], mtx);

        if (
          x > -10 && x < viewport.width + 10 &&
          y > -10 && y < viewport.height + 10
        ) {
          this.subLayers[hue].pushSpriteProps(
            x,
            y,
            (frame.opacity) ? frame.opacity[index] : this.renderingStyle.defaultOpacity,
            (frame.radius) ? frame.radius[index] : this.renderingStyle.defaultSize
          );
        }
      }
    }
  }
github GlobalFishingWatch / map-client / app / src / activityLayers / components / TracksLayer.jsx View on Github external
const worldXEnd = worldOffset + (512 - 0.000001);
          const worldXStart = worldOffset;

          // get X coordinate ending at dateline
          const atDatelineEndWorldX = (isWestToEast) ? worldXEnd : worldXStart;

          // get X coordinate starting at dateline
          const atDatelineStartWorldX = (isWestToEast) ? worldXStart : worldXEnd;

          const [x1, y1] = worldToPixels(
            [atDatelineEndWorldX * viewport.scale, atDatelineWorldY * viewport.scale],
            viewport.pixelProjectionMatrix
          );
          this.stage.lineTo(x1, y1);
          const [x2, y2] = worldToPixels(
            [atDatelineStartWorldX * viewport.scale, atDatelineWorldY * viewport.scale],
            viewport.pixelProjectionMatrix
          );
          this.stage.moveTo(x2, y2);
        }

        this.stage.lineTo(x, y);

        if (drawFishingCircles && frame.hasFishing[i] === true) {
          circlePoints.x.push(x);
          circlePoints.y.push(y);
        }

        prevWorldX = worldX;
        prevWorldY = worldY;
        prevSeries = currentSeries;
github GlobalFishingWatch / map-client / app / src / activityLayers / components / TracksLayer.jsx View on Github external
let duplicateWorld = false;

    for (let timeIndex = startIndex; timeIndex < endIndex; timeIndex++) {
      const frame = data[timeIndex];

      if (!frame) continue;

      for (let i = 0, len = frame.series.length; i < len; i++) {
        const currentSeries = frame.series[i];

        n++;

        const worldX = frame.worldX[i] + worldOffset;
        const worldY = frame.worldY[i];

        const [x, y] = worldToPixels(
          [worldX * viewport.scale, worldY * viewport.scale],
          viewport.pixelProjectionMatrix
        );

        if (prevSeries !== currentSeries) {
          this.stage.moveTo(x, y);
        }

        // more than a ½ world of distance between two points = crossing the dateline
        if (prevWorldX && Math.abs(worldX - prevWorldX) > 256) {
          // worldOffset === 0 -> this is the first time drawTrack is called
          if (worldOffset === 0) {
            // set a flag to call drawTrack again at the end of the loop
            duplicateWorld = true;
          }
github GlobalFishingWatch / map-client / app / src / activityLayers / components / HeatmapLayer.jsx View on Github external
hue = defaultHue;
        }
        for (let fi = 0; fi < numFilters; fi++) {
          const filter = filters[fi];
          if (vesselSatisfiesFilters(frame, index, filter.filterValues)) {
            hue = filter.hue;
            break;
          }
        }

        // no filter passes: bail
        if (hue === undefined) {
          continue;
        }

        const px = worldToPixels(
          [frame.worldX[index] * viewport.scale, frame.worldY[index] * viewport.scale],
          viewport.pixelProjectionMatrix
        );
        const spriteProps = {
          x: px[0],
          y: px[1],
          alpha: (frame.opacity) ? frame.opacity[index] : this.renderingStyle.defaultOpacity,
          scale: (frame.radius) ? frame.radius[index] : this.renderingStyle.defaultSize
        };
        if (Object.prototype.hasOwnProperty.call(this.subLayers, hue)) {
          this.subLayers[hue].spritesProps.push(spriteProps);
        }
      }
    }
  }
github uber / deck.gl / src / core / viewports / viewport.js View on Github external
project(xyz, {topLeft = true} = {}) {
    const [x0, y0, z0 = 0] = xyz;

    const [X, Y] = this.projectFlat([x0, y0]);
    const coord = worldToPixels([X, Y, z0], this.pixelProjectionMatrix);

    const [x, y] = coord;
    const y2 = topLeft ? y : this.height - y;
    return xyz.length === 2 ? [x, y2] : [x, y2, coord[2]];
  }