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
Related
It has been a long time since I have had to do Image Mapping! Probably like 4-5 years.
The last time I achieved this using the tag and creating tags for polygonal shapes. This of course works, and is still supported html, even in HTML5. Question is though, is this still a good way to go for image mapping? Or should i scrap this direction and aim to use Canvas or SVG techniques instead?
There are a couple of factors in regards to the decision:
The client uses IE7, so the solution has to work with IE7 and IE8, hence me thinking not to use SVG or Canvas, it would be easier I guess to use the old school map tag, at least it will easily work across all platforms.
The Map has quite custom styles (strokes around the areas with a margin gap too)
Each area has a rollover state, with a popup with content unique for each region. This will have to be achieved with JS. Are there any issues using JS to interact with the DOM structure of the map using map tag?
It's not essential, but I would to make the map somewhat responsive to the viewport.
Using the tag frankly feels really old school, dated and dirty. But, to be honest for my case, it seems like the most suited solution. What does everyone think?
Any feedback welcome,
Thanks,
Craig
For your requirements I think best suite is SVG. By some work around you can make use of all time favorite jQuery with SVG and build cool stuff so quickly. I was able to develope a ticket booking tool on theaters with SVG maps within two weeks.
Also now every one needs every thing on mobile and it works on mobile with just no efforts.
Try to convince client to upgrade IE, that will be best for you. All the best.
I'm searching for a JS framework that is compatible with CreateJS and KineticJS to create tooltips on a canvas.
I'm making an app that uses both CreateJSs and KineticJS and I want to draw tooltips on both of them (without using two libraries).
Thank you.
There are dozens (if not hundreds) of tooltip scripts out there—just ask google!
I assume that since you want to support both createJS and kineticJS that you must have already coded the trigger that requests a tooltip.
With that in mind, here is one tooltip library: http://www.opentip.org/documentation.html
It’s open-source so you can use/modify it freely.
It’s controlled by javascript so you have createJS/kineticJS independence while still working in JS.
It uses html canvas to display the tip so customizations should be familiar to you.
The tip-canvas is temporary and it floats so it should not interfere with your main canvas.
It allows you to offset the tooltip, so your code can exactly position the tip as you need.
I want to create not complex interactive web application. It has some pinboard and user can create many simple objects on this pinboard (e.g. many small circles). After this user can:
move these objects
delete some of them or create new ones
make multiple selection and move/rotate elements of selected group
place members of the selected group in some special order (grid, line, circle, etc)
Zoom in/out pinboard
I think that I can use Flash/Flex or JavaScript/SVG/VML for this purpose. Disadvantage of Flash is that user must have plugin. Minus of JS/SVG/VML is that there aren't such powerfull developing tools as in Flash case, but if we use some library (like http://raphaeljs.com/) application won't require flash plug-in.
I'm finding right tool for this aim. So give me some recommendations, please. Thanks in advance.
I believe that you can achieve your goals without Flash using HTML(5), JavaScript and not the least the Canvas element present in HTML5.
Bottomline is, unless you today require your application to animate a lot of objects with framerates approaching three digits, the above should suffice fine and will also pair you with a prospective Web development platform. I am often sceptical of the new stuff, but HTML5 and Canvas are fairly standardized, patent-free and are being actively adopted.
The only benefit of going with Flash that I can think of is being backed by a rich API that does 2D as well as 3D, and the fact that you can later port your ActionScript code to say, JavaScript when you finally decide to go with HTML+JavaScript instead. Aside from having to perhaps rewrite part of your drawing stack, your ActionScript code will require minimal (syntactic mostly) changes.
I would still advise you to go with my first suggestion, unless you need live (camera) video publishing, 3D, sound editing and few features not available easily outside Flash Player. Which I don't think you will need.
You might want to have a look at existing similar projects, such as SVG Edit (MIT license).
I started to create a script that allows me to split a big image into small pieces,to zoom, drag , etc.
I want to know what are the possibilities to load the small images just in the active area like in Google Maps (visible). I thought to try to determine the approximate location of one element with some calcules and to determine the element with document.elementFromPoint, but it's not a cross browser solution.
Another solution could be: loading from the beginning just the images from active area and when the user drag or zoom the script must calculate the elements that are new in active area.
see here what I mean active and inactive area: http://i.stack.imgur.com/mRY5K.jpg
PS: I searched the entire site but I did not found an answer. I read also this topic : How does Google Maps work? , but I would like to develop myself the script. (I don't need the complexity of Google Maps, just few features)
Look into DeepZoom. Its an opensource project that does exactly what you want. Its written for .net... but i think it might be what your looking for
DeepZoom is created by SeaDragon and is built for silverlight but they also have a Javascript implementation too called SeaDragon Ajax
I have integrated various WYSIWYG HTML editors over the past few years, but I think I have hit a brick wall on this one.
We need a way for people to edit text that turns into VML/SVG when rendered, but remains editable, with minimal styling such as bold, italic, font face and size, and if possible, ability to create a text region anywhere on the canvas. Google Docs has what appears to be one in their presentation editor. Something like that would work ~ its very close to what we are looking for.
Does anyone know of a commercial or free editor that does this (must be browser based), and if not, has anyone approached doing this, and if so, what were your results. Any other info, links, suggestions etc are welcome - I seem to have hit a brick wall on this one.
Thanks.
You might try http://svg-edit.googlecode.com/ though we do not translate to VML (we require IE users to install the Google Chrome Frame plugin).
One important question first: Why specifically should the output of the WYSIWYG editor be in VML/SVG?
===
I am not aware of any existing editor that fits your description. You may have to write one yourself. If you are going to roll your own, I have two suggestions; one of which I am less confident about in terms of capability and one where I am not entirely sure about the performance ramifications because of the sheer amount of libraries involved. Either way, these are the two best bets in my opinion:
1) If you're intent upon VML/SVG, one library I know that can bring the two together is RaphaelJS, which has some degree of text support, but I'm really not sure how sophisticated the degree of manipulation of the text is:
Raphael JS lib: http://raphaeljs.com/index.html
2) Can you instead use VML/Canvas? I would recommend using VML/Canvas via the exCanvas library (which allows you to write code using the HTML5 canvas element, which is automagically translated to VML in IE/Trident browsers), in addition to the new canvas-text library.
Generic canvas information (generic drawing api):
https://developer.mozilla.org/en/Canvas_tutorial
exCanvas (IE compatability layer for canvas element)
http://excanvas.sourceforge.net/
canvas-text (text-specific extension to browsers with poor canvas text support):
http://ajaxian.com/archives/canvas-text-add-text-functions-to-subpar-canvas-implementations