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

trackasia-gl-leaflet

v0.0.21

Published

binding from trackasia gl to the leaflet api

Downloads

75

Readme

Trackasia GL Leaflet

This is a binding from Trackasia GL JS to the familiar Leaflet API. It was originally developed for Mapbox (https://github.com/mapbox/mapbox-gl-leaflet) and was migrated to Trackasia from Maplibre.

Code example


var map = L.map('map').setView([38.912753, -77.032194], 15);
L.marker([38.912753, -77.032194])
    .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
    .addTo(map)
    .openPopup();
var gl = L.trackasiaGL({
    style: 'https://tiles.track-asia.com/tiles/v1/style-streets.json?key=public'
}).addTo(map);

Note that you can use any vector tile source useable by trackasia-gl. For instance, you can use OSM2VectorTiles with:

var gl = L.trackasiaGL({
	style: 'https://tiles.track-asia.com/tiles/v1/style-streets.json?key=public'
}).addTo(map);

Once you have created the leaflet layer, the trackasia-gl map object can be accessed using

gl.getTrackasiaMap()....
// add a source to the trackasia-gl layer
gl.getTrackasiaMap().addSource({...})

Examples

Code for these examples is hosted in the examples folder

Installation

Add a script tag referencing trackasia-gl-leaflet after adding leaflet and trackasia-gl-js in your website:

<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<!-- Trackasia GL -->
<script src='https://unpkg.com/[email protected]/dist/trackasia-gl.js'></script>
<link href='https://unpkg.com/[email protected]/dist/trackasia-gl.css' rel='stylesheet' />

<script src="https://unpkg.com/[email protected]/leaflet-trackasia-gl.js"></script>

Motivation

This project makes it possible to easily add a trackasia-gl-js layer in your Leaflet map. When using trackasia-gl-leaflet, you won't be able to use some of the trackasia-gl-js features. Here are the main differences between a "pure" trackasia-gl-js map and a Leaflet map using trackasia-gl-leaflet:

  • No rotation / bearing / pitch support
  • Slower performances: When using trackasia-gl-leaflet, trackasia-gl-js is set as not interactive. Leaflet receives the touch/mouse events and updates the trackasia-gl-js map behind the scenes. Because trackasia-gl-js doesn't redraw as fast as Leaflet, the map can seem slower.

On the bright side, the trackasia-gl-leaflet binding will allow you to use all the leaflet features and plugins.

If you only need the trackasia-gl-js features (adding a map with a mapbox-style, adding a GeoJSON, etc.), you are probably better off using it directly.

API Reference

API Reference

Bug Reports & Feature Requests

Please use the issue tracker to report any bugs or file feature requests. You can fork this jsfiddle template to reproduce a bug, then share the URL of your fork in the GitHub issue.

License

ISC © Trackasia ISC © Maplibre © Mapbox