{"id":19422103,"url":"https://github.com/azavea/texturemap","last_synced_at":"2025-04-24T15:31:52.965Z","repository":{"id":136861953,"uuid":"275883530","full_name":"azavea/texturemap","owner":"azavea","description":"Textures, patterns, and shapes that make web maps work for people with colorblindness. Built for Mapbox GL and MapLibre GL.","archived":false,"fork":false,"pushed_at":"2022-04-23T12:34:39.000Z","size":12365,"stargazers_count":56,"open_issues_count":2,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T07:06:58.534Z","etag":null,"topics":["accessibility","gis","mapbox-gl-js","maplibre-gl-js","maps"],"latest_commit_sha":null,"homepage":"https://texturemap.org","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azavea.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-29T17:31:26.000Z","updated_at":"2025-02-03T15:17:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"a0182efb-e60c-4676-8c6c-dd7d5780cdf8","html_url":"https://github.com/azavea/texturemap","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azavea%2Ftexturemap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azavea%2Ftexturemap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azavea%2Ftexturemap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azavea%2Ftexturemap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azavea","download_url":"https://codeload.github.com/azavea/texturemap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250654348,"owners_count":21465867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","gis","mapbox-gl-js","maplibre-gl-js","maps"],"created_at":"2024-11-10T13:32:14.137Z","updated_at":"2025-04-24T15:31:52.947Z","avatar_url":"https://github.com/azavea.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TextureMap\n\nTextures, patterns, and shapes that make web maps work for people with color vision deficiency. Built for Mapbox GL and MapLibre GL.\n\n![Screenshot of several textures from Texturemap](website/img/texturemap-meta.png)\n\n## How to use\n\n### Polygons\n\n[Example of polygons](examples/polygons)\n\nTextureMap polygons use the Mapbox `fill-pattern` property to add a pattern layer to the map. If your polygon style includes color and pattern, each of those properties will be handled by a separate layer. In other words, you will have one layer for `fill-color` beneath a second layer for `fill-pattern`. If you want to allow your user to toggle the pattern on and off, you can set the `visibility` to `none` for the pattern layer.\n\n#### Mapbox Studio\n\n1. Open a project in Mapbox Studio\n2. Open the \"Images\" tab from header\n3. Switch to the \"Custom\" tab\n4. Upload images from [`dist/polygons`](`dist/polygons`)\n5. Create or edit a fill (polygons) or symbol (points) layer\n6. Set the \"Pattern\" property to an image from TextureMap\n\n#### Mapbox GL (without Mapbox Studio) or MapLibre GL\n\nIf you are working directly with the Mapbox GL or MapLibre libraries, you will need the TextureMap images as a [sprite](https://docs.mapbox.com/help/glossary/sprite/). You can download these from [`dist/sprites`](`dist/sprites`) or generate them yourself using [spritezero](https://github.com/mapbox/spritezero). See [`examples/points`](`examples/points`) for an example project using a sprite.\n\n### Lines\n\n[Example of lines](examples/lines)\n\nTextureMap lines are trickier to implement than the other geometry types. To achieve unique line styles, TextureMap builds compound lines using several overlapping lines. For example, the \"railroad style\" lines -`|-|-|-` are constructed from 1.) a thin line as the base; 2.) a thick line with a dash array for the perpendicular lines.\n\nHere is what the Mapbox style definition looks like for the example described above:\n\n```js\n// Thin base line\n{\n  id: \"line7-a\",\n  type: \"line\",\n  source: \"lines\",\n  filter: [\"match\", [\"get\", \"type\"], 7, true, false],\n  layout: { \"line-miter-limit\": 0 },\n  paint: { \"line-color\": \"#8c564b\", \"line-width\": 3 }\n}\n// Thick line with dash array for the perpendicular lines\n{\n  id: \"line7-b\",\n  type: \"line\",\n  source: \"lines\",\n  filter: [\"match\", [\"get\", \"type\"], 7, true, false],\n  layout: { \"line-miter-limit\": 0 },\n  paint: {\n    \"line-color\": \"#8c564b\",\n    \"line-dasharray\": [0.15, 0.4],\n    \"line-width\": 11\n  }\n}\n```\n\nSee [`examples/lines/js/main.js`](examples/lines/js/main.js) for a full list of the line styles used in TextureMap.\n\n### Points\n\n[Example of points](examples/points)\n\nTextureMap points use the Mapbox `icon-image` property on a `symbol` layer.\n\n#### Mapbox Studio\n\n1. Open a project in Mapbox Studio\n2. Open the \"Images\" tab from header\n3. Switch to the \"Custom\" tab\n4. Upload images from [`dist/points`](`dist/points`)\n5. Create or edit a symbol layer\n6. Under the \"Icon\" tab, set the \"Image\" property to a image from TextureMap\n\n#### Mapbox GL (without Mapbox Studio) or MapLibre GL\n\nIf you are working directly with the Mapbox GL or MapLibre libraries, you will need the TextureMap images as a [sprite](https://docs.mapbox.com/help/glossary/sprite/). You can download these from [`dist/sprites`](`dist/sprites`) or generate them yourself using [spritezero](https://github.com/mapbox/spritezero). See [`examples/points`](`examples/points`) for an example project using a sprite.\n\n## Best Practices\n\n### Use for categorical data\n\nTextureMap is designed for [categorical](http://www.stat.yale.edu/Courses/1997-98/101/catdat.htm) data. Examples of categorical data would be **types of schools** (public, private, charter) and **political party representation** (Democratic, Republican). Use \"colorblind safe\" color schemes for [sequential](https://colorbrewer2.org/#type=sequential\u0026scheme=BuGn\u0026n=3) and [diverging](https://colorbrewer2.org/#type=diverging\u0026scheme=BrBG\u0026n=3) data.\n\n### Aim for variety\n\nTo the extent possible, use shapes that are visually distinct. Good: a circle, triangle, and square look relatively different. Bad: a pentagon, hexagon, and octagon look relatively similar.\n\n### Test your designs\n\nIf you are not colorblind (color vision deficient), use simulation tools such as [Sim Daltonism](https://michelf.ca/projects/sim-daltonism/) to test your designs. Consider hiring a consultant to review your work.\n\n### Default or toggle\n\nTextureMap can work well as a default style or as a toggleable setting.\n\n### Bigger accessibility issues\n\nTextureMap can improve accessibility for colorblind users. But even the best designed map can be an accessibility nightmare for screen reader users, users who don't use a mouse, etc. For a truly accessible experience, provide an alternative to maps. Offer data as tables, lists, and text. Design workflows that don’t depend on a map to get to the next step. Ask: if the map disappeared, could a user complete their task?\n\n## Thank you\n\n- [Robert Noorda](http://robertnoorda.com/portfolio/colorblind-consulting/) for colorblind consulting\n- Scott Lederer for feedback on initial concept and website\n- Alex Lash for feedback on initial concept and website\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazavea%2Ftexturemap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazavea%2Ftexturemap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazavea%2Ftexturemap/lists"}