Question posted in
You can find the official documentation here.

How to change Mapbox store locator list to the dropdown and trigger href link – Jquery ajax

need some advice or help with Mapbox original sample JS code,
how to make from this peace of code dropdown instead of listings?

The idea is: change Mapbox store locator listings to the dropdown.
Any help would be nice, thanks!

I change some parts of code, but inside the dropdown is link I need to trigger this href link for map marker action, and here I need some help ..

I have this:
(JS)

/**
   * Add a listing for each store to the sidebar.
  **/
  function buildLocationList(data) {
    data.features.forEach(function(store, i){
      /**
       * Create a shortcut for `store.properties`,
       * which will be used several times below.
      **/
      var prop = store.properties;

      /* Add a new listing section to the sidebar. */
      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('option'));
      /* Assign a unique `id` to the listing. */
      listing.id = "listing-" + prop.id;
      /* Assign the `item` class to each listing for styling. */
      listing.className = 'item';

      /* Add the link to the individual listing created above. */
      var link = listing.appendChild(document.createElement('a'));
      link.href = '#';
      link.className = 'title';
      link.id = "link-" + prop.id;
      link.innerHTML = prop.text;

      /* Add details to the individual listing. */
      var details = listing.appendChild(document.createElement('span'));
      details.innerHTML = prop.text;
      details.innerHTML = prop.address;

      /**
       * Listen to the element and when it is clicked, do four things:
       * 1. Update the `currentFeature` to the store associated with the clicked link
       * 2. Fly to the point
       * 3. Close all other popups and display popup for clicked store
       * 4. Highlight listing in sidebar (and remove highlight for all other listings)
      **/
      link.addEventListener('click', function(e){
        for (var i=0; i < data.features.length; i++) {
          if (this.id === "link-" + data.features[i].properties.id) {
            var clickedListing = data.features[i];
            flyToStore(clickedListing);
            createPopUp(clickedListing);
          }
        }
        var activeItem = document.getElementsByClassName('active');
        if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');
      });
    });
  }

here is:
(html)

<div class='sidebar'>
  <select id='listings' class='listings'></select>
</div>

this is html after js do the magic:

<div class="sidebar">
  <select id="listings" class="listings">
<option id="listing-0" class="item"><a href="#" class="title" id="link-0">store1</a><span>Address here</span></option>

........ here is more options .......
</div>

need trigger <a href="#" class="title" id="link-0">store1</a> when dropdown selected?!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    here is the final code that works for me as I want it. hope its help someone to solve a similar problem ;;))

    a part of code from Mapbox JS I customize:

    /**
   * Add a listing for each store to the sidebar.
  **/
 function buildLocationList(data) {
    data.features.forEach(function(store, i){
      /**
       * Create a shortcut for `store.properties`,
       * which will be used several times below.
      **/
      var prop = store.properties;

      /* Add a new listing section to the sidebar. */
      var listings = document.getElementById('listings');
      var listing = listings.appendChild(document.createElement('span'));
      /* Assign a unique `id` to the listing. */
      listing.id = "listing-" + prop.id;
      /* Assign the `item` class to each listing for styling. */
      listing.className = 'item';

      /* Add the link to the individual listing created above. */
      var link = listings.appendChild(document.createElement('option'));
      link.href = '#';
      link.className = 'title';
      link.id = "link-" + prop.id;
      link.innerHTML = prop.address;

      document.getElementById('listings').addEventListener('change',function(){
            $(this).find('span').attr("data-link");
        });

      /**
       * Listen to the element and when it is clicked, do four things:
       * 1. Update the `currentFeature` to the store associated with the clicked link
       * 2. Fly to the point
       * 3. Close all other popups and display popup for clicked store
       * 4. Highlight listing in sidebar (and remove highlight for all other listings)
      **/
      link.addEventListener('click', function(e){
        for (var i=0; i < data.features.length; i++) {
          if (this.id === "link-" + data.features[i].properties.id) {
            var clickedListing = data.features[i];
            flyToStore(clickedListing);
            createPopUp(clickedListing);
          }
        }
        var activeItem = document.getElementsByClassName('active');
        if (activeItem[0]) {
          activeItem[0].classList.remove('active');
        }
        this.parentNode.classList.add('active');
      });
    });
  }

    And here is the part of HTML for dropdown: 

     <fieldset>
  <select id='listings' class='listings' name="some_txt_here" >
  <option selected>---select your place--</option>
</select>
  <label class="bars-txt" for="city">
    <span data-text="some_txt_here">some_txt_here</span>
  </label>
</fieldset>

  2. 0

    You can’t have a link inside a select option. What you can do is write the link as data attribute to the options. As the example doesn’t work as Stack Snippet, here’s a Fiddle.

    $("select").on("change", function() {
  window.open($(this).find("option:selected").attr("data-link"), '_blank');
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
  <select id="listings" class="listings">
    <option value="0">Select store</option>
    <option id="listing-0" class="item" data-link="https://www.google.com">store1 Address here</option>
    <option id="listing-1" class="item" data-link="https://www.stackoverflow.com">store2 Address here</option>
  </select>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search