Map using Mapbox shows oddly on large mashup

Home Forums MapPress Support Map using Mapbox shows oddly on large mashup

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #18470
    joew
    Participant

      When displaying a page using this shortcode, each icon gets a little box around it and the screen is tiled. [mashup query="post_type=any&posts_per_page=-1" width="100%" height="650"]

      https://www.ruralswalabama.org/map/

      However, when displaying the same number of attractions here in an archive view, the map displays correctly.

      https://www.ruralswalabama.org/attraction/

      What can I do?

      #18471
      joew
      Participant

        I’m noticing that when it runs this way, things display correctly.

        <?php echo do_shortcode(‘[mashup query="types=@types&towns=@towns&counties=@counties&tag=@tag&posts_per_page=-1" hideempty="true" width="100%" height="350px"]
        ‘); ?><div class=spacer-map></div>

        Like when it runs from inside an archive.php page. But when it is inserted as a shortcode, it does not.

        #18472
        Chris
        Keymaster

          Hi,

          It looks like this is due to the theme interfering with the Leaflet map styles.  I’ve pasted one of the relevant theme sections below.
          In most browsers you can open development tools using F12, which will let you see what CSS is applied to a particular element.
          For example, it looks like the theme is applying background: #fff to ALL images on the page, including the map icons.
          Some options to fix it include:
          a) Switch themes
          b) Remove that CSS from the theme’s ‘styles.css’
          c) Add you own override at the bottom of syles.css, for example:
          .mapp-layout img { background: none !important; }
          Here’s the styles.css section:
          
          .post img,
          .type-page img,
          .type-feature img,
          .type-testimonial img,
          .type-portfolio img,
          .search-results .page img,
          .search-results .type-product img,
          .search-results .type-feature img,
          .search-results .type-testimonial img,
          .search-results .type-portfolio img,
          .post img.thumbnail,
          .type-page img.thumbnail,
          .type-feature img.thumbnail,
          .type-testimonial img.thumbnail,
          .type-portfolio img.thumbnail,
          .search-results .page img.thumbnail,
          .search-results .type-product img.thumbnail,
          .search-results .type-feature img.thumbnail,
          .search-results .type-testimonial img.thumbnail,
          .search-results .type-portfolio img.thumbnail {
            /* padding: .53em; */
            /* border: 1px solid #eaeaea; */
            background: #fff;
            max-width: 100%;
            height: auto;
          }
          #18473
          joew
          Participant

            Thanks so much. I should have realized it was the very old theme that I’m using! I used your css above (and added an additional border element) .mapp-layout img { background: none !important; border: 0px; } and it more or less solved my problem. Thanks so much for the help! I should have thought it was a CSS issue instead of something more problematic….

          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.