So I noticed that when the map is zoomed to 11-ish level, there are railway tracks. Is it possible to style the map to make railroads with more weight (bigger) and can be seen when zoomed out to level 6, for example? It won't be using the direction service, since I'm not doing any search from a place to another.
By using the Styled Maps you can style the transit.line feature type. For example:
[
{
"featureType": "transit.line",
"stylers": [
{ "color": "#ff0280" },
{ "weight": 4 }
]
}
]
Note that this does not only style rail roads but also seaways, and maybe more (unsure). And I don't think you can do anything about the zoom level at which it appears. But it's still a good way to make it stand out.
For the full list of feature types, you can refer to the API Reference.
There is a great tool to try these styles: the Styled Maps Wizard.
Hope this helps.
You mean something like this? Rail.kmz
Related
In these demos, there are logos on the splash screens.
https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
I don't know what I am doing wrong in my manifest - I have an icon but it is not showing up on my splash screen.
My manifest looks like this:
{
"short_name": "Weather Service",
"name": "Weather Service",
"icons": [
{
"src": "logo.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#FAFAFA",
"theme_color": "#512DA8"
}
Do I need more than 1 image for it to appear on the splash screen?
PWA is recommend to alway put icon at 192px as a minimum
If you want to ensure that an icon will always be displayed consider that 48dp is the minimum image size we will display, which if you take the maximum density display currently supported (4x) then 48 * 4 = 192px. This is lucky because we need to 192px image for Add to Homescreen to work! Yay. Therefore, I would recommend always having 192px as the minimum sized icon and create 3 other versions at 256px, 384px and 512px. However, if you want to ensure that the user is not downloading too much data for the splash screen, especially on a low density device then you can go lower and Chrome will try to fetch the most appropriate image.
https://developers.google.com/web/updates/2015/10/splashscreen
You can also validate your icons by using the "Add to homescreen" action under Chrome's dev tools (Application -> Manifest). This identified a 192x191px image which was causing it to fail for me.
Is there any way to have standard Windows/system native scrollbars in Sublime Text 3 or do I have to get myself used to these tiny little ones?
For me, a person with medium eyes problems, current scrollbars are just to tiny and I'm having problems, from time to time, with catching them. I heard, that eveything is configurable in Sublime Text 3, so I'd like to ask, if scrollbars can be changed as well?
As Miles Zhang suggests,
you can try some third part themes
... you can find more themes from Package Control
And you can change the size of the scroll-bars for most of them as well. Create a file in your packages directory with the same name as your theme.
I like to use Cyanide theme, so I would create a new file in (packages dir)/User/Cyanide.sublime-theme. then set the attributes you want. In this case, you want to set scroll_bar_control : content_margin.
My Cyanide.sublime-theme file looks like this:
[
{
"class": "scroll_bar_control",
"attributes": ["horizontal"],
"content_margin": [3, 4] //makes horiz scrollbar taller
},
{
"class": "scroll_bar_control",
"content_margin": [1, 3] //makes vert scrollbar taller
},
{
"class": "tab_label",
"parents": [{"class": "tab_control", "attributes": ["selected"]}],
//"fg": [30,30,30],
"fg": [255,131,0] //change highlighted tab color
}
]
Most of my info was learned here
I don't think you can change the scrollbars to system native style, but you can try some third part themes that with bright color scheme.
For example: Numix Theme. You can find more themes from Package Control.
I'm using grunt-svgstore to merge SVG files. There's an option available called 'cleanup' (https://github.com/FWeinb/grunt-svgstore#optionscleanup) that should:
Clean up all inline style definitions that may jeopardise later
stylesheet-based colouring (fill).
However, mine doesn't seem to work. The rest of it runs fine, I get the prefix and the viewBox and the file is created. It's just the cleanup that doesn't seem to work. Have I got the syntax wrong here (from my Gruntfile.js)?
svgstore: {
options: {
prefix: 'icon-',
cleanup: true,
svg: {
viewBox: '0 0 32 32',
class: 'is-hidden'
}
},
default: {
files: {
'svg/svg-sprite.svg': ['svg/*.svg']
}
}
}
It looks as though you can provide the 'cleanup' option with an array off attributes instead of just true or false. You can add the fill attribute here in the array as well as style attribute if you wanted to.
options: {
cleanup: ['fill', 'style']
}
Hope this helps for future reference.
I was actually going down the wrong path with the question, but I'll leave it up for reference to anyone who runs into the same problem.
The plugin actually works perfectly as intended, which is to remove all inline styles:
<path style="fill:#000000:">
What it doesn't do is remove styles that are applied just using
<path fill="#000000">
The IcoMoon app that I was using to download my SVG icons colours the icons using the latter, and so the plugin won't remove those. Unfortunately, I had to go through each SVG individually and remove that fill="#000000".
I wanted to create a complete background running app that only shows up in the system-tray and doesn't have any "window" as such. I tried setting the "window" attribute to false, but that doesn't work. Is there any way to create a completely background daemon-style application using node-webkit?
Additionally place a tray to truly reflect a background app:
https://github.com/rogerwang/node-webkit/wiki/Tray
Simply use this package.json
{
"window": {
"show": false
}
}
I'm trying to make a very simple extension, that inserts this;
<style>
span.watch-view-count:hover {opacity: 1;}
span.watch-view-count {opacity: 0;}
</style>
right before the body on any YouTube page I visit.
I tried using content script to inject the code above, first I tried putting the code in a CSS file called mycsscode.css and adding it to my manifest.json file like this:
"js": ["script.js"]
but I'm pretty sure nothing happened, since I viewed the source and couldn't find the code anywhere.
Then I tried following the first method in answer to this question but I changed the script.js to script.css hoping it would work, but nope it didn't so I'm stuck.
This are the codes I have so far;
manifest.json file:
{
"name": "Youtube views Hider",
"version": "1.0",
"manifest_version": 2,
"description": "A plain text description",
"permissions": [
"*://youtube.com/*/",
"tabs"],
"content_scripts": [{
"matches": ["*://youtube.com/*/"],
"js": ["myscript.js"]}
]
}
myscript.js:
var s = document.createElement('script');
s.src = chrome.extension.getURL("script.css");
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
Note: I'm almost an illiterate when it comes to coding lingo, so please put it in layman's terms.
If you are just inserting/changing CSS, don't even bother with that javascript. Change the manifest to:
{
"name": "Youtube views Hider",
"version": "1.0",
"manifest_version": 2,
"description": "A plain text description",
"content_scripts": [ {
"matches": ["*://*.youtube.com/*"],
"css": ["myCSS.css"]
} ]
}
Where myCSS.css is just:
span.watch-view-count {opacity: 0 !important;}
span.watch-view-count:hover {opacity: 1 !important;}
Note:
Changed the matches value to work on actual YouTube URL's -- Which usually have the form: http://www.youtube.com/watch?...
Note the use of the !important keyword.
If you insist on programmatic injection, see "How to inject CSS using content script file in Chrome extension?".
PS: If all you really want to do is alter a page's look or CSS, the Stylish extension is the fastest easiest way to do that in either Chrome or Firefox.
There are also thousands of pre-made styles available at userstyles.org.
I just read that you say you are a coding layman. Creating an extension is the hard way.
An easier way is to add the Chrome extension called Tampermonkey to achieve page modification.
Here is a nice tutorial to get you started with creating a script for Tampermonkey ( Greasemonkey in Firefox ).
This way to you don't need to worry about the mechanics of running a script on a page.