Skip to content

Add Font Awesome!#9

Open
melroy89 wants to merge 1 commit intoopenmaptiles:gh-pagesfrom
melroy89:gh-pages
Open

Add Font Awesome!#9
melroy89 wants to merge 1 commit intoopenmaptiles:gh-pagesfrom
melroy89:gh-pages

Conversation

@melroy89
Copy link
Copy Markdown

@melroy89 melroy89 commented Dec 25, 2018

Font Awesome is free (also for commercial use):
https://fontawesome.com/free

Support Font Awesome out of the box:
mapbox/mapbox-gl-js#3605 (comment)
mapbox/mapbox-gl-styles#241

This makes it possible to use Font-Awesome icons in the text-field. So you can use font awesome icons and scale the image up as much as you want (and the icon keeps sharp)!

Using Font awesome icons also makes it possible to color the icons.

Example using geojson data & Font Awesome + color icon:

map.on('load', function() {
  map.addSource('markers', {
  	type: 'geojson',
  	data: './data/data.geojson'
  });

  map.addLayer({
    'id': 'markers',
    "interactive": true,
    "type": "symbol",
    "source": "markers",
    "layout": {
      'text-line-height': 1, // this is to avoid any padding around the "icon"
      'text-padding': 0,
      'text-anchor': 'center',
      'text-allow-overlap': true,
      'text-field': String.fromCharCode(62405),
      'icon-optional': true, // since we're not using an icon, only text.
      'text-font': ['Font Awesome 5 Free Solid'],
      'text-size': 25
    },
    "paint": {
      'text-translate-anchor': 'viewport', // up to you to change this -- see the docs
      'text-color': '#67A48E' // whatever you want -- can even be data driven using a `{featureProperty}`,
    }
  });
});

@melroy89
Copy link
Copy Markdown
Author

Merge?

@anadolskiy
Copy link
Copy Markdown

Any updates on this PR?

@melroy89
Copy link
Copy Markdown
Author

melroy89 commented Jul 2, 2019

I would like to get it merged in. But nobody is maintaining this repository!!? Hello?

@petrsloup
Copy link
Copy Markdown
Member

Hey, several notes/questions:

  • This repo is designed to contain the original source data + code to process them into PBFs (so it can be regenerated in the future when/if the fontik is upgraded etc. However, the PR contains already generated PBFs -- I don't think that's going to work, the generate.js will just skip over all these files..
  • On the other hand, there is a .zip file included in this PR (which contains the PBFs again), which is really not used for anything

Ideally, clean up the PR to add only the original ttfs/otfs the same way as other fonts are added and let them be generated into PFBs with the same script as the rest of the fonts..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants