Git Product home page Git Product logo

npmap-symbol-library's Introduction

NPMap Symbol Library

Circle CI

National Park Service map symbols optimized for the web. Read more about this project on the NPMap website.

New symbols

Add requests for new symbols as an issue. Newly developed symbols will be bundled into periodic releases.

Versioning

The Symbol Library uses a semantic versioning scheme:

  • 0.0.z: Bugfixes and modifications
  • 0.y.0: Icons added
  • x.0.0: Icons removed, sprite scheme changed, or major features added

File structure

This repository was originally forked from Mapbox's Maki project, so the file structure is similar.

src

Source SVG files are in the src subdirectory. To create pixel-perfect icons at different sizes, each icon is designed 6 times to support two different use cases:

  1. At 12, 18, and 24 pixels wide/tall for use in NPMap Builder
  2. At 16, 24, and 32 pixels wide/tall, with a drop shadow, for use in Park Tiles

renders

PNG renders of all of the SVGs are in the renders directory. High-resolution (aka Retina) versions of each icon are present as well, named using the common @2x convention.

render.sh

You can use the SVGs and PNGs in this repository as they are without building anything, however a render script is included to assist designers/developers who want to modify or create new icons. It will render SVGs to PNGs at 100% and 200% resolution, create sprites used by NPMap.js, NPMap Builder, and the Places Editor, and generate corresponding CSS styles for the sprites.

The script requires Node, Bash, Inkscape, and ImageMagick. In addition, each icon must have an appropriate entry in www/npmaki.json to be rendered correctly.

After installing the required prerequisites, you can run the script like this:

cd npmap-symbol-library
npm install
bash render.sh

npmap-symbol-library's People

Contributors

samanpwbb avatar ajashton avatar jccartography avatar williamscraigm avatar wrynearson avatar jfirebaugh avatar tmcw avatar ianshward avatar jimmyrocks avatar ryantroyford avatar tatsvc avatar tristen avatar willwhite avatar incanus avatar jakecoolidge avatar ansis avatar xorgy avatar dkniffin avatar heyitsgarrett avatar ryanjhodge avatar yhahn avatar aaronlidman avatar miccolis avatar meghanhade avatar edenh avatar

Watchers

Francois Goulet avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.