I have successfully added Navigation Control to my map, however the buttons are blank, no '+' or '-' on either of them. Is there another option I can use to place the '+' or '-' on them. Here is the code I used to create the Navigation controls.
this.map = new MapboxGL.Map(mapOptions);
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
I have seen similar examples using Mapbox Leaflet's zoomInText and zoomInTitle. Is there something similar I can use in Mapbox GL?
Can you provide any errors, or additional code that will help us figure out what exactly is the problem.
Navigation control is usually very straight forward as outlined here
When you inspect the element do you see a class?
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in
That class should have a background image of the "+".
If you don't see it, you must not have included the css.
I was facing similar kind of issue while implementing in Angular2 but as lucas-wojciechowski has pointed out including the mapbox-gl.css will fix the issue.
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
In my case the navigation controls and the North arrow button were blank and the fullscreen button only partially visible in the wrong color. The problem was an old css file. Through changing the version number from 1.4.1. to 1.7.0 everything was corrected!
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
Related
I am new for Onsen UI. I want to control individual page orientation like one page work only in portrait mode, one another for landscape mode and one for both. Is this possible with Onsen UI.
If you want to have a one page being displayed in one orientation and another one in the other then it is possible even though I wouldn't recommend it. Usually using media queries to change the styles of the page itself is the preferred method. However if you must do it then you can do:
<ons-if orientation="landscape">
<ons-page>Landscape page</ons-page>
</ons-if>
<ons-if orientation="portrait">
<ons-page>Portrait page</ons-page>
</ons-if>
Here are the docs for ons-if.
If you're using Onsen 1 then you can use ons-if-orientation
Update:
The above code does work, but I guess it's not what you want. It seems like what you want is not to display a page if the orientation matches, but rather to force the orientation based on the page if I understand correctly.
If you want to force a specific orientation then I'm sorry to say that Onsen does not provide that functionality currently. link
Cordova provides some features like this
<preference name="orientation" value="portrait" /> in the config.xml but I think that's for the whole app, not only for a specific page.
It seems that there is a plugin which is supposed to be able to do it on a per-page basis. There are standards about this still in development if I'm not mistaken, but maybe they're not implemented everywhere.
I guess there is something like
<link rel="manifest" href="manifest.json"> which you could put in your HTML, where the json contains {"orientation": "landscape"}, but again I'm not sure that this will work everywhere. Maybe it will work only in Android.
One last thing you could do is something like
#media only screen and (orientation:portrait){
body { transform: rotate(90deg) }
}
however doing a rotation like that is going to probably create more issues and is not recommended.
Probably the manifest.json could be a solution for android or just the cordova plugin otherwise.
Please can somebody clarify when I would use an ion-nav-view opposed to an ion-view? I am learning AngularJS/Ionic (I have a basic understanding of AngularJS; and would like to use Ionic to enhance it).
I understand the ion-nav-view implements the AngularUI Router service(?) which is a must in order to have nested views within views. But the documentation does not make clear where I should be using one or the other?
All the documentation states for ion-view is:
A container for content, used to tell a parent ionNavBar about the current view.
But I have seen an ion-view used outside navbar interface.
So what gives?
ion-nav-view is the place where your ion-views get injected to.
You can see ion-nav-view as the frame where your paint, the ion-view, is gonna be painted on by the $stateProvider.
Open the template menu.html
Search for
ion-nav-bar class="bar-stable"
and change it to
ion-nav-bar class="bar-stable bar-royal"
I'm developing an app that loads a form from another website into an iFrame. The iFrame is set to 100% width and height while displayed. That website has JQTouch.
When I touch an input field in iOS 7 on the iPhone, the keyboard pops up and covers the input fields. It doesn't scroll, resize, or even let me scroll down to see the input field. If I type and then close the keyboard, nothing happens.
I've tried everything I've come across. Adding/removing height=device-height in the meta viewport tag didn't do anything. The thing that came closest to a solution was adding the preference "KeyboardShrinksView = true" in config.xml. That made it scroll (but not enough), and permanently pushes the site up about 20px or so.
I've been working on this for the last couple days with no solution in sight. Is this a bug? Is it the way JQTouch is interacting with PhoneGap Build?
UPDATE: Still no fix, but to test I took the form's page out of the iframe and set it using window.location.href="www.mywebsite.com"; They keyboard works in that situation. This is not a valid solution for me (yet), but may provide info on why it's not working.
UPDATE 2: I'm restructuring the app to use window.location.href, rather than an iframe or html object. This creates some small issues, but these are better than the keyboard not working. If anyone has an answer, I'd still like to see it.
Major Edit: I just realized the InAppBrowser plugin does NOT fix the keyboard bug alone. I did some more research, and this topic helped. I had to add "height=device-height" to every meta viewport tag. "width=device-width" should fix any problems viewing the site in mobile Safari. The final result is this:
<meta name="viewport" content="initial-scale=1, minimum-scale=1,
maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>
One of these also had a semicolon thrown in there, so be sure to check and double-check for syntax errors, as they may cause the problem.
If this doesn't work, there is another solution that you might try in place of or in addition to the meta viewport fix. It's several comments down in that topic I linked and involves some changes to the CSS. Changes to this didn't fix anything in my code, but it helped at least one person, so it's worth checking out if you still need a solution.
I tested this fix with iframe and object, and it didn't work--InAppBrowser is still necessary.
/Major Edit.
Here are some workarounds that worked for me:
Use the InAppBrowser plugin. This allows the app to interact with loadstart/loadstop/loaderror events in the loaded page within the InAppBrowser. This is the solution I suggest. However, with iOS 7, you will need to hide the status bar manually, the solution for which is here
OR Load the page using window.location.href = [website url]. If you don't need to worry about interacting with or returning to the app or linking to external sites (both of which I needed), this is the way to go. It's pretty simple, but lacks some of the functionality of the first solution.
OR Get rid of JQTouch. I wasn't able to do this, but much of it is redundant when you're building an app with PhoneGap.
I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
You have to build only one page with two sections/divs with the flip-contents in it. Then you can use the transform: rotateY … or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.
I've got a UIWebView embedded in my iPhone app, and I'd like to keep a locked header and footer DIV on the page at all times, with a scrollable center DIV.
I know that I could do this using a header/footer that are UIView controls, but I want the header and footer to be HTML divs, as a pure HTML/JS/CSS solution will be easier to port to Android/PalmPre/AdobeAir, which is going to be on my todo list relatively soon.
I can do this using techniques like the one mentioned here:
http://defunc.com/blog/?p=94
But this requires that the user use 2 fingers to scroll the div, which is not satisfactory to me...
Any suggestions on how to do this?
Thanks,
Brad
I found someone that implemented a reusable solution for this, with a header and a footer:
http://cubiq.org/iscroll-4
I'm not too familiar with the UIWebView, so this may be a totally silly suggestion. But is there anything stopping you from having three UIWebViews on the page? One for the header, one for the body, and one for the footer. Because breaking it up sounds like the right idea.
Is this what you're looking for? Open this link on your iPhone device or simulator.
The index.html file has three div elements for "header", "container" and "footer" directly under the body, while all the work is done in the fixed.js file. The document is fixed in place by canceling the normal action for the "touchmove" event:
// Disable flick events
disableScrollOnBody : function() {
document.body.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);
},
Then, a lot of work goes into creating event listeners for the "touchstart", "touchmove" and "touchend" events which are attached to the "content" div under "container". The logic boils down to simply moving the "content" div up and down.
This solution is 100% HTML/CSS/JavaScript, however there is some WebKit proprietary CSS and JavaScript which may limit portability. It may take a bit of tweaking to work on another mobile device but this would be a good proof-of-concept to start from.
I did not create this awesome sample project, I'm merely bringing it to the community's attention. For more information and a link to the zipped project, read Richard "Doctyper" Herrara's entire post on Fixed positioning in Mobile Safari.
May be clunky, but you could reposition the header and footer over top of the div as the user scrolls. This way your main div doesn't need to be scrollable. No help for anything (still) using frames though.
This is one of the more irritating browser issues with the iPhone/touch, I wish you could just focus on part of the page like a normal browser.
For a CSS only reference the Safari CSS Reference probably has what you are looking for. You'll be especially interested in anything starting with "-webkit" or "-khtml" as those are extended properties only available with WebKit like 3D and touches. Should apply to Android as well.
With JavaScript the Introduction to WebKit DOM Programming Topics and WebKit DOM API Reference are go-to guides. Definately take a look at the light-table demo for some copy and paste javascript on handling your touches as that's how I would solve this.
I have implemented iScroll on iphone and it is really smooth and fast and you can do whatever you want. Disadvantages are that android (1.6) refuses to scroll how I wanted and sometimes block other javascript if there are any.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">
Add those to your html code may solve your problem.