Interactive Map on Click (SVG + jQuery)

This is my first question so please be gentle. I am looking to create an interactive SVG "site plan" map that populates a series of fields next to the map with data about each plot of land when clicking on that plot (lot number, lot size, lot price, etc.) I considered using only hover states, but am looking for a more mobile-friendly alternative and as such thought click would be a better option, hence my foray into jQuery. You can see the site map here. I'm very novice in regards to jQuery, and so my early attempts were verbose, not scalable and also, did not work (examples below).

SVG (inline in my html document, using only the first 2 of 103 lots for reference)

<g id="lotsPending">
  <rect x="234.2" y="21.6" class="yellowSold lot1" width="33.8" height="60"/>
  <rect x="201.6" y="21.6" class="yellowSold lot2" width="30.7" height="60"/>
</g>

...and the data to populate the fields beside the map:

    <div class="sitemap-specs">
      <h3>Lot No.</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">001</span>
        <span class="lot2 spec m-hide">002</span>
      </div>
      <h3>Status</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">PENDING</span>
        <span class="lot2 spec m-hide">PENDING</span>
      </div>
      <h3>Size</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">1.4ac</span>
        <span class="lot2 spec m-hide">1.6ac</span>
      </div>
      <h3>Price</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">$1,250,000</span>
        <span class="lot2 spec m-hide">$1,350,000</span>
      </div>
      <h3>Additional Info</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">Entry-way lot facing the north bound of the park.</span>
        <span class="lot2 spec m-hide">Row lot stationed near the north entrance of the park.</span>
      </div>
    </div>

jQuery

$('.lot1').click(function () {
  $('.spec').addClass("m-hide");
  setTimeout($('.lot1 spec').removeClass("m-hide"), 100);
});

My expectation was that upon clicking on the lot with the class .lot1 that all '.spec' objects would hide (the m-hide class in my CSS is a display: none), followed by the objects with the '.lot1 spec' classes having the m-hide class removed, allowing them to be visible. After doing some research I cannot seem to find an example of a map being built in a similar fashion, which leads me to believe that there is a better way that I am failing to pick up on.

Answers 1

  • Might just be a typo, but your selector is missing a period:

      setTimeout($('.lot1.spec').removeClass("m-hide"), 100);
    

    will remove the 'm-hide' class from elements with both 'lot1' and 'spec' classes, which is what you have, while

      setTimeout($('.lot1 spec').removeClass("m-hide"), 100);
    

    will remove the 'm-hide' class from a <spec> element that is a child of an element with 'lot1' class.

    & my 2 cents, with that many lots, I'd consider dynamically populating the fields with the correct data using jquery inside your click handler.


Related Articles