Skip to main content
< All Topics
Print

Fashion Island Mapplic Map Documentation

PostedMay 2, 2022
UpdatedMay 2, 2022
ByLeesa Zimmer

This documentation is from Creative Slice here. 

Fashion Island Shopping Map, using Mapplic https://www.mapplic.com/

  • These files must be run on a web server to load correctly.

Map Files

All SVG and PNG map files are located in /mapplic/maps/

Background Images

Background images are used to show the streets, parking lots, fountains and other non-clickable items.

  • Use the FI-Map-Background_DATE.ai file to make any background changes.
  • Toggle layers on and off to save background files for each map layer (reference the existing background-TYPE.png for reference)
  • Export the files as a 4x PNG for optimal clarify. Be sure to compress the final image using a tool like https://imageoptim.com/.

Map SVGs

Instructions for saving SVG files from Adobe Illustrator: https://www.mapplic.com/docs/#saving

  • To edit map SVG simply open it in Adobe Illustrator.
  • The MLOC-stores layer contains all suite data and must be named in a specific manner with all lowercase letters and no spacing so it connects to the interactive map. For example, use suite123, NOT Suite 123 or 123 OR Layer 123
  • The background images is linked to the SVG file, however if this doesn’t load for some reason you can edit the output SVG file. Look for the  tag around line 5 and use a format like this: <image overflow=”visible” enable-background=”new” width=”1144″ height=”946″ xlink:href=”maps/background-lower.png”></image>

Important Development Files & Connections

  • Backgrounds are linked to SVGs from an  tag within the SVG
  • SVG files, and suites, are specified in /data.json
  • The /mod/ directory includes our custom UI graphics along with CSS and JS modifications to the core mapplic plugin.
  • The JSON feed is specified in /mod/mapplic-modifications.js around line 26 (we’ve added an all_TEST.json file for local testing)

Mapplic Tips

  • If you set developer: ‘true’ (.mapplic() function), the x/y coordinate of the cursor will show up in the map container.
  • deeplinking is set to ‘false’. If set to true, it will update the url with a query variable. Ideally this allows the visitor come back to a specific store. It didn’t appear to actually work with the modifications file in place, and it caused a tooltip to load with the number in it.