creating custom interactive map using jquery and html5 - javascript

I want to create a custom interactive map which will be similar to this one: http://shows.marketart.com/surf10/
the example is developed using flash, and I want to make somthing similar to it using jquery and html5 if possible, the main requirements are: zooming, plotting on the map,
thank you in advance for any recommendations
regards,

I see two possibilities:
1- Do a image map and use a image point plugin like This with a tooltip plugin, if you need.
2- See this Question and do with css and use tool tip plugin.
For zoom, you can easy use a Jquery plugin

There are similar jQuery plugins too. For example:
http://www.virtualsen.se/map/

Related

how to make same chart with lightweight chart with javascript

I am use https://github.com/tradingview/lightweight-charts javascript package.
As you can see in the picture, orders are shown in green boxes on the bitmex exchange. I want to learn how I can do this in my own table. I could not find a similar example in the document. Can you help me ?
I'm afraid it couldn't be done with lightweight-charts. If you'd like to add them and want to use TradingView's charts, I'd suggest you take charting library instead.

Creating charts in java or javascript without images

One of the project requirements for my new java web project is to have dynamic charts that will load really fast.
While in discussion , it was asked if we could implement charts without using images ie without loading jpg, png files etc. Also files like pdf cannot be used.
Basically my question is
Can charts be implemented in jsp/javascript without using images,pdf etc ?
ie even api's used should not provide end result as image,or pdf etc.
I did not say no right away , as I have implemented charts in console applications in C on screen. Can we do something like that on a webpage ? ie show a graph by drawing on screen dots,lines,circles etc.But it should be possible inside a div ?
PS : Comments and answer from Lucien Stals helped to understand that the technology i was looking for was svg.
I am looking for some nudging in the right direction from some of the experienced java , javascript programmers in SO.
Many JavaScript chart libraries exist that render in HTML5 on your page. You can probably find one that meets other requirements or wishes of your team, since each have feature areas in which they excel. http://www.zingchart.com has also been adding many ways to include them in your charts if you decide to go with something other than vanilla JavaScript (jQuery, Angular, etc). Full disclosure: I'm on the ZingChart team. I can help you weigh the pro's and con's if you find a few that catch your interest.
A simple bar chart would be easy enough to create with DIVs and CSS.
Anything more complicated and I think you are talking SVG, which could be drawn using http://raphaeljs.com/, or maybe http://d3js.org/ .
Also look at the HTML5 canvas element.
I would suggest to use Google Chart Framework. I did use it in past for my project and it is good.
You can check highcharts http://www.highcharts.com/ . This can be integrated easily with your javascript .
Most of this js chart plugins expects data in array or json format and can dynamically render the charts.Easy to integrate in the web pages
jgccharts.js Jquery charts
jquery charts plugin

Building an Image Editor with HTML 5 and Canvas

I wanted to build a product customizer similar to http://www.getuncommon.com. But instead of Flash, I will utilize HTML5 canvas and Javascript.
Is there a library which I can use to create and achieve similar editor/product customizer as Uncommon?
I did look at jQuery UI but it is seem more focused on interface than creating my own editor.
Take a look at Fabric.js canvas library.
We're using it in production for design editor on printio.ru
I did something similar to this a while ago.
I used JQuery and Raphael JS. Raphael uses VML in Internet Explorer and SVG and Canvas in other browsers making it a very good cross-browser compatible option.
A good demo of a project using Raphael can be found here.
I used a lot of code from this demo to develop my own tool.
Hope that helps.
I used kineticjs to create an E-Card editor. It was a great experience using the library.

quickest way to make clickable imagemap of the US

what is the quickest way to make clickable imagemap of the US? Is there any jquery plugin available for this?
Thanks
My plugin, that offers some features different from the others mentioned: http://www.outsharked.com/imagemapster
But generally speaking if all you want is a "clickable map" you don't even need jQuery - just use an HTML image map, and bind a click event to an area. But using the plugin offers feature like area highlighting/selection/grouping and so on.
Try to use this jQuery plugin: http://jvectormap.owl-hollow.net/
I created a mapping solution using SVG and jQuery which is accessible at
Makeaclickablemap.
Creating and saving a clickable US map is free, but it is also possible to commit edits later and there are also many other maps available.
Just use one of "image map generators" there are a lot of them in the internet. You don't even need JS for that. Here is the link to one of them: http://www.image-maps.com
Hi found the thing i was looking for here - Using JQuery hover with HTML image map
thanks :)

Javascript based interactive map application

Greetings,
I'm looking for a quick way of slicing the map of a country by regions and when clicked on a specific region, showing some gui with the info of the region. I am looking for a quick framework, plugin or such to achieve this swiftly. I know it can easily be achieved using flash but I want to rely on javascript instead.
Cheers
have you had a look at Seadragon? I know it will do the slicing and the zooming for you but you'd probably have to extend it by yourself to get an info window to pop up.
You may have a look at http://www.openlayers.org
Have you checked Web Maps Lite from CloudMade?
http://developers.cloudmade.com/projects/show/web-maps-lite
You may just add CM.Polygon for each region, and then processes onClick event.
Combine these two examples:
http://developers.cloudmade.com/projects/web-maps-lite/examples/info-window
http://developers.cloudmade.com/projects/web-maps-lite/examples/polylines-and-polygons

Categories

Resources