I need a map rotation feature just like the one available from openLayers 3 (check example below):
http://ol3js.org/en/master/examples/drag-rotate-and-zoom.html
Is there a way to do the same thing using the leafletjs library, or perhaps, using a custom plugin?
Leaflet doesn't currently support map rotation, because it wouldn't be supported by its full range of browsers. This also isn't supported by plugins, since rotation logic would need to be implemented in Leaflet core.
Related
I am using this lib https://github.com/codenameone/cn1-codescan to scan QR codes in my application.
As I understand there is no functionality to change scanning/camera view right now in this lib
Currently, scanning view for Android it is just fullscreen camera view and for iOS smth like this http://zbar.sourceforge.net/iphone/userguide/scanning.html
Is there any way to add an overall image or change that camera view? Or is there any plans to add some LayredPane to the camera view in this lib?
This won't work for cn1-codescan since that library is implemented as an external native view. So we're effectively leaving Codename One to perform the scan. You can implement this natively within the library.
Alternatively you can build a library that uses a widget approach instead of moving to a separate activity/view like the current solution. If it uses a peer component (like the camera kit or the Google Maps cn1libs) then you can implement overlays in Codename One.
Notice that we only use zbar on iOS and on Android we use an activity which uses an external app to do the scanning. There's a 3rd party QR scanner (from Little Monkey) which embeds an Android implementation into the cn1lib. I'm not sure about the overlay implementation there.
I was wondering is there a way to use animation exported from spine into a react application?
If there is one, what process should I follow (If there is a documentation or anything that will help)
Thanks a lot!
It is not specific to React, I mean Spine generates 2D animations that can be used with multiple platforms and languages thanks to spine runtimes.
For example if you want to integrate the animation in your React app you can use the Typescript (it works with Javascript as well) runtime available here
There're multiple ways to do it, the one I prefer is using the canvas API
, you can find an example here
And it is as simple as using the canvas HTML tag wrapped in a React component, with this library react-canvas
One last point to highlight, if you are trying to use Spine for HTML element animation, it is not the proper tool for this, there're other libraries that are better for this type of use cases, like react-spring
I have a sample data that I want to visualize by a graph like this in React Js:
And this is the link to the JavaScript code:
Burtin’s Antibiotics Protovis
Does anyone has any idea that which React graph library I can use for having exactly this?
Thanks in advance
The library that this example is taken from is deprecated:
Protovis is no longer under active development.
The final release of Protovis was v3.3.1 (4.7 MB). The Protovis team
is now developing a new visualization library, D3.js, with improved
support for animation and interaction. D3 builds on many of the
concepts in Protovis; for more details, please read the introduction
and browse the examples.
So you should continue your investigations into D3 and React. Here is an article about it: https://medium.com/turo-engineering/react-meets-d3-6a40881d0d73
When one talks about rendering charts or any kind of data
visualization in the web, D3.js is the de facto standard. So, if we
want to build beautiful and reusable charts, we should definitely
leverage the power of D3.
How do we integrate it? But we have a problem, our web client is built
in React and this library doesn’t get along well with D3: both use
very different approaches to update the DOM. While React uses a
virtual DOM and a well defined lifecycle to calculate and optimize DOM
updates, D3 uses the browser DOM and data attributes.
If we want to build nice charts, with neat animations and don’t have
our heads burst when dealing with SVG elements and their positioning,
using D3 is a must, so we need to find a way so these two libraries
can play well together.
I'm interested in creating maps and map "mashups" online, and have been pointed to Leaflet as a great tool to help me do what I want.
Leaflet's documentation is clear and easy to follow, but it demands pre-existing knowledge of how to use tools like CloudMade. For instance, Leaflet documentation starts by telling the user something like:
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
Which I sort of understand, but I don't know how to get the map, point to the map, create the map, etc. There seems to be a huge "how to make maps work on Web sites" chunk of knowledge that's required before diving into Leaflet.
CloudMade also throws you in at the very deep end.
Where do I pick up the Maps 101 knowledge I need to make sense of how all this works?
I assume you were following the Quick-Start Tutorial on Leaflet's website? You can look at the source of the example for the full break down on how it works internally. Leaflet doesn't use any Cloudmade specific stuff other than itself, so you shouldn't have to refer to the Cloudmade tool.
If you're looking for some basic Javascript tutorials (the language that Leaflet uses), there are some mentioned on Language Books/Tutorials for Popular Languages.
Leaflet by itself doesn't include any maps (as opposed to Bing Maps and Google Maps for example). All the examples they display with Cloudmade are exactly that, just examples.
For instance, instead of using Cloudmade you could use OpenStreetMap (OSM) tiles directly, like this:
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
Or use tiles from other sources, or even your own tiles.
I'm guessing that what threw you off on the quick-start was the reference to Cloudmade. Don't mind that. Instead of going through the fuss of getting a Cloudmade key just create the layer as I've shown above. Everything will work the same and the only thing that will differ is the imagery on the background.
I am using appcelerator titanium and i am trying to build a mobile app that allows you to change an imageview brightness and contrast by using touch events.
It is not possible by using Titanium standard features, so i am guessing if i can import some external libraries like pixastic that can help me do so.
is it possible? how can i do that?
Thanks
sure. pixastic is a javascript library so just include it with
Ti.include("path/to/pixastic");
if you intent to write a native code for your algorithms you can enrich your project with a objective-c module (or java module).