Pass drag event from div to mapbox layer

See also questions close to this topic

• fancybox not showing up after closing it

  We're using fancybox 2 to launch a donation process in our app. Upon completion, the modal closes and opens up another "thank you" modal. We're seeing some odd behavior if you close that "thank you" modal and click on the "Donate" button again. The modal background overlay briefly appears and then disappears, and the modal doesn't show up. But, if you click it again, it works just fine.

  I haven't been able to find any references to this happening to anyone else. We have a live demo where you can see the behavior here: https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=8558#donate (The donation modal should open automatically, but if not, click "Support Me") Make a donation using a test credit card number (e.g., 4111111111111111) -- obviously, this won't actually charge you anything.

  The relevant javascript code starts at line 162 if you view source. (I'll also include it at the end of this post).

  I thought maybe it was because I wasn't explicitly closing any fancybox modals prior to opening the new ones, but that didn't change anything. So, I'm open to suggestions on what may be causing this. It's very weird.

  Thanks!

  Relevant JS:

  <script type="text/javascript">
      jQuery(function($) {
          openExpressDonate = function() {
              $.fancybox({
                      closeBtn: false,
                      closeEffect: 'none',
                      helpers : {
                          overlay : {
                              closeClick: false,
                              css: {'background-color': 'rgba(0, 0, 0, 0.60'},
                              locked: true
                          }
                      },
                      href: 'https://demo.donordrive.com/index.cfm?fuseaction=expressDonate.modalparticipant&ParticipantID=8558',
                      margin: 0,
                      maxWidth: 400,
                      height: 'auto',
                      openEffect: 'none',
                      padding: 1,
                      scrolling: 'no',
                      type: 'iframe'
                  });
          }
  
          $('.js-express-donate').on('click', function(e) {
                  e.preventDefault();
  
                  if (window.ga) {
                      ga('send', {
                              hitType: 'event',
                              eventCategory: 'Express Donate - Participant',
                              eventAction: 'Donation Started',
                              eventLabel: 'Event 1183'
                          });
                  }
  
                  openExpressDonate();
              });
  
          if (location.hash && location.hash == '#donate') {
              $('.js-express-donate').click();
          }
  
          resizeExpressDonateModal = function() {
              $.fancybox.update();
          }
  
          showExpressDonateThankYou = function(target, data) {
              $.fancybox({
                      afterShow: function () {
                          fancyParent = $('.fancybox-wrap').parents(); // normally html and body
                          fancyParent.on('click.modalThanks', function () {
                              $.fancybox.close();
                              fancyParent.off('click.modalThanks');
                          });
                          $('.fancybox-wrap').on('click', function (event) {
                              // prevents closing when clicking inside the fancybox wrap
                              event.stopPropagation();
                          });
                      },
                      helpers : {
                          overlay : {
                              closeClick: false,
                              css: {'background-color': 'rgba(0, 0, 0, 0.60'},
                              locked: true
                          }
                      },
                      href: 'https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.modal' + target + 'ExpressDonateThanks&donorID=' + data.values.donorID + '&CSRFToken=' + data.values.CSRFToken + '&n=' + data.values.isNewConstituent,
                      margin: 0,
                      maxWidth: 400,
                      minHeight: 300,
                      modal: 1,
                      openEffect: 'none',
                      padding: 1,
                      scrolling: 'no',
                      type: 'iframe'
                  });
          }
      });
  </script>
  
• Combat log in html/js/css

  I was wondering if there is a way to make a "combat log" in html like you see in mmos like WoW, GW2 etc.

  I tried using overflow in css but the problem is when the log messages get over the size of div it's in the element does not get bigger on the page but it does take more space so it messes up other elements.

  Basically i need some sort of chatbox where the program would write out the messages.
• Google Speech API - Server Unavailable Error for long audio files

  I'm using Google's nodejs-speech package to use the longRunningRecognize endpoint/function in Google's Speech API.

  I've used both v1 and v1p1beta, and run into an error with longer files. (48 mins is as long as I've tried, and 15 mins causes the same problem, though 3 mins does not). I've tried both the promise pattern and separating the request into two parts -- one to start the longRunningRecognize process, and the other to check on results after waiting. The error is shown below the code samples for both.

  Example promise version of request:

  import speech from '@google-cloud/speech';
  
  const client = new speech.v1p1beta1.SpeechClient();
  
  const audio = {
    uri: 'gs://my-bucket/file.m4a'
  };
  
  const config = {
    encoding: 'AMR_WB',
    sampleRateHertz: 16000,
    languageCode: 'en-US',
    enableWordTimeOffsets: true,
    enableSpeakerDiarization: true
  };
  
  const request = {
    audio,
    config
  };
  
  client.longRunningRecognize(request)
    .then(data => {
      const operation = data[0];
      return operation.promise();
    })
    .then(data => {
      const response = data[0];
      const results = response.results;
      const transcription = results
        .filter(result => result.alternatives)
        .map(result => result.alternatives[0].transcript)
        .join('\n');
      console.log(transcription);
    })
    .catch(error => {
      console.error(error);
    });
  

  (I've since closed the tab with the results, but I think this returned an error object that just said { error: { code: 13 } }, which matches the below, more descriptive error).

  Separately, I've tried a version where instead of chaining promises to get the final transcription result, I collect the name from the operation, and make a separate request to get the result.

  Here's that request code:

  ... // Skipping setup
  client.longRunningRecognize(request)
    .then(data => {
      const operation = data[0];
      console.log(operation.latestResponse.name);
    })
    .catch(error => {
      console.error(error);
    });
  

  When I hit the relevant endpoint (https://speech.googleapis.com/v1p1beta1/operations/81703347042341321989?key=ABCD12345) before it's had time to process, I get this:

  {
      "name": "81703347042341321989",
      "metadata": {
          "@type": "type.googleapis.com/google.cloud.speech.v1p1beta1.LongRunningRecognizeMetadata",
          "startTime": "2018-08-16T19:33:26.166942Z",
          "lastUpdateTime": "2018-08-16T19:41:31.456861Z"
      }
  }
  

  Once it's fully processed, though, I've been running into this:

  {
      "name": "81703347042341321989",
      "metadata": {
          "@type": "type.googleapis.com/google.cloud.speech.v1p1beta1.LongRunningRecognizeMetadata",
          "progressPercent": 100,
          "startTime": "2018-08-16T17:20:28.772208Z",
          "lastUpdateTime": "2018-08-16T17:44:40.868144Z"
      },
      "done": true,
      "error": {
          "code": 13,
          "message": "Server unavailable, please try again later."
      }
  }
  

  I've tried with shorter audio files (3 mins, same format and encoding), and the above processes both worked.

  Any idea what's going on?
• Can't get alert or confirms to work in javascript

  I cant get the alert,confirm or prompt to work, here is my code (not the full code but the beginning is the part tht I cant get to work so im leaving that and omitting the end of the code, so here it is :

  var warGood = 0
      var warEvil = 0
      var life
  
      var mh = false
  
      var document.Gold = 1000;
      var gems = 1000;
      var lb = false
      var Stellar_grenades  = 0
      var Cosmic_grenades = 0;
      var Level = 1    
      var person
      
      person = prompt("please enter your name", "Specimen")
  
      if (person != null) {
        if (person == "shit") {
          alert("Really? choose a new MORE APPROPRIATE name", "Ok ill choose a new More APPROPRIATE name")
        }
  
      else if (person != "shit"){
        if (person != null) {alert(
          "welcome "  + person + " to the universe")
        }
      }
  
      alert(
      "not too long ago your planet was blown up in the midst of a universal war, you luckily survived and fled to another planet");
      alert("You are now here, On Planet Vecron, Here you will build up your    base,")
      alert("then you can eventually go on missions to distant planets,")
      alert("Upon Reaching the final mission, you will notice one thing")
      alert ("Your Not on a new planet, but rather a new universe,")
      alert("this universe holds the Key to cosmic peace,")
      alert(" This Key is the Community Pendant")
      
      life = confirm("Do you have what it takes to get this pendant and end the universal war?")
      
       if (life == true) { 
        alert("Thank you " + person + "You will make a fine adventurer");
        alert("gold is the main currency Here on vecron")
        alert(" If you want anything it can buy it, with a few exceptions")
        alert("You cant buy the Community Pendant")
        alert(" Or gems Or the special 12 summoners tools")
        alert(" Shh the summoners tools will be talked about later")
        alert("saving your game is important,")
        alert("To Open the shop Press S")
        alert("To Save Press F")
        alert("To get money you simply have to press the money button!")
        alert("The Ding Is to make sure you actually have good reflexes while in missions.")
        alert("You get missions after you unlock the mission hall")
        alert("then you can start the first journey on your many adventures")
        document.write("you have " + document.Gold + " Gold and " + gems + " gems")
        alert("Go Get that Pendant and save the world")

  <img src = "logo.png" alt = "logo">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  I really cant figure it out, it was working fine a few weeks ago, then I took a break and came back to it and all of a sudden it wouldn't work anymore
• Force overflow hidden without container

  Here's my HTML and CSS (bare bones): HTML:

  <ul>
      <li>
      </li>
      <li class="element-i-want-do-use-to-hide">
      </li>
      <li class="tall-element">
      </li>
  </ul>
  

  CSS:

  .tall-element:before {
      height: 2000px;
      position: absolute;
      bottom: 0;
      background-color: #000;
      width: 10px;
      display: block;
      content: " ";
  }
  

  This (intentionally) creates a line I'd like the ability to set overflow:hidden to the .element-i-want-do-use-to-hide element, but I can't exactly do that.

  I can set overflow-y: hidden to the <ul> and that will cause the line to break, which is the effect I'm looking for, except I'd like to apply that break to a neighboring element (in this case, the .element-i-want-do-use-to-hide element).

  Anyone know of a way to do this?
• I want use my styles for freshchat icon

  I want to use custom styles for iframe Freshchat.

  I use these code:

  = render 'layouts/shared/wchat'
  
  = content_for :assets
    javascript:
      $(document).ready(function(){
          window.setTimeout(
              function(){
                  window.fcWidget.init({
                      token: "adc0cee1-22f2-4bc3-9776-49ffbffe46e0",
                      host: "https://wchat.freshchat.com"
                  })
              }
          , 15000);
      });
  

  I have problem with position of icon. I want move the icon to up. How can I change change styles inside the iframe?
• CSS Border Tapering

  CSS borders taper by default (as in the left side of this example):

  

  Is there a way to get borders to behave like the right side of the example?
• Mapbox Studio: can you change the style after the fact?

  Is it possible to change the base style of a custom style after the fact in Mapbox Studio? If yes, how? I looked around the UI and in the documentation but couldn't find how.

  Say I created a private style from the Vintage designer style (for example's sake), then added and customized layers by importing tilesets, can I switch to the another base style (e.g. North Star), or do I need to start a new custom style from the start?
• Custom MGLAnnotationView in Mapbox

  How to add imageview and label in the custom MGLAnnotation View in mapbox when user click on the marker of the map?
• (Swift - Firebase - Mapbox) Refresh map and display new annotations

  I have made an application in which people can see other registered users on the map. I have retrieved their longitude and latitude, transfered it on Firebase and then fetched each user location and displayed it on the map. Nonetheless, I have a problem. Basically, I do want to implement this future: When a new user register, a new animation pops up on the map for every user. Actually, when a new user register, every user has to quit the app and relaunch it in order to load the map.

  Is there any function which allows the map to refresh without having to reload the app??

  Thank you guys.

  My Firebase database.
• How to handle props and states to avoid infinite loops?

  I have a component which gets props from his parents, I am checking if this.props.addMarker is true in componentDidUpdate(), if true it triggers a function in which there is a setState.

  You can imagine what's next: the setState triggers the componentDidUpdate() function, which checks if this.props.addMarker is true...and so on...

  What should I do to avoid this type of issue?

  Here is my code:

  componentDidUpdate() {  
      if(this.props.addMarker) {
        const place = this.props.coordinatesToCenter;
        const coord = place.coordinates;
  
        this.addMarkerProcess(place.place_name, place.place_type, coord.lon, coord.lat);
      }
  }
  
  addMarkerProcess(name, maki, xCoordinate, yCoordinate) {
      const data = {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [xCoordinate, yCoordinate]
        },
        properties: {
          // place:
          // login:
          lat: yCoordinate,
          lon: xCoordinate,
          color: "#00FFFF"
        }
      };
  
      if(this.state.clickIsEmpty) {
        data.properties.place = this.state.userNewPlaceInput;
        data.properties.login = this.state.userNewTypeInput;
      } else {
        data.properties.place = name;
        data.properties.login = maki;
      }
  
      const prevGeoJson = _.cloneDeep(this.state.geoJson);
      console.log("prevGeojson1", prevGeoJson)
      // map only rerenders geoJSONLayer if geoJSONLayer.data is a new instance:
      const geoJson = Object.assign({}, this.state.geoJson);
      geoJson.features.push(data);
  
      this.setState(prevState => ({
        prevGeoJson: prevGeoJson,
        geoJson: geoJson,
        currentMarker: data
      }));
  
      let canvas = document.querySelector('.mapboxgl-canvas');
      if(canvas.classList.contains("cursor-pointer")) {
        canvas.classList.remove("cursor-pointer");
      }
    }
  
• Convert “world file” GIS for MapBox GL?

  I'm trying to display GIF image with a world file (http://webhelp.esri.com/arcims/9.2/general/topics/author_world_files.htm) on Mapbox gl. The image is displayed but it looks like it was shifted couple of degrees up. The following are the setups I followed to calculate the coordinates

  A:0.017971305190311    <- Horizontal Pixel Distribution (deg/width) (A)
  D:0.000000000000000    <- X Rotation (D)
  B:0.000000000000000    <- Y Rotation (B)
  E:-0.017971305190311   <- Vertical Pixel Distribution (deg/height) (E)
  C:-127.620375523875420 <- X Coordinate for the center of the top left pixel (C)
  F:50.406626367301044   <- Y Coordinate for the center of the top left pixel (F)   
  

  Used the following equation to calculate the Lat/Long @ each corner

  Xn = Ax + By + C
  Yn = Dx + Ey + F  
  
  [-127.62037552387542,50.406626367301044],
  [-66.51793787681802,50.406626367301044],
  [-66.51793787681802,21.652538062803444],
  [-127.62037552387542,21.652538062803444]  
  

  The Image documentation state that it was created using standard geographic projection referenced to North American Datum 1983 (NAD83). Is there any other steps needed to be done to display the image correctly on the map ?

  Thanks
• Mapbox with React - should I use Redux?

  I don't particularly like the complexity that redux adds to a react app, so I try to avoid it as much as I can. I always struggle to know if I need redux or not anyway.

  I am building a single web app with react, which consist of a map (Mapbox). I have arrived to the point where I struggle to pass data from/to non-related components while keeping my code clean.

  So, I am wondering, is this a sign for redux to come into the game? Knowning that I am not a react master, and that there might be other solutions, such as context.

  What do you think? Do you use redux for your Mapbox app? If yes, for which purpose?