travispence / us-states-svg-to-png-with-legend

A tool to assist creating a PNG graphic from an SVG with custom legend categories and labels.

us-states-svg-to-png-with-legend

A tool to assist creating a PNG image from an SVG with custom legend colors and labels. View Demo

The was built with the Vue CLI tool and follows the basic structure provided.

Limitations

Up to 6 colors and labels can be specified. This is because the <text> annd <rect> components are hardcoded into the SVG image.

Developed and Tested on a Desktop running Chrome.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

us-states-svg-to-png-with-legend's Issues

Change ID for missouri

The ID for the state of Missouri does follow the pattern of the other states and currently cannot be selected.

Add / Remove Category/Label

Currently there is no way to add or remove a category and it's selection from the user interface.

Change File Name

Allow the downloaded filename to be set.

Default State

• Minimal category / state selection
• Ability to reset back to this default state.
• Display pre-configured map with categories and state selection

Create GIF demo

Create a GIF to display in the project README.

Color Picker

There should be a color picker that allows the user to set the fill color for the category. Text color should also be considered.

Cleanup UI

• Remove inline styles
• Restructure how categories are displayed