Here API does not show public transit for given route - here-api

I am trying this URL straight from documentation, and it works fine, showing a route consisting of walkable sections as well as sections to be plied by public transport:
https://transit.router.hereapi.com/v8/routes?apiKey={key}&origin=41.79457,12.25473&destination=41.90096,12.50243
However, when I try this on another route, it says that no route is available:
https://transit.router.hereapi.com/v8/routes?apiKey={key}&origin=22.50,88.36&destination=22.64,88.43
The two coordinates are incidentally, two places in Kolkata, a city in India - one can just Google them (Jodhpur Park coordinates and Dum Dum coordinates) and Google actually offers a public transit between those two places, suggesting that public transit does exist between those two places:
Can anyone tell me how to make Here API return the public transit data for these route? Or are there routes where public transit data is not available, even in an otherwise metro city like Kolkata?

TL;DR
If you include more digits in your second API request coordinates, as many as you have in your first request, this should resolve your issue.
The full URL (with excluded API key) is:
https://transit.router.hereapi.com/v8/routes?apiKey={key}&origin=22.5058,88.3640&destination=22.6420,88.4312
I have a live demo of this below the detailed answer below where you can paste in your API key and run the query to see this in action.
Detailed answer
In your second example, your latitude and longitude coordinates need to be more specific, as they do not match the actual locations you are looking for transit directions from/to.
Instead of using 🚫
origin=22.50,88.36&destination=22.64,88.43
Use ✅
origin=22.5058,88.3640&destination=22.6420,88.4312
I pulled these coordinates from Google for both locations…
Searching "Jodhpur Park coordinates":
Searching "Dum Dum coordinates":
The full URL (with excluded API key) is:
https://transit.router.hereapi.com/v8/routes?apiKey={key}&origin=22.5058,88.3640&destination=22.6420,88.4312
The resulting JSON data produces three different transit routes.
LIVE DEMO
Here is a demo of this in action where you can securely use your own API key as well as adjust the Origin and Destination lat/lng coordinates as needed to generate data from the API:
const getById = id => document.getElementById(id),
apiKey = getById('api-key'),
origLat = getById('orig-lat'),
origLng = getById('orig-lng'),
destLat = getById('dest-lat'),
destLng = getById('dest-lng'),
button = getById('submit'),
output = getById('output');
const getDirections = () => {
fetch(`https://transit.router.hereapi.com/v8/routes?apiKey=${apiKey}&origin=${origLat},${origLng}&destination=${destLat},${destLng}`).then(res => res.json()).then(data => output.innerHTML = JSON.stringify(data, null, 2)).catch(error => output.innerHTML = error);
};
[apiKey, origLat, origLng, destLat, destLng].forEach(field => field.toString = () => field.value);
button.addEventListener('click', getDirections);
html {
height: 100%;
box-sizing: border-box;
font-family: consolas, monospace;
}
*, *::before, *::after {
box-sizing: inherit;
font: inherit;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: stretch;
gap: 20px;
min-height: 100%;
margin: 0;
font-smooth: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
width: 0;
display: none;
}
h2 {
width: 100%;
margin: 0;
padding: 10px 20px;
background-color: #000;
font-size: 120%;
font-weight: 700;
color: #fff;
text-align: center;
}
#fields {
display: flex;
flex-direction: column;
gap: 5px;
}
label {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
max-width: 300px;
}
input {
appearance: none;
-webkit-appearance: none;
width: 100px;
margin-left: 5px;
padding: 5px 10px;
background-color: #ddd;
border: none;
text-align: right;
}
pre {
width: 100%;
padding: 10px;
border-top: 1px solid #000;
flex: 1;
margin: 0;
overflow-y: hidden;
background-color: #ddd;
font-size: 85%;
}
<h2>Here API demo</h2>
<div id="fields">
<label>API Key<input id="api-key" placeholder="API key"></label>
<label>Origin Latitude<input id="orig-lat" value="22.5058"></label>
<label>Origin Longitude<input id="orig-lng" value="88.3640"></label>
<label>Destination Latitude<input id="dest-lat" value="22.6420"></label>
<label>Destination Longitude<input id="dest-lng" value="88.4312"></label>
</div>
<button id="submit">Run a query</button>
<pre id="output">Run a query using the button above to load the results here.</pre>

Related

CSS: Why are both texts not starting on same level

I'm trying to start this lines of text on the same left level, but I'm having problems doing it.
CSS code:
.sideBar-footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
bottom: 10px;
}
.sideBar-footer-image {
width: 50px;
height: 50px;
background-color: #D9D9D9;
border-radius: 10px;
}
.sideBar-footer-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.sideBar-footer-text h1 {
font-size: 15px;
font-weight: 500;
line-height: 15px;
color: #FFFFFF;
}
.sideBar-footer-text p {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
}
Can you please help me solve this?
You need to debug why is it showing the space before. To do that, right-click on the <p> tag in the browser and inspect the element. Then you want to go to the 'Layout' in the styles section of the inspector and check if the element has any spacing.
You'll probably see something like this
You can see I have a 10px padding (violet area)
After Understanding what is causing your element to be more to the right, probably margin/padding you can search for the rule where I put "You can search here" on the image
This way you will understand why you are seeing this space and where is it coming from.
To override you can just add a rule to your ".sideBar-footer-text p" set of rules something like
padding: 0 or margin: 0
depending on what is causing the space.
Also, you can see your h1 has a big margin below it, you should probably add a CSS reset on your project. You can do so by adding the snippet below at the topmost CSS import right at the beginning of the file.
* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}

Button moves down whenever I place text in it

I am trying to make a TicTacToe game as my first project and for some reason no matter what I do when I click one of the cells they go down a line and are not in the same row as the others.
this is an example
here is the css:
button {
width: 30%;
height: 200px;
text-align: center;
line-height: 0.85px;
cursor: pointer;
display: inline;
margin: 0px;
font-size: 14rem;
}
this is the typescript where I insert X and O in and the html where I present a button:
public place ()
{
if (this.reserved())
{
if(this.player==1)
{
this.xory = 'X'
this.player++
}
else
{
this.xory = 'O'
this.player--
}
}
}
<button (click) = "place()">{{xory}}</button>
I suggested to use as content of your empty boxes to compensate the alignment when the player didn't fill it with a choice.
By the way it was hard to say how you should initialize that value since you are using Angular.
So you can just opt for using the vertical-align:bottom; in your css rule as showed in this example:
button {
width: 30%;
height: 200px;
cursor: pointer;
text-align: center;
font-size: 10rem;
display: inline;
vertical-align: bottom;
margin: 0 0 3px 0;
padding: 0;
}
<button></button>
<button>O</button>
<button></button>
<button>X</button>
<button></button>
<button></button>
<button></button>
<button>O</button>
<button>X</button>

How can I use CSS to style the Stripe inputs on a Bigcommerce cart integration?

I am using Stripe as my payment processor on BigCommerce. It works perfectly. The problem is that my site theme has a black background. When you type in your credit card info, the text is black in the Stripe inputs so you can't see it. I've tried to use CSS in both checkout.scss and optimized-checkout.scss to try and overwrite it, but since Stripe is loaded via JS and in what looks to be an iFrame, I can't figure it out.
I've added this css to both and it still doesn't work
input {
color: #eee !important;
}
May be you can use JavaScript for this,
document.getElementById("element_id").style etc...
I did not do that thing earlier, but this solution works on these types of scenarios!
but since Stripe is loaded via JS and in what looks to be an iFrame, I can't figure it out.
Indeed! It doesn't use the styling in your CSS, you have to specify it via Javascript by passing a style object when creating the Element:
https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
https://stripe.dev/elements-examples/
If you're not the one writing the code that interacts with stripe.js at this level you probably want to reach out to Bigcommerce or something to ask them to expose access in some way.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: 'white', // color of the text : https://stripe.com/docs/js/appendix/style
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');
* {
font-family: "Helvetica Neue", Helvetica;
font-size: 15px;
font-variant: normal;
padding: 0;
margin: 0;
}
body {
background: #171515;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
form {
width: 480px;
margin: 20px 0;
}
.group {
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
margin-bottom: 20px;
}
label {
position: relative;
color: #8898AA;
font-weight: 300;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: flex;
flex-direction: row;
}
.group label:not(:last-child) {
border-bottom: 1px solid #F0F5FA;
}
label > span {
width: 80px;
text-align: right;
margin-right: 30px;
}
.field {
background: transparent;
font-weight: 300;
border: 0;
color: #31325F;
outline: none;
flex: 1;
padding-right: 10px;
padding-left: 10px;
cursor: text;
}
.field::-webkit-input-placeholder { color: #CFD7E0; }
.field::-moz-placeholder { color: #CFD7E0; }
<script src="https://js.stripe.com/v3/"></script>
<body>
<form>
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
</form>
</body>

Some styles from styled-components not applying when view with mobile device

I ran into a problem which some styles on my website don't seem working when viewing on a mobile device. Where is my website: https://www.chingpingyang.club/
When I open it with my phone the submit button for the price filter and the price for books are having different styles from when I open the site with my laptop. And seems not only these two are not the same...
Here is the code for the submit button.
input {
all: unset;
font-size: 0.8rem;
width: 50px;
height: 20px;
cursor: pointer;
text-align: center;
color: ${props => props.theme.primWhite};
background-color: ${props => props.theme.interactive};
transition: 0.2s;
&:hover {
background-color: ${props => props.theme.interactiveDark};
}
}
Thank you all so much in advance!
The issue does look to be button, but everything else. The button didn't change for me at all. Try this css below.
#media (max-width: 800px){
.sc-fzoyTs.jZUSDr {
flex-direction: column;
}
.sc-fzoNJl.fvpgSY {
width: calc(100% - 40px);
border: 1px solid #efefef;
padding: 1rem;
margin: 0 auto 3rem;
}
.sc-fzoLsD.fYZyZu,
.sc-fzqBZW.chhgrb {
width: 100%;
}
.gpozzs {
flex-direction: row;
flex-wrap: wrap;
}
.gpozzs label {
width: auto;
margin: 0 1rem 0 0;
}
}
I have figured out the problem. It's caused by the "all: unset" I applied to the button. So just simply remove it and use other ways to remove the default button style.

IE 7/8 rendering issue?

Within ie8, the document is rendered as intended.
Within ie7, the document is not
(built on top of bootstrap with additional css)
markup:
.modal.fade.in#unsupported-browser-modal
.modal-dialog
.modal-content
.modal-text
.modal-header
%h3.modal-title YOUR BROWSER IS OUT OF DATE
.modal-body
This website requires a minimum of Internet Explorer version 9 or the latest version of other popular web browsers.
additional css:
#unsupported-browser-modal {
.modal-dialog, .modal-content {
height: 100%;
}
.modal-dialog {
width: 100%;
margin: 0;
max-width: none;
min-width: none;
}
.modal-content {
border-bottom: 0;
}
.modal-header {
border-bottom: 0;
padding: 15px;
min-height: 16.42857143px;
}
.modal-title {
font-family : $var;
text-align : center;
font-weight : bold;
letter-spacing : 2px;
margin-top: 50px;
}
.modal-body {
font-family: $var1;
font-size: 14px;
text-align: center;
padding: 2px 35px 80px;
color: #646464;
line-height: 20px;
}
}
#unsupported-browser-modal.modal {
display: block;
}
.modal-text {
top: 37%;
position: relative;
}
Also, document.compatMode seems to be set to the same value in both ie7 as well as i8, in case that may be of interest.
Thoughts as to what I may not be accounting for?
Not sure if it's what your looking for. It's also, a bit of an hack so I wouldn't suggest it unless no one suggests a solution/you don't find one. But try:
_margin-top: 100px; /* ie7 only */
Can read more about safe CSS hacks if your interested here:https://mathiasbynens.be/notes/safe-css-hacks#css-hacks

Resources