On my desktop using Django-1.9 admin, on Firefox, the django-leaflet MultipolygonField widget works as expected.
However, on a Samsung tablet using either Chrome or Firefox or the native browser, although I can select the tool to start drawing the polygon, by touching it, it is impossible to place any point on the map.
It seems like the widget does not respond to any touch/hit/punch event.
Is anybody else experiencing something like that? I have posted a relevant question in django-leaflet and I am still waiting for a hint.
Leaflet-draw 0.2.4, which is used to enable drawing in django-leaflet, doesn't support touch yet.
Leaflet-draw 0.3.0 adds touch support, and a pull request exists to update it in django-leaflet. Not much activity there though.
You should be able to override the file by downloading the new version of leaflet-draw and add that to a directory static/leaflet/draw/ in your Django app.
Related
I am working on a weather visualization project using Mapbox (3 panes are locked together and one is for navigation, it's hard to explain until you see the link.)
Before I continue, I will post a link to the web app I am discussing here, so you can see it. My code is a MESS, and I am aware of that, but I believe this is a browser issue.
http://ability.a2hosted.com/main.html
In Edge and Firefox, the fullscreen and navigation buttons work fine. In Chrome, they do not work... the fullscreen button gets the browser stuck until you press escape (and doesn't render properly anyway!). And, in fact, chrome does not even display the navigation button at all.
Is there a way to get these buttons to show up and function as they do in firefox and edge? Or, maybe an alternate button? I am attaching a screenshot of how the page should look.
I should note, I can live without the fullscreen buttons, but I need the navigation button option to be working in chrome. This really is a must for my project, so even if there's another link or button I could place over it to activate it somehow, it's fine as long as it works. I am not good enough with JS to understand what may be causing this issue after 2 hours of research.
From https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol:
Not all browsers support geolocation, and some users may disable the feature. Geolocation support for modern browsers including Chrome requires sites to be served over HTTPS. If geolocation support is not available, the GeolocateControl will not be visible.
I've "upgraded" to IE 11 for the browser inside a c# application using the webbrowser control.
When I load my web page into the IE 11 browser natively everything works properly on the map.
When I'm in the c# application everything loads without error except that I can not click on the map and drag it.
All of my map click events will also not fire.
I can use the arrow keys to move the map, and the wheel mouse also works.
I have noticed that when I use IE 11 natively, and use the developer tools with "Break on all exceptions", I get an error in ol3 when its checking if PointerEvent.HAS_BUTTONS is supported, saying Object doesn't support this action.
error is on line 44619 of ol-debug.js, using ol-3.4.0
Note: Yes, I've set the proper registry values for the browser_emulation for both the 32 bit and 64 bit keys for my application name, and the one for the vhost.exe version of the application.
UPDATE:
I should also note that if I use
map.on('click', function(e) {
//do stuff
});
there is nothing fired... However, if I use jquery and do
$(map.getViewport().on('click', function(e) {
//do stuff
});
... then my click events work....
I know this is a bit of a late post, but hopefully it might help others if they stumble across it.
I was in exactly the same boat: using a WebBrowser control with compatibility set to IE11 was causing OpenLayers 3 to ignore mouse button clicks when displaying 2D maps. I tried CefSharp 3, and sure enough it resolves the problem, but there are other reasons why that can't be used for me. After lots of trial and error, I stumbled across this as a workable solution:
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<script>
if (navigator.appVersion.indexOf("MSIE 7.") !== -1)
{
delete window.PointerEvent;
window.navigator.msPointerEnabled = false;
}
</script>
This needs to be on the page before the inclusion of ol.js.
It's a crude test of whether the page is running in a WebBrowser control admittedly, but should suffice now that IE7 is no longer supported. The only real instance of "MSIE 7." in the user agent string will be from a default WebBrowser control.
I've not found any other OpenLayers problems as yet.
So, I decided to roll back to IE10. Everything works in both the native browser and in the WebBrowser control.
IE11 breaks too much stuff, and isn't worth the "upgrade" at this point in time.
I will be checking out CefSharp in the future, just not enough time to put into upcoming release.
I was in the same situation than you a few months ago. The non working mouse events, are just the first symptom. I strongly recommend you to use Chromium for that, because at the end, you are not using an IE11 (Webbrowser control is based on a IE9 kernel), and you just can influence "a bit" how it works, BUT: if you have a complex problem you have no way to really update your browser, to debug, etc.
Chromium works really fine and you can embed it completely in your solution, star it separately to debug or test, and it's based on a modern chrome.
To integrate it on a .net solution, you can use:
https://github.com/cefsharp/CefSharp
Regards
The problem is related to the legacy input model, which is enabled by default for WebBrowser Controls hosted by an application.
To get your OpenLayers3 application working you have to disable it in the registry. To do this you have to set FEATURE_NINPUT_LEGACYMODE to 0 for your application. If this key doesn't exist in your FeatureControl branch, you have to create it manually.
For more information about the legacy input model read this.
I had a lot of issues with ol3 / WebBrowser in winforms, like a lot of features not working well;
After I added this in the HTML header, it was perfect :
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1" />
I need to display four realtime smooth graphs representing user's biodata in my android application. I tried every free android library but they were not as smooth as their javascript counterparts. So I decided to use the highcharts js in webview.
Four graphs in the same screen works smoothly. But webview is not recognising touch events quickly. I tried playing with H/w accelartion, touch events etc. but it did not help.
Whenever I touch a button on the webview logcat says :-
"12-13 16:13:37.436: V/WebViewInputDispatcher(9308): blockWebkitDraw"
"12-13 16:13:37.441: V/WebViewInputDispatcher(9308): blockWebkitDraw lockedfalse"
After touching buttons multiple times it says :-
"12-13 16:13:37.806: V/WebViewInputDispatcher(9308): blockWebkitDraw lockedtrue"
So basically any touch on highcharts graph or the buttons does not work quickly. I am loading html/js/css from assets folder.
What fixes I need to perform in webview to resolve this? I don't think there is any problem with my html/js/css code because it runs perfectly fine on Chrome mobile.
Having your app an important delay is a possible indicator that probably you're doing some hard work in the UIThread that you should probably sepparate in a Thread or an AsyncTask.
You don't mention what is supposed to happen when you touch a chart, but some code would probably clarify that.
I strongly recommend installing Eclipse Memory Analyzer Tool (assuming you use Eclipse, otherwise you should find a similar tool for the environment you use) and combine it's usage with DDMS. This will give you some clues of where the bottleneck might be.
This is a good tutorial on how to use them: http://therockncoder.blogspot.com.es/2012/09/fixing-android-memory-leak.html
This one's very clarifying too: http://eclipsesource.com/blogs/2013/01/21/10-tips-for-using-the-eclipse-memory-analyzer/
I'm create a website specifically for the ipad. What tools should i use to help me debug CSS? I'm developing from a desktop environment, but testing and viewing my changes on the iPad.
I use firebug to debug your normal website. But my ipad website doesn't show up at all in firefox. It shows up in Safari, but Sencha's drag, touch and slide event handlers don't respond well to my mouse events.
What tool do I use to debug css (and possibly javascript) issues on an ipad website built with Sencha?
Try the Phantom Limb.
It simulates touch events on a desktop browser to enable testing. (it also turns your mouse pointer into a giant hand, which I guess adds to the effect.... hmmmm)
This is quite a new thing -- I haven't tried it myself yet; it's still on my 'todo' list, so I can't tell you how great it is, just that it is supposed to solve the kind of problems you're asking about.
I ended up using google chrome's developer tools. It uses the webkit engine just like safari, so it's the closes thing I have.
I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)