Displaying an html5 map on a page

  • Resolved gramm

    (@gramm)


    9 years, 12 months ago

    I created an html5-compatible map from Avenza’s MAPublisher Web Author (a plug-in that works within Adobe Illustrator). Web Author outputs an html file and a data folder. The data folder contains an Avenza viewer (javascript), j-query and openseadragon javascript files, several css, and map image tiles.

    I put the map online at https://cartagram.com/VestaviaHills/VestaviaHills.html but it’s sitting in a non-WordPress page at my site.

    I added the html code to a new WordPress page and set the links properly to the data folder. But the resulting page only shows the navigation icons for the map. Check it out at https://www.cartagram.com/vestavia-hills.

    Is something in the css or the div hiding the rest of the map? (BTW: Avenza has an FAQ about adding a map to a web page but it doesn’t cover WordPress pages, at https://www.avenza.com/mapublisher/mapwebauthor/faq.)

Viewing 1 replies (of 1 total)
  • Thread Starter gramm

    (@gramm)

    I figured it out with two solutions.

    The easiest was to add an iframe to the page and link it to the .html file created by Avenza’s MAP Web Author. The drawback is that floating captions for map markers are confined to the iframe. If you hover over one and bring up the floating caption box, it’s cut off where it intersects the boundary of the iframe.

    The second solution was to code the dimensions of the div (“map container”) in the CSS file for the theme (or child theme). I hadn’t given it enough vertical space to display the map.

Viewing 1 replies (of 1 total)
  • The topic ‘Displaying an html5 map on a page’ is closed to new replies.