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

@qwant/qwant-basic-gl-style

v1.6.12

Published

a map GL Style for Qwant Map

Downloads

33

Readme

qwant-basic-gl-style

CI status

This is the Mapbox GL basemap style used for Qwant Maps.

preview

This style uses a vector tile schema adapted from OpenMapTiles (and is mostly compatible with OpenMapTiles).

Check out the taxonomy chart.

Architecture

To mutualize some logic between Qwant Maps components, we use some config files to overwrite a few fields from the GL style template with our map style builder.

Here are the main files of this repo and their usage:

  • the style.json contains the GL style template. It looks like a regular GL style file but some fields will be overwritten at build time.
  • the tileschema_*.json files contain the tile schema (in TileJSON format). Mostly useful for debugging purposes.
  • the icons repository contains all the map icons. You can build a sprite and an icon-font from them with our map style builder
  • the i18n.yml file contains the algorithm to create map in any language (well ... almost any). Most name fields specified in the style.json will be overwritten at build time with this config
  • the icons.yml file contains the icons and text color to use for the points of interest. The text-color and the icons specified in the style.json will be overwritten at build time with this config

Contribute

Thanks for considering to contribute ! :heart:

If you want to report bugs and make suggestions about Qwant Maps style, please use Qwant Maps central repository and provide screenshots.

If you know a bit about Mapbox GL Style format and want to send us some improvements, please read on ;)

You will need to install Qwant Maps style builder.

Build

Build the style using our builder:

npm run build_all -- --style-dir=PATH/TO/YOUR/MAPSTYLE/FOLDER --conf=prod_conf.json --i18n=fr --webfont=true --icons=true

Then browse the build folder that has been created in your qwant-basic-gl-style folder: it contains

  • the generated GL style. If you are not from Qwant, you may want to use the OpenMapTiles version to contribute: style-omt.json
  • a few debug tools (check out the map style builder readme to learn more)

Test

Our map style builder can check a few things and give you hints about errors you may have in your style or config files.

npm test -- PATH/TO/YOUR/MAPSTYLE/FOLDER

About icons to be used both in the map style and Qwant Maps UI

Icons present in the icons directory can be used both in the map and the webfont generated by map style builder. To add a new icon, a few constraints are to be followed:

  1. Add two .svg files in ./icons:

    • {iconname}-11.svg (with viewBox 23x23, and a 10.5 px border-radius)
      Used to generate "sprite.png" (for default resolution)
      Example: bar-11.svg
    • {iconname}-15.svg (with viewBox 27x27, and a 12.5 px border-radius)
      Used to generate "[email protected]" (for high DPI screens) and by map-style-builder to generate the webfont. Example: bar-15.svg

    Note that the border-radius must be applied to a "rect" element, and that any "rect" element (including the icon border) will be ignored on webfont generation, to keep the main symbol "path" only. The (white) color of this path will also be removed in the webfont.

  2. Update the rules in icons.yml mappings to associate the new icon with a POI class and/or subclass. (Mappings are defined with decreasing priority: the most specific rules should come first).

    This second step is optional : if the new icon is not defined in the icons mappings, it will still be added to the webfont.

That's it!
Update qwant-basic-gl-style dependency in Erdapfel : the new icon will directly be used in the map style, and a CSS class icon-{iconname} will be defined.

PS: the new icons must follow the Maki guidelines, especially: no groups, flat icons, use fill instead of stroke, proper pixel alignment, 1px-wide strokes and all the units in "px".

Our sprite icons

sprite