OpenStreetMap xml clarification - no image available - openstreetmap

I am new to OSM.
I have the document https://trac.openstreetmap.org/browser/subversion/applications/rendering/osmarender6/osm-map-features-z14.xml?rev=10976
This document describe set of rules for certain zoom.
There are rules that uses an image (svg) objects, e.g:
<rule e="node" k="waterway" v="lock_gate">
<wayMarker k="waterway" class="canal-lock"/>
</rule>
And there is CSS for canal-lock in the same file:
.canal-lock {
fill: none;
stroke: #ffffff;
stroke-width: 0.1px;
stroke-opacity: 0;
marker-mid: url(#canal-lock);
}
And finally, at the bottom of the document there is:
<svg:marker fill="none" id="canal-lock" markerHeight="5.9px" markerUnits="userSpaceOnUse" markerWidth="5.9px" orient="auto" refX="1px" refY="5px" stroke="#000000" stroke-width="0.75px" stroke-opacity="1" viewBox="0 0 10 10">
<svg:path d="M 1,0 L -2,5 L 1,10"/>
</svg:marker>
My Question is, Where does the canal-lock image is obtained from. i could not find that svg on the site, and my map seems to not working well since its looking for this image.

Related

How to achieve this linear gradient in flutter?

I want to create this color gradient in flutter.
The corresponding css which achieves this is background: linear-gradient(180deg, rgba(1, 79, 134, 0.4) 0%, #014F86 100%)
I have tried everything from setting stops in LinearGradient to setting transform as transform: GradientRotation(pi), to set the radiant to 180 degree as stated in the corresponding css. I also tried setting the points manually in x and y axis using Alignment in begin and end parameters. Nothing seems to work though. Added a sample to show everything I tried so far. Not the exact code I tried but tried playing around commenting out various parts but no luck so far.
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
Color(0XFF014F86),
Color(0XFF014F86),
// Color(0XFF5575a3),
// Color(0XFF8b9ec1),
// Color(0XFFbfc9e0),
// Color(0XFFf3f6ff),
],
transform: GradientRotation(pi),
stops: [0.4, 1],
),
I also have the corresponding android native vector that achieves the same.
<!-- Rectangle 6 -->
<View
android:id="#+id/rectangle_6"
android:layout_width="311dp"
android:layout_height="37dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="32dp"
android:layout_alignParentTop="true"
android:layout_marginTop="257dp"
android:background="#drawable/rectangle_6"
android:elevation="18dp"
/>
<!-- drawable/rectangle_6.xml -->
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="311dp"
android:height="37dp"
android:viewportWidth="311"
android:viewportHeight="37"
>
<group>
<clip-path
android:pathData="M8 0H303C307.418 0 311 3.58172 311 8V29C311 33.4183 307.418 37 303 37H8C3.58172 37 0 33.4183 0 29V8C0 3.58172 3.58172 0 8 0Z"
/>
<group
android:translateX="1.029"
android:translateY="0"
android:pivotX="155.5"
android:pivotY="18.5"
android:scaleX="2.106"
android:scaleY="2"
android:rotation="90"
>
<path
android:pathData="M0 0V37H311V0"
>
<aapt:attr name="android:fillColor">
<gradient
android:type="linear"
android:startX="77.75"
android:startY="18.5"
android:endX="233.25"
android:endY="18.5"
>
<item
android:color="#66014F86"
android:offset="0"
/>
<item
android:color="#014F86"
android:offset="1"
/>
</gradient>
</aapt:attr>
</path>
</group>
</group>
</vector>
Any help on how to achieve this using BoxDecoration and LinearGradient in a Flutter Container would be greatly appreciated!
LinearGradient(
colors: [Color(0xff0373c4), Color(0xff014f86)],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
)
You can use this online tool to generate it :
online tool

Exception caught by SVG in Flutter, which be the same problem even after I did svg clean in SVG Cleaner

There is no problem with the assets path in the "pubspec.yaml" file because there are other svg that appear from the same path as well.
svg code 👇 after cleaning in SVG cleaner
<svg height="22" viewBox="0 0 34 22" width="34" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#e5b74b" stroke-linecap="round" stroke-linejoin="round">
<path d="m34.5 10.5-10.5 7.5 10.5 7.5z" />
<path
d="m4.5 7.5h16.5a3 3 0 0 1 3 3v15a3 3 0 0 1 -3 3h-16.5a3 3 0 0 1 -3-3v-15a3 3 0 0 1 3-3z"
transform="translate(-1 -7)"
/>
</g>
</svg>
error: 👇
════════ Exception caught by SVG ═══ Unable to load asset:
packages/icons/assets/svgs/post_your_listing/Icon feather_video.svg
══════
just these lines without any details
my assets in the workspace, and just 7 icons not appearing in the flutter app, so the path in "pubspec.yaml" with no problem!
in pubspec.yaml
code:
SvgPicture.asset(
icon,
color: orange,
height: 35,
package: 'icons',
),
add you SVG assets file path in pubspec.yml like this
assets:
- assets/test.svg
and then load SVG files via path
SvgPicture.asset(
"assets/test.svg",
color: orange,
height: 35,
package: 'icons',
),

How to fix the space issue when pasting the MATHML code in word document?

I have converted MathML code from Latex text, when I paste the code in word documents necessary spaces are not retained. Is there any way to fix the space issue. (You can just copy the MathML code and paste it in Ms Word)
The tag "<mspace/> completely ignored in Word Equation.
eg: <mspace width="2.3in" />
MS office version : 2010
I have tried to and some manual space but the output is awful.
<?xml version="1.0"?>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mtable columnalign="right left right left right left right left right left right left" rowspacing="3pt" columnspacing="0em 2em 0em 2em 0em 2em 0em 2em 0em 2em 0em" displaystyle="true">
<mtr>
<mtd>
<mspace width="2.4in" />
<mfrac>
<mrow>
<msup>
<mi>d</mi>
<mrow class="MJX-TeXAtom-ORD">
<mn>2</mn>
</mrow>
</msup>
<mi>y</mi>
</mrow>
<mrow>
<mi>d</mi>
<msup>
<mi>x</mi>
<mrow class="MJX-TeXAtom-ORD">
<mn>2</mn>
</mrow>
</msup>
</mrow>
</mfrac>
<mo>+</mo>
<mi>y</mi>
<mo>=</mo>
<mn>0</mn>
<mspace width="2.3in" />
<mo stretchy="false">(</mo>
<mn>1.2.1</mn>
<mo stretchy="false">)</mo>
</mtd>
</mtr>
</mtable>
</math>
Actual Output:
█((d^2 y)/(dx^2 ) + y=0(1.2.1))
Required Output:
█((d^2 y)/(dx^2 ) + y=0<some space here>(1.2.1))
I tried to transform the Mathml code to MML2OMML.XSL which is Open-Xml style sheet using "XslCompiledTransform", but the <mspace> spacing are not retained.
So I used a temporary fix by adding spaces in the <mspace> tag's next sibling using the entity ( ), multiplying the mspace width with value '25' i can get the space count.
The output is good.

How do I add a custom text input for the customer

I need help adding a way for a customer to specify a custom design they want on a product. For example the text they want printed on a shirt. If I'm correct it should be something like:
type=text, value="What they wanted printed.", class="Custom Design", however I still need help.
I'd then want it to tell me what they wanted on their shirt in the PayPal order so I could print it. If possible I'd also like their 'custom input' for that item displayed in the cart columns, but this isn't necessary.
I know this is a lot but I'd seriously appreciate it,
thanks,
George.
You can try this style:
input {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background: rgba(255,255,255,0.5);
margin: 0 0 10px 0;
}

h1 and p tag in same line, but keep h1 width

Hy,
so i have this:
#header
{
width: 90%;
height: auto;
margin: 0 auto 3% auto;
border-bottom: 1px solid black;
}
#header p, h1
{
display: inline;
}
#header p
{
font-style: italic;
}
h1
{
width: 40%;
border-right: 2px solid black;
font-family: Franklin Gothic Medium;
text-transform: uppercase;
font-size: 2.8em;
margin-left: 2%;
text-shadow: 0px 0px 2px white;
}
and the HTML
<div id="header">
<h1>Heading Blog Title</h1>
<p>Site description Site description Site description Site description</p></div>
It looks like this: http://i.imgur.com/TvVKjo9.jpg
But I want to keep the width of the h1 too look like this: http://i.imgur.com/YzWO8YN.jpg
Basically to center the along with the h1 tag.
Picture 1 is where i used
#header p, h1
{
display: inline;
}
for both.
In the second picture the h1 tag is positioned as i want to, but the screws it up. On the second pic I used display: inline-block; for the h1. And the p description isn't positioned in the center position, I can use margin pr padding but the rest of the description keeps going bellow the h1 tag as you can see on pic 2.
I fixed this by relative positioning and margin the p tag, but it goes bellow or above the #header in higher or smaller resolutions because I used %.
Any trick to fix this?
Thanks
Here's a jsFiddle of the above...
And one solution
Get both h1 and p to display inline-block:
#header p, h1
{
display: inline-block;
}
Float both elements left, and give #header p a width of less than 60%
Since floating removes elements from the natural document flow, you'll need to set a fixed height to the div container, so that it will still enclose the header.
Add desired margins to get the p element sitting in the right place.
A note: this won't work at smaller screen sizes, since the h1 text will stick out of it's container when it is wider than 40%. I suggest you give the h1 element a fixed width( or min-width) which you're happy with, and let #header p float to the left of it.