I created a script to store dynamic map inputs by appending attributes to a Static Maps URL (so we can refer back to it after a user submits).
For reasons I can't yet determine, the Polygon is not rendering at all with the basic static maps URL, but it works with a 3rd party site's static maps function. According to Static Maps API examples there should be no issue, but I can't seem to recreate the Polygon.
Working version (with same attributes in URL, though it ignores Satellite and zoom resolution) from 3rd Party site.
Desired version missing the polygon.
The question is: Am I missing some parameter? I do have an API key which I removed from the URL, so that must not be the issue..
Your original Desired Version uses a parameter that Google does not support. Removing just opacity:0| and it works:
http://maps.googleapis.com/maps/api/staticmap?center=33.402285,-111.94271500000002&zoom=20&size=600x600&maptype=satellite&sensor=false&path=color%3ared|weight:1|fill%3awhite|33.4022475,-111.9426775|33.4022475,-111.9427525|33.4023225,-111.9427525|33.4023225,-111.9426775|33.4022475,-111.9426775
Opacity on google maps is set in the color as a 32-bit hexadecimal value, so
Thin blue line, 0% opacity: path=color:0x0000ff00
Solid red line with 100% opacity: path=color:0xff0000ff
The default is 50% if you pass a 24-bit color: 0x0000ff (50% opacity, blue)
So I think this is what you are looking for (or really close):
http://maps.googleapis.com/maps/api/staticmap?center=33.402285,-111.942715&zoom=20&size=600x600&maptype=satellite&sensor=false&path=color:red|weight:1|fillcolor:white|33.4022475,-111.9426775|33.4022475,-111.9427525|33.4023225,-111.9427525|33.4023225,-111.9426775|33.4022475,-111.9426775
Related
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
I have been using an html template that contains a slider (revolution slider - https://revolution.themepunch.com/)
It has a right and left arrow for navigating that use the following -
.tp-rightarrow.preview4:after { content: '\E824'; }
.tp-leftarrow.preview4:after { content: '\E825'; }
This works fine locally, but when I uploaded as part of an Umbraco site the two arrows changed to Chinese symbols. When I googled I found the following -
http://www.utf8icons.com/character/59429/UTF-8-character
I have now changed the CSS to display a > and < symbol but I'd like to know why the original code sometimes displays arrows and sometime displays chinese symbols.
Thanks.
U+E824 and ..25 are code points in the private use area. Code points in that area are not reserved, they do not have any pre-defined meaning. They are neither defined as Chinese characters nor arrows. You are free to use any private use code point for any purpose you wish, as long as the publisher and the client are in agreement what these code points mean.
In the browser this pretty much just boils down to having the right fonts installed/loaded/defined. In a web page, each character is simply rendered by the first defined/responsible font which happens to contain a glyph for that code point. The reason why it renders differently on two different systems/environments therefore can only stem from the fact that the CSS font definitions differ, or that the browser has different fonts installed.
Most likely the original included a custom web font which defined these characters as arrows. You have either omitted that font, or you have overridden the font precedence and made a different font apply to that element, and that font happens to define Chinese characters at those code points.
I'm trying to create a flexible sprite solution for my website whereby I can have one version of each icon within the sprite image but have the ability to change it';s colour dynamically. I know you can do this if you embed the SVG into your page but I don't want to do this as I will be using it as a background-image in css/sass. I have looked at the following article which looks promising and have it working as described in Chrome but having also looked at caniuse.com (http://caniuse.com/#search=URI) I have also realised that IE only support base64 image data. This prevents me from changing the fill colours of the paths in my SVG data.
Modify SVG fill color when being served as Background-Image
I am using gulp with my project and my question is, would I be able to convert something like this which will be in my sass file:
background:url('data:image/svg+xml;utf8,<svg> ... </svg>');
into a base64 version like so with gulp?
background:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uP...');
This would enable me to change the colours dynamically with variables etc in my sass but also have IE support.
This looked like it might be a possibility but I'm not sure if it would work as my image is data to begin with whereas in the example, it's an iamge URL.
http://stefanimhoff.de/2014/gulp-tutorial-7-base64/
Found a solution - https://www.npmjs.com/package/gulp-css-str2base64.
This allows me to wrap my SVG data string in the str2base64 function which then converts it. I run this task after my sass task to ensure the variables have been applied before the data is encoded.
Been looking for a solution to what seems like a relatively simple problem. I have a kml layer loaded into google maps. It outputs as a within the dom and I have been able to identify its location.
What I want to do is simply change the opacity. I have tried using simple css targeting and that doesn't seem to work.
I have also tried to add a class to the function calling the kml layer in javascript (however my knowledge of javascript is rudimentary at best)
None of the answers to the other questions directly apply (or at least I cant see how they would)
here is my code: adding the kml layer and below that the div it outputs to in the dom.
KML add -
var geoLayer = new google.maps.KmlLayer('http://www.tijaniogunlende.com/dataviz/doc.kml');
geoLayer.setMap(map);
geoLayer.addClass( "overlay" );
and the DOM output -
By the way, it works just fine when I edit the css directly in chrome, but since it's styled inline I cant pinpoint where to insert the css in my code, nor can I target the element properly. At this point I'd prefer a javascript solution.
Please Help.
There is no implemented method that returns a pointer to the DOMNode that contains the elements of the layer.
But in this case, where all the GroundOverlays will be loaded from the same address, you may use a CSS-attribute-selector to apply a custom styling for the images, e.g.:
img[src^="http://gisatnrel.nrel.gov/"]{
opacity:.5;
}
In visual studio I can type "blue" in a CSS value for instance and it will translate it to the appropriate RGB. Is it possible to define custom colors? I'd love to be able to define "companyBlue" or "companyOrange".
Since you're using a CSS file then you shouldn't be using any colornames like Blue, Green,... Because browsers decide for themselves which color value they give to these colors. The color Green might be a completely different color in IE when comparing to Google Chrome.
I'd recommand using hex values instead like:
#000 /* Black */
#fff /* White */
#f00 /* Red */
You can easily get hex values, with this photoshop-like color selector: http://www.2createawebsite.com/build/hex-colors.html
Now, back to your original question, how can you use variablese like companyOrange in CSS? Simply put... with only CSS you cannot use any variables. You however can "store" the value at the top of your CSS file in a comment like so:
/*
COLORS
Black: #000
Company Orange: #f64;
Company grey: #444;
*/
If you really want to use variables instead, you can use a CSS pre-processesor such as SASS, LESS, Stylus,... All of these use variables.
Read more:
http://sass-lang.com/
http://lesscss.org/
http://learnboost.github.com/stylus/
I found this, but don't really love the solution: http://24ways.org/2006/faster-development-with-css-constants/
To truly achieve constants you will need to use something other than
CSS to process the file before it is sent to the browser. You can use
any scripting language – PHP, ASP, ColdFusion etc. to parse a CSS file
in which you have entered constants. So that in a constants section of
the CSS file you would have:
$darkgrey = '#333333';
$darkblue = '#000066';
The rest of the CSS file
is as normal except that when you come to use the constant value you
would use the constant name instead of adding the color:
p { color: $darkgrey; }
Your server-side script could then parse the
CSS file, replace the constant names with the constant values and
serve a valid CSS file to the browser. Christian Heilmann has done
just this for PHP however this could be adapted for any language you
might have available on your server.
Shaun Inman came up with another way of doing this that removes the
need to link to a PHP script and also enables the adding of constants
using the syntax of at-rules . This method is again using PHP and will
require you to edit an .htaccess file.
A further method is to generate static CSS files either using a script
locally – if the constants are just to enable speed of development –
or as part of the web application itself. Storing a template
stylesheet with constant names in place of the values you will want to
update means that your script can simply open the template, replace
the variables and save the result as a new stylesheet file.
While CSS constants are a real help to developers, they can also be
used to add new functionality to your applications. As with the email
address example that I used at the beginning of this article, using a
combination of CSS and server-side scripting you could enable a site
administrator to select the colours for a new theme to be used on a
page of a content managed site. By using constants you need only give
them the option to change certain parts of the CSS and not upload a
whole different CSS file, which could lead to some interesting
results!
As we are unlikely to find real CSS constants under the tree this
Christmas the above methods are some possibilities for better
management of your stylesheets. However if you have better methods,
CSS Constant horror stories or any other suggestions, add your
comments below.