I would like to create an interactive map on my website where you can hover over a location and it will animate showing some links that are clickable and will take the client to another page displaying graphs about that location. What should I learn in order to achieve this? Thanks
I'm assuming you don't know much about web development yet, so start with some HTML tutorials (such as this, or this, or this) and Javascript tutorials (such as this, or this, or this). There's a number of ways of creating graphics on web pages (Chart.js is a great library that takes all the hard work out of it).
Then you might want to look into learning how the Google Maps API works. It's a pretty dang flexible API.
Related
I spent a lot of time looking for JS script for interactive svg maps.
I already found https://imagemappro.com/demo-mall/ and https://mapplic.com/maps/world?location=de. Those two look good and work well. But both of them are using JQ.
I don't want to include JQ to one page, one time use, If possible.
Basically I'm looking for a script that (does not matter if paid):
Have a good API that allows me to select SVG elements and zoom into it etc.
Allow to click into the element and display a popup on top of it with some content.
Responsive and mobile friendly.
Support Drag, zoom.
NO JQ dependency.
Have to support custom SVG.
Allow me to link into an area, or some API hook that allows it.
Thanks for any sugestions.
Mm, tough question. With D3.js library you can do all that but it will require some learning to properly script it.
If you have WordPress then probably easier map plugin than Mapplic (that I still like most) is MapSVG. They offer world maps for free (with named country shapes e.g they have IDs) that you can use without buying MapSVG etc.
Other than that Google and GitHub search would give you various options, this library appears to be widely used (and you can have links in the SVG):
https://github.com/bumbu/svg-pan-zoom
So I am trying to create a web page that is an image of a tree (like a tree of life kinda, but much smaller) that you can zoom to see a more detailed view of the branches and as you zoom Text and links that fixed to certain parts of the tree (like the end of a certain branch for example) come in to view. I know there is tiler apis like the Google Maps Api or MapTiler but I'm just not sure if these will work for what I am trying to do. What I am trying to do is make a user interface similar to OneZoom's (www.onezoom.org).
Thanks for the help. Cheers.
MapTiler Desktop was used for rendering, for instance, Disqus Universe. Is that what are you looking for?
I'm using WinJS 4.4.3 to make a web app. And I'm trying to recreate the Start Menu/Screen. I haven't seen any tutorials on the web or even on Microsoft's website (new or former playground) that shows how to do something like this. Also, I'd like the push animation those tiles display. If there is a way to make tiles like that, is there an animation similar to that?
So in short, how do I make a tile in WinJS (web)?
I just used MetroUICSS to create the tiles. It's much easier. WinJS documentation for making web apps (not store apps) is lacking. The relevant information is hidden away. For anyone who maybe interested. Tiles in grid layout.
How would you do to create a chart like this, interactive (i.e. with links and tooltips), in an HTML page?
From what I know about SVG I think it's the right direction to take (no Flash anyway), but I'd like to know what would be the path you'd take first in order to have an interactive chart looking like this on a web page.
I'm not asking for the details but just where to begin to look. I know JavaScript quite well, but I have never dealt with any SVG libraries.
checkout d3.js examples, this example looks very close to your pic.
I offer to use Raphael library (http://raphaeljs.com/) and if you like to make more complex or using 3d objects you can use webgl with treejs library (http://threejs.org/) .. you can find example and demo for charts or other documents in websites..
I'm searching for a Javascript library to create line charts like the ones of Google Analytics. When the mouse is over a point, a box shows you the data.
An example is at http://wikirank.com/en
No Flash or Air, only JS and client-side Canvas...
Better if Free...
Edit: If you want a free library, try Flot.
Emprise Charts is a commercial library that I've seen featured on news sites.
Another option is to use Google's visualization APIs.It's pretty easy to use, and they have a several options for displaying data. One thing to keep in mind is some of the visualizations require you to send your data to their server, though none of the canvas/svg ones have this requirement.
There's JS-Charts which looks pretty awesome.
Or, if you fancy rolling your own you can create your own charting component using this library...
As an alternative to Flot, if you are using Prototype.js as JS framework, you can use Flotr.
Dojo also has something similar, though the example shown doesn't have similar functionalities but can be implemented to behave like the one you want,
http://dojocampus.org/explorer/#Dojox_Charting_2D_Lines,%20Markers,%20No%20Axes,%20Purple%20Theme,%20Custom%20Min%20Max
Raphael.js is pretty good at making graphs with svg/vml, you have to write some custom code though, but you can make some really nice animation with it, next to that it's compatible with ie6+ (only not with android 2 browsers).