AnsweredAssumed Answered

Has anyone implemented html5 browser history for a complex javascript Mapping application?

Question asked by Marka@esri on Jan 28, 2015
Latest reply on Jan 30, 2015 by Marka@esri

I have a requirement to implement HTML 5 history tracking in my javascript application.  To Keep it simple I wanted to update the history state every time the user panned or zoomed on the map.  The problem is that each popstate event that gets triggered and I would reset the extent to the previous extent it also triggered the original event adding another item in the history state. 

 

 

This is the code that sets the listener on the pan event...

var eventHandlers = [];

      var currentState = {};

      function setEventTriggers() {       

        

           var e = map.on("pan-end", function (e) {                      

               var pt = e.extent.getCenter();

               var state = { action: "pan", x: pt.x, y: pt.y };

               if (currentState && (currentState.x == pt.x && pt.y == currentState.y)) {

                   console.debug("this is history");

               } else {

                   window.history.pushState(state, null, "CreateTract.aspx?x=" + pt.x + "&y=" + pt.y);                 

               }              

           });

           eventHandlers.push(e);          

      }

 

 

this is the code that handles the pop state

 

      window.addEventListener("popstate", function (e) {

          event.stop(e);

          console.debug(e);

          prevStates = [];

          currentState = e.state;

          var url = document.location.href;

          //console.debug(url);

          var u = urlUtils.urlToObject(url);

          if (u.query) {

              if (u.query.x && u.query.y) {

                  var pt = new Point(u.query.x, u.query.y, map.spatialReference);

                  var state = { action: "pan", x: pt.x, y: pt.y };

                  prevStates.push(state);

                  map.centerAt(pt);                 

              }             

          }

 

 

          fsMap._processBasicRequest();

 

      });

 

 

As you can see I set a Current state variable at the beginning of the pop state routine and then check to see whether the current state is the same as state which I would be putting into history...

 

As this is rather kluggy, I was hoping someone else had a better idea.

 

I also tried to disconnect the event triggers but that could get really complicated in my application which has alot of UI javascript classes that trigger there own events...

 

 

Mark Andrews

Durham, NC

Outcomes