So here's the scenario: I have an 800kb Adobe Illustrator file -- it's a topdown diagram of of a mall, with each individual shop marked with some text. Metadata showing square footage, availability, a number.
How would I put this on the web in a way that's interactive? I can simply export a PDF to the web, but that's not a great experience. I'd like to be able to zoom in and see detail (it's a big mall) and maybe be able to click to send an email or a message about an individual space to make an inquiry about it.
If it were 4-8 years ago, the natural answer is Macromedia Adobe Flash of course! But we're now in an era where people want to see these things on their phones.
Is it possible to do this in a way that works reasonably well? I tried loading the file using svgweb, but my browser (any browser) grinds to a halt, I think because of the the size of the file.
What are examples of maps that are cross browser, zoomable, and interactive?
What tools or libraries do people have success with in this area开发者_开发问答? it feels like GIS tools would be worthwhile here but might be overkill.
If you want to go for a tiled approach similar to google maps, check out polymaps.
If your svg is big then it's probably a good idea to split it somehow, either by level-of-detail / layers, or by tiles. Level of detail can be done with CSS media-queries for example, but note that that by itself doesn't make the filesize smaller. It should however have a positive effect on the look & feel.
If you want some simple zoom&pan controls that should work in all svg-capable browsers here's an example of that.
Adobe Illustrator can export to SVG which might be worth exploring.
Also, have you considered rasterizing and cutting the image into tiles? You could make something that's Google Maps-like.
精彩评论