I am using one plugin with my leaflet map.
<script>
var map = L.map('mapid').setView([-21.12, 55.5], 16 );
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { }).addTo(map);
L.marker([-21.12, 55.5]).addTo(map).bindPopup('Help ME!').openPopup();
</script>
I want to change the fonts in the map (Leaflet).
I put the font code:
body{font-family:arial,tahoma !important"}
In the CSS file, but the font doesn't change on the map (Leaflet).
My problem is that the font does not change in the text.
What you show in your screenshot are raster tiles, i.e. plain images from the tile server you specify in the tile layer template URL.
You will not be able to change the text in those images with client side CSS.
But you can change the tile server you point to, if you can find one that serves tiles that meet your desired style. Or you can serve your own tiles, or use a tile provider that offers customization feature.
See R leaflet Language of the map : Can we specify to use English language
Related
Are there alternative vector styles available for the Javascript API or all that we have is the default "normal" style? I know that the Tile API does have several styles available - I like the "reduced" one, but I'd prefer to work with vectors. I suppose I could use the style editor and make my own yaml file, but that's a lot of variables to tweak.
I'd like to style the map in very light colours or in grayscale so that my markers are more visible. Is there a global style I could change for that?
JS 3.1 API gives you all flexibility in terms of map styles. You can use the Map Customization Tool https://enterprise.here.com/map-style-editor/. However, for now only normal.day is currently offered from HERE.
To have an idea, we have also published an example on GitHub how to have a dark theme on the map. Here is the link:
https://github.com/heremaps/maps-api-for-javascript-examples/tree/master/change-style-at-load
Style looks like this: https://github.com/heremaps/maps-api-for-javascript-examples/blob/master/change-style-at-load/data/dark.yaml
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
I have some buttons that I would like to change the color of but not sure how to do it.
code:
<Button id="evalPriceButton" text="Evaluate Price" icon="sap-icon://sales-order" type="Accept" press="onPricePress" />
As shown in my code I'm using one of the default types provided by sap, but I cannot set my own color. I'm also using one of the icons provided in their library which shows different buttons with different colors, but they don't specify how to change those colors. https://sapui5.hana.ondemand.com/iconExplorer.html
I want it to look like the green one.
Is it fully necessary to override the css in order to change the look of the button?
I assume by "like the green one", you mean one of the colors of those rotating divs in the Icon Explorer. Unfortunately, those colors come from custom CSS classes. They are not specified in the documentation. So yes, you will have to:
Use the UI Theme Designer
Write your own CSS class although it is not recommended for Fiori apps
SAP Fiori launchpad apps should not override styles.
You can read more about the theming here: https://ui5.sap.com/#/topic/497c27a8ee26426faacd2b8a1751794a
If I want style sheets for different color themes, how can I keep canvas font and line colors in an external CSS file?
I could make hidden dom elements and use them as varaibles.
I could just use javascript to read the current theme and set the colors using javascript variables but then it defeats the purpose of css files. I also want someone else to edit the styles and colors without having to do javascript.
Is there no way to store a setting in a css file and easily read it with javascript (no ajax or jquery)?
The line color, etc. in a canvas element are not affected by CSS, so there is no way to directly do this. The best you can do is use a data file of some sort that stores an object in JSON format containing appropriate canvas variable values for each theme.
Canvas drawing is independent of CSS. You set fonts and colors using Canvas API methods, not by CSS styling. The best I can think of as a counterpart to an external CSS file is an external JavaScript file where you just assign values to variables used in your code for drawing on canvas. That file could be made very simple, just assignments, so it would not require any substantial understanding of JavaScript to edit it.
I am desesperatly trying to get some google font faces to work with Raphael (SVG / VML rendering JavaScript library) on IE8.
At first i tried the google fonts code.
My second try has been to download and convert the fonts to host my own more complete css. Now the fonts show in the html part of the page (inside a modified bootstrap nav dropdown), but it does not work in the VML canvas (generated by Raphael).
Example here :
http://beta.yetiprint.com/fr/etiquettes-autocollantes/4-etiquettes-couleur-ronde.html
Is it possible to get that working in iE8? Any clue?
I can confirm that ScottS’s method works, but I could not fit these instructions in his answer’s comment field.
Instructions for getting custom fonts to work in Raphael by using Cufón:
Go to the Cufón website where you can convert a font to path shapes.
Upload your custom font, choose a font name, and click the Raphael icon at “Customization for 3rd-party scripts”.
Submit the form and download the Javascript file that pops up.
Include this Javascript below the Raphael Javascript include.
Register the font with Raphael like this, where fontname is the name of your font that you specified in step 2: var myfont = paper.getFont('fontname');
Use your font like this in Raphael: paper.print(100, 100, 'Hello World', myfont, 100);
Performance is not great compared to Paper.text, but it works in IE6 and up.
Have you tried the procedures in Raphael to registerFont()? See http://raphaeljs.com/reference.html#Raphael.registerFont. That gives the procedure for getting the font into Raphael.
Based off the link in that page, you should be able to get VML support and thus IE8 functionality. At least theoretically; I've never done it, I just found this information which seems to point in the direction you want to go.