I have stumbled upon the world of javascripting and css just moments ago and I have been given a project by my adviser on interactive maps.
The problem is I don't have a clue on how i should start this project and one thing I want to know and find out is that How can I make an interactive map with just javascript , css and a little bit of php or cms?
I found these sites:
http://www.lglab.co.uk/usaSVG/advanced/index.html
http://edition.cnn.com/ELECTION/2012/ecalculator#?battleground
both are related to what I'm about to do.
I want to know how I could be able to code an interactive map like those in the examples above with a little bit of customization and without paying for tools
Try OpenLayers [ http://openlayers.org/ ] - its a free and open source javascript mapping toolkit. Check the examples for interaction and events and all that.
You need your data in some vector format - GeoJSON, GML - something like that. Then write a whole bunch of javascript to add layers to the base map and handle events.
Other Open Source Javascript map toolkits are available (eg Leaflet) but OpenLayers is the heavyweight master.
You need to learn SVG - the only way you can really make event-driven polygons.
See: http://www.netzgesta.de/mapper/
You can use geoJSON for this.
see http://palewi.re/posts/2012/03/26/leaflet-recipe-hover-events-features-and-polygons/
Related
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.
I would like to create my own map, based on the GoogleMaps functions. But not with the real world map. The map I want to create is a fantasy map. For example I want to make a map of „Middle Earth“ (Lord of the Ring) - not really but some kind like that :-)
I have already found some free libraries but this are always based on the real map of the earth.
It would be ok if it has only the simplest functions, like scrolling (zooming), add some pins or stuff like that.
No routing stuff needed...
You could use a mapping tool like http://leafletjs.com/ and load in custom tiles.
This guy used it I think to create an interactive map of Guild Wars 2 https://github.com/lpdumas/gw2cartographers I had a brief look at it a while ago, quite a lot of code
Another option for the mapping functionality would be OpenLayers, in practice it is fairly similar in usage to the Google Maps API if you have any experience with this. It's open source and easy to use.
You will however have to provide your own custom map tiles.
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 want to create a web based tool that allows people to visualise semantic web ontologies. The visualisation will look like a tree structure. I want people to be able to zoom in and zoom out the way they can with Google Maps, to get a close look to make a selection or to get a overview of the main topics etc.
Can you provide some pointers regarding the zoom in/zoom out part. Maybe a jQuery library that provides these features?
PS: I know such tools already exist, but I think I have a few new ideas to try out during my weekends.
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).