npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gnucoop/tangram

v0.0.1

Published

WebGL Maps for Vector Tiles

Downloads

3

Readme

Tangram: WebGL Maps for Vector Data

Circle CI

Tangram is a JavaScript library for rendering 2D & 3D maps live in a web browser with WebGL. It is tuned for OpenStreetMap but supports any source of GeoJSON/TopoJSON or binary vector data, including tilesets and single files.

Here's a simple demo (repo here) with a basic example of a Tangram map.

Tangram is instantiated as a Leaflet plugin for integration with standard web maps. Tangram ES is a native mobile version of the Tangram library, written in C++.

Quickstart

The current version of Tangram can be included in your page with:

<script src="https://mapzen.com/tangram/tangram.min.js"></script>

The library includes a Leaflet plugin, Tangram.LeafletLayer, to provide basic web map pan/zoom functionality.

Data sources, layers, and styling rules are written in a scene file (here's an example). Armed with a scene file like scene.yaml, you can create a Tangram scene and add it to a Leaflet map like so:

var map = L.map('map');

var layer = Tangram.leafletLayer({ scene: 'scene.yaml' });

layer.addTo(map);

Read on for more info, or see the documentation.

Demos

simple-demo - A minimal demo showing the basic setup

highways-demo - Zoom-dependent styles and contextual filtering rules

gui-demo - Control styles in real-time with a gui

shaders-demo - Simple glsl shaders

Tangram-sandbox - More complex glsl shaders

More examples are available on our documentation's Demos page.

Vector Tiles

Instead of loading traditional bitmap tiles, Tangram draws its own tiles from scratch, based on vector tiles that contain the source data.

Mapzen provides a free vector tile service based on open data from OpenStreetMap, Natural Earth, Who's On First and other projects, with worldwide coverage updated continuously -- sign up for an API key here.

Tangram currently supports GeoJSON & TopoJSON-based tiles, as well as Mapbox's binary format, all of which are available from the Mapzen vector tile service. (Here's an example GeoJSON tile.)

Styling

The scene file is where you specify data sources and layers, filter the data, and define and apply styles. (In our demos, this file is named scene.yaml.) The rules for doing these things are many and various, but the basics are pretty easy, and they are all meticulously documented in the Tangram Documentation.

The scene file is written in YAML, which is a data-serialization format like JSON, but with less punctuation. Instead, data structures are specified with whitespace, like Python. One neat side benefit is that the format is super friendly to strings, which means you can write inline JavaScript and GLSL code straight into the scene file, without needing to wrap it in quotes or concatenate anything.

Support

For technical reference and concept overviews, see the Tangram Documentation.

For questions, comments, suggestions, or to report a bug, please open a new issue.

You can also find us in the Tangram-chat gitter room: https://gitter.im/tangrams/tangram-chat

Browser Support

Tangram JS is officially supported and tested on the last two versions of these browsers:

  • Mac OS: Chrome, Firefox, and Safari
  • Windows: Chrome, Firefox, IE11, and Edge
  • iOS: Safari
  • Android: Chrome

Tangram JS should also run in any browser with WebGL support.

Contributions Welcome

Tangram is open-source, and we eagerly welcome feedback, feature requests, and contributions. We’re especially interested to see your maps, no matter how simple! Send screenshots, links, and any questions to [email protected].

For instructions, see CONTRIBUTING.md.

Tangram is an open-source project sponsored by Mapzen.