Zoomable & Clickable SVG Navigation
Don't get me wrong, FileMaker has a lot of cool things it can do all on its own. In fact, they keep adding more and more useful tools which makes it easy to create great working software.
There are, however, those certain things that FileMaker just can't do on it's own. For example, you can't interact with images within container fields quite like you can certain web pages. Yet, right in front of us, we have the wonderfully powerful Web Viewer which exposes access to the power of JavaScript and all those wonderfully free libraries.
Enter the common scenario where an easy-to-understand image file directly represents a nicely complex data structure. We'd like to use the image to navigate the data and we can certainly add it directly to a layout and overlay buttons over it. But, hold your horses there señor gung-ho developer. What if your image is so complex that it would be absolutely tiny if you placed it on the layout at 100%.
Well, that's when we ring up our wonderful friend Mr. SVG. He'll take care of us. He's scalable you know! So, how about a zoomable and clickable SVG which directly represents how we'd like users to navigate the data? No problem!
Comments
Mapped Link File
Hi, looks great, the zip did not contain the Mapped Links.fmp12 file.
mapped file link source
Hi - click on the Mapping File button at the bottom of the technique screen and all will be revealed :-)
Great video and technique, Matt. Thanks
Mapped Links changes
If I have just four svg objects, can I just manually enter the four "onclick="window.location..." modifications into the svg file or does the Mapped Links file make other modifications to the svg file?
Answered my own question,
Answered my own question, "onclick="window.location..." is the only thing that needs to change. Didn't to use the Mapped Links file, thanks.
OmniGraffle Object Data
Hi,
Very interesting video, thanks.
Rather than using the text on the graphic object in OmniGraffle, is it possible to use the Object Data? I have several maps where the graphic objects carry user data codes (e.g. <%Userdata Ref%> <%graphicname%>). Would it make it any easier to transfer from the drawing package to the database by using these?
Thanks,
Stephen
Touch device support
Hi,
great solution – what i have to do, to use it on iPad FM-Go?
I try to change the event onclick to touchstart – but i think, it´s more to do!?
Thanks
Michael
Web direct support?
Hi,
Thanks for sharing this technique.
Does it work in web direct?
Thanks,
Serge.