Responsive image maps using SVG
I'm pretty happy that I got this working - thought I'd share.
I received this plan from the illustrator as an SVG, and opened it as code rather than as an image. I then identified each component (polygon, polylines etc) and copied that data into records within CMSB. ie. I broke the single image into manageable lots for sale.
I then associated additional information with each record, such as "sold/available/onhold" etc and regenerated the SVG using the code generator from CMSB - but now allowing me to identify each component and adding CSS classes to them.
<?php foreach ($lotsRecords as $record): ?>
<<?php echo htmlencode($record['svg_type']) ?> id="<?php echo htmlencode($record['new_lot']) ?>" class="lot <?php echo strtolower($record['status:label']) ?> lotModalLaunch" data-toggle="modal" data-id="<?php echo htmlencode($record['new_lot']) ?>" <?php echo ($record['code']) ?>/>
<?php endforeach ?>
I've now got a fully responsive image map - managed by CMSB. It will display without loss of quality at any scale, for websites / mobile apps etc. File size 70kb (the PDF version is 800kb)
There's a bit of messing around with SVG's, and making them scale properly in IE is a pain - but good result in the end. Will be great to extend this to more animated navigational elements, interactive info-graphics etc.
This sounds really cool. Thanks for posting!
Ross Fairbairn - Consulting
Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/