I don't know javascript (unfortunately) and I'd like to make a mindmap-like "organization chart" similar to this one:
This map should have an ability to zoom-in and zoom-out similar to google maps, and the ability to arbitrarily connect nodes. So it is more like a free graph, not like an ordinal tree. Mindomo makes this pretty well, but it is commercial and flash-oriented.
Does anybody know of a similar solution?
My research pointed me out that this could be a svg sketch, possibly generated offline, or maybe something using canvas. A click on the node should redirect to some web location.
Google maps is good because it also hides some details, and so should do this graph map in zoomed out projection.
A few important questions:
Do you need this generated in real time based on some underlying dataset?
Aside from zooming, should the user be able to manually open/close nodes?
You can manually generate this simply using some free tools:
MindMeister
xmind
freemind
although non-traditional, can you consider using Prezi?
Related
I am new to coding and wanted to get some hands on practice with a project I have in mind. Here it is:
Let's say you have blank page and on the side of a screen you have several items you can choose to draw on the blank page. For example the background can be mountains, the ocean, a forest etc. On top of that you can place a house, a church or another selectable element. Whatever you like.
It is like a picture editor where you can put together a picture with different pre-given elements. Or like in video games where you can create your own character.
What would I need to build a web application for that kind of thing?
This link should get you started but it won't be the complete answer to your question - http://www.webdesignerdepot.com/2013/08/how-to-use-html5s-drag-and-drop/
Essentially, you can achieve your image dragging and dropping using similar techniques. It will require a bit of Spike work from yourself, and looking into how HTML5 can handle drag and drop. I discovered this resource fairly quickly and I think the solution you want isn't as complicated as you may think, it just requires a bit of know-how regarding drag and drop operations within HTML5 :-)
Also, there may already be some JavaScript based API's that do this sort of thing easier but I'm not too aware - I suppose starting this way could be a great introduction for you and you may wish to expand once you've done some work for it :-)
Hope this helps you and your coding journey!
I looked over some popular frameworks like Tableau, FusionCharts, Charts.js, etc but didn't find a chart specific to my requirement. I need to visualize certain data in vizify.com or mind-map like manner i.e. one big circle at the center, an several small circles branching out. Each circle will have short text inside. It's not like a network graph where one node is connected to multiple node. It need not be interactive, but some fluid animation will be nice.
Platform: Windows 8 (Windows Store) app OR the web.
Please help.
I assume you could embed a web page inside of your app. If so, I would use D3.js. It is extremely powerful and flexible. There a ton of examples on their examples page.
I'm investigating how I might best create an app that allows drawing of arbitrary shapes, images, etc. on google maps, based on lat/lon coords of the shapes or coords/rotations for images. Surprisingly I haven't found anything out there that offers much in the way of flexibility. Scribble-maps has created something close to what I'd aim for, but they're using flash. I'd ideally like to build something that draws on the google maps html map.
I suppose I could build a div, lay it on top of the map, and if I can listen on the map scroll/zoom events I should be able to figure out how to do everything myself. Thoughts?
You need to use overlays, check the Google API documentation.
There's an example of mouse interaction to draw lines in the Polyline Arrays section. To show images have a look at the Ground Overlays section.
I know this is a very a late response, but we have launched an API for Scribble Maps. You can check it out at http://www.scribblemaps.com/api/
A few days ago I've explored geomaps and, however, it turned out to be easy to change the properties of the elements.
But I have two questions:
I'd like to add rivers and forests on the maps. So Ive considered to set a background image instead of the geomaps figure. But I can't find a way to get this one fixed. Is there a way to set a background picture for a country or region?
How can I change the shape of the "bubbles" when you select a city e.g. "London"? I'd like to change it to a square.
Thanks in advance for your help!
Unfortunately what you're looking for is not available in geocharts in their current implementation.
Using a background image is possible in the sense that you can use CSS to make all shapes in the map transparent, and use a background image in the div to make it appear as if the little circles are being drawn on a map with forest and rivers, but you will run in to two big hurdles:
Your map will need to be identical in size/layout to the Google Maps SVG
If Google ever changes the SVG they use (or the view/projection they use) you will need to edit yours too
This isn't ideal, obviously. You could work around it by creating custom javascript to write rivers and forests on your map, but that is going to be a huge headache (especially if you are using multiple maps/views).
As for the circles, you can't change them to squares without hacking the actual SVG in the background with javascript. While this is definitely possible (if you're really good with SVG/Javascript), it again isn't using any of the fancy features of geocharts, and is more just a custom solution that will have to be updated if/when google updates their API.
Rather than doing it that way, you may want to look in to the same implementation on google maps itself. That will allow you to use custom markers, draw custom shapes, etc. with a lot more flexibility (and a much more stable API).
I would like to create a website that has a large image of a tree from a distance on. When you zoom in it shows more defined image of the branches and then zooming in further the words will display in the braches. You can scroll the image to see all the other words. So its like google maps but for my own image.
I have tried looking for examples etc but can only find ones of maps. I believe I have to make different tiles for the different levels.
Is there any examples or tutorials out there that could help me or is there a specific name for what I should be looking for.
The easiest way to do it is to use a tool called MapTiler.
It's free, and you just follow a really simple wizard that just hides all the complexity from the process.
Anyway, I've posted a tutorial exactly on this topic which you can check here.
I created a Java based version of a Google Map Tiler tool here:
https://github.com/devldevelopment/googlemaptiler
This will help you cut up images as per Map Tiler but is free. An example with Javascript is provided on the github readme.
Thanks