isabella232 / fresco

An open source vector tile style editor

fresco

For Cartography Professionals and Amateur Map Makers Alike

Fresco is an open source Mapbox Vector Tile Style editor that allows cartographers to craft stylesheets for use with Mapbox GL maps. Unlike other style editors, Fresco does not attempt to hide the complexity of Mapbox GL Styles - but rather exposes and surfaces it for maximum control and flexibility. This allows the user to implement rich, interactive styles utilizing data driven properties with expressions.

When using Fresco, it may be helpful to have the Mapbox Style Spec available as a reference.

Fresco runs in the browser and styles created and modified with Fresco are saved to the browser's local storage and are synced on changes. Be sure to download styles to your computer as a backup. Remote style storage and collaboration tools are coming soon.

Give it a try: https://fresco.gospatial.org/

Features

• Rich map interaction style editor for use with Mapbox GL styles
• Editor mode for quick changes and at a glance comprehension
• Interactive JSON code editor for maximum control
• Feature inspection and state setting
• Works in our out of the browser - Fresco is available as a downloadable application
• Auto save on style changes
• Styles persisted to local storage (in the browser)
• Mapbox GL style error parser - displays the error at the line location in the style
• Integrated Mapbox GL style spec attributes (info on style fields)
• Custom domain header configurations - useful for domains which require Authorization headers
• Open and free for everyone license

Usage

Fresco may be used in the browser by visiting https://fresco.gospatial.org/ or by downloading a pre compiled binary from the releases page.

Running from source

Fresco is built on top of React. To run Fresco from source use the following steps:

1. Download the latest version of Node.js
2. Clone this repository to your computer
3. Navigate to this repo on your computer
4. Run npm install
5. To startup, run npm start - Fresco should open in a browser window
6. To build Fresco for deployment run npm run build - the deployment files will be inside the /build directoty

Hosting Fresco from a subdirectory

Fresco is able to be hosted from a subdirectory of a domain (i.e. https://yourhost.com/fresco/). To enable this functionality, modify the package.json file

{
  "name": "fresco",
  "version": "0.0.1",
  "private": true,
  "homepage": "/fresco",
...

Also, you'll need to modify the config inside /src/config/index.json.

{
	"homepage": "/fresco"
}

Then use npm run build to build Fresco for deployment.

Change default Fresco styles

You are able to change the default styles that Fresco loads up with. Update /src/config/stylesDefault.json with any number of Mapbox style JSONs. To load multiple styles in use an array structure like shown below:

[
	{
		"id": "style1",
		...
	},{
		"id": "style2",
		...
	}
]

For a single style, just replace the contents of /src/config/stylesDefault.json with the style JSON.

When testing default styles, you'll have to clear out your localStorage frescoStylesStore or use an incognito window.

Contributing

Contributions are welcome! Fork the repo and send in a PR with any bug fixes or features.

Looking for a vector tile server?

If you're looking to create vector tiles that can be styled with Fresco, check out tegola!