Loading ...
Sorry, an error occurred while loading the content.

Maps and panels together?

Expand Messages
  • Michael Newton
    I m having problems with using Yahoo maps and a dialog together. I get a new dialog with an empty map on it; there s a marker in a sea of grey and controls
    Message 1 of 7 , Dec 11, 2006
    • 0 Attachment
      I'm having problems with using Yahoo maps and a dialog together.

      I get a new dialog with an empty map on it; there's a marker in a sea
      of grey and controls that won't do anything.

      If I replace the Dialog constructor with a Panel constructor it works
      fine.

      I use the following code:
      <pre>
      var param = {
      width:'500px',
      underlay:'shadow',
      fixedcenter:true,
      close:true,
      constraintoviewport:true,
      visible:false,
      monitorresize:false,
      effect:{
      effect:YAHOO.widget.ContainerEffect.FADE,
      duration:0.5
      }
      };
      var panel = new YAHOO.widget.Dialog('panel_container', param);
      panel.center();

      var div = document.createElement('div');
      div.id = 'panel_ymap';
      div.style.width = '400px';
      div.style.height = '150px';
      div.style.padding = '1em';
      div.style.margin = '1em';
      var map = new YMap(div);
      var point = new YGeoPoint(49, -122.7);
      map.drawZoomAndCenter(point, 4);
      map.addOverlay(new YMarker(point));
      map.addPanControl();
      map.addZoomLong();
      panel.setHeader('Map');
      panel.setBody(div);
      panel.render();
      panel.show();
      //document.getElementById('content').appendChild(div);
      </pre>
    • Steven Peterson
      Michael, I will investigate this further, but out of curiosity, is there a reason that you re using a Dialog as opposed to the Panel? One of the key
      Message 2 of 7 , Dec 12, 2006
      • 0 Attachment

        Michael,

         

        I will investigate this further, but out of curiosity, is there a reason that you’re using a Dialog as opposed to the Panel? One of the key differences between the two is that the Dialog wraps the inner body content in a form. I’m not sure why this would cause any trouble on the maps side of things, but I will most certainly investigate. We strive to make sure that our APIs play nicely together. J I will look into this and get back to you.

         

        Thanks!

         

        Steven Peterson

        Web Developer, Platform Engineering

        Yahoo!

         

         

         

        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Michael Newton
        Sent: Monday, December 11, 2006 4:42 PM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Maps and panels together?

         

        I'm having problems with using Yahoo maps and a dialog together.

        I get a new dialog with an empty map on it; there's a marker in a sea
        of grey and controls that won't do anything.

        If I replace the Dialog constructor with a Panel constructor it works
        fine.

        I use the following code:
        <pre>
        var param = {
        width:'500px',
        underlay:'shadow',
        fixedcenter:true,
        close:true,
        constraintoviewport:true,
        visible:false,
        monitorresize:false,
        effect:{
        effect:YAHOO.widget.ContainerEffect.FADE,
        duration:0.5
        }
        };
        var panel = new YAHOO.widget.Dialog('panel_container', param);
        panel.center();

        var div = document.createElement('div');
        div.id = 'panel_ymap';
        div.style.width = '400px';
        div.style.height = '150px';
        div.style.padding = '1em';
        div.style.margin = '1em';
        var map = new YMap(div);
        var point = new YGeoPoint(49, -122.7);
        map.drawZoomAndCenter(point, 4);
        map.addOverlay(new YMarker(point));
        map.addPanControl();
        map.addZoomLong();
        panel.setHeader('Map');
        panel.setBody(div);
        panel.render();
        panel.show();
        //document.getElementById('content').appendChild(div);
        </pre>

      • Michael Newton
        I should also mention that although it seems to work on a Panel widget, after I close the panel, I m left with the map images overlaying the page. Not the
        Message 3 of 7 , Dec 12, 2006
        • 0 Attachment
          I should also mention that although it seems to work on a Panel
          widget, after I close the panel, I'm left with the map images
          overlaying the page. Not the controls or anything, just the map tiles
          themselves.

          I'd prefer to use a Dialog, since I'm re-using the same object a few
          times and the other instances all need to be Dialogs. But if nobody
          can figure out that problem, I'd at least like to be able to use a
          Panel. If nothing works I'm going to have to use popups!
        • Michael Newton
          Looks like we were both replying to me at the same time. As I said in my other message, the Dialog is getting reused. It s created at page load time, and
          Message 4 of 7 , Dec 12, 2006
          • 0 Attachment
            Looks like we were both replying to me at the same time. As I said in
            my other message, the Dialog is getting reused. It's created at page
            load time, and then the content is being changed based on user
            selection of a number of buttons. I'm pretty new to the whole
            object-oriented world, so if this isn't the best way to do it, please
            do let me know!

            Any light you can shed on this problem or the other one mentioned in
            my earlier message would be much appreciated.

            --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
            <y_stevenp@...> wrote:
            >
            > Michael,
            >
            >
            >
            > I will investigate this further, but out of curiosity, is there a reason
            > that you're using a Dialog as opposed to the Panel? One of the key
            > differences between the two is that the Dialog wraps the inner body
            content
            > in a form. I'm not sure why this would cause any trouble on the maps
            side of
            > things, but I will most certainly investigate. We strive to make
            sure that
            > our APIs play nicely together. J I will look into this and get back
            to you.
            >
            >
            >
            > Thanks!
            >
            > Steven Peterson
            > Web Developer, Platform Engineering
            > Yahoo!
            >
          • Steven Peterson
            Michael, I couldn t find anything that was specifically Panel or Dialog-related, but I am guessing that the issue in creating the map is that you are trying to
            Message 5 of 7 , Dec 12, 2006
            • 0 Attachment

              Michael,

               

              I couldn’t find anything that was specifically Panel or Dialog-related, but I am guessing that the issue in creating the map is that you are trying to put it into an element that’s not yet in the DOM. I reworked your implementation a little bit, and it’s working for me now. I also added some code to work around the bug where the map tiles are not being hidden when you hide the Panel. It’s because the Maps API sets the image tiles explicitly to visibility:visible, and since visibility isn’t inherited, they are showing even though the outer container is not. I’ve logged that as a bug with them, but for now, you can use this code as a workaround. Also, your call to .center() was not needed since you’re already using “fixedcenter:true”, so I’ve removed that. This is the resulting code that appears to work:

               

                    var param = {

                          width:'500px',

                          underlay:'shadow',

                          fixedcenter:true,

                          close:true,

                          constraintoviewport:true,

                          visible:false,

                          monitorresize:false,

                          effect:{

                                effect:YAHOO.widget.ContainerEffect.FADE,

                                duration:0.5

                          }

                    };

               

                    panel = new YAHOO.widget.Dialog('panel_container', param);

                    panel.setHeader('Map');

               

                    // This hack will fix it so that the body of the Panel is set to display:none after hiding it,

                    // and display:block before showing it, so that the map tiles will be forced to hide as well

               

                    panel.hideEvent.subscribe(function(){this.body.style.display="none";}, panel, true);

                    panel.beforeShowEvent.subscribe(function(){this.body.style.display="block";}, panel, true);

               

                    // End map tiles visibility workaround

               

                    panel.render(); // Must render first so that the Dialog is in the DOM

               

                    // Create the Map div and put it in the Dialog body

                    var div = document.createElement('div');

                    div.id = 'panel_ymap';

                    div.style.width = '400px';

                    div.style.height = '150px';

                    div.style.padding = '1em';

                    div.style.margin = '1em';

                    panel.setBody(div);

               

                    // Instantiate the Map

                    var map = new YMap(div);

                    var point = new YGeoPoint(49, -122.7);

                    map.drawZoomAndCenter(point, 4);

                    map.addOverlay(new YMarker(point));

                    map.addPanControl();

                    map.addZoomLong();

               

                    panel.show()

               

              Please let me know how this works out for you, and if you have any further questions, don’t hesitate to let me know! J

               

              Steven Peterson

              Web Developer, Platform Engineering

              Yahoo!

               

               

               

              From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Michael Newton
              Sent: Tuesday, December 12, 2006 11:53 AM
              To: ydn-javascript@yahoogroups.com
              Subject: [ydn-javascript] Re: Maps and panels together?

               

              Looks like we were both replying to me at the same time. As I said in
              my other message, the Dialog is getting reused. It's created at page
              load time, and then the content is being changed based on user
              selection of a number of buttons. I'm pretty new to the whole
              object-oriented world, so if this isn't the best way to do it, please
              do let me know!

              Any light you can shed on this problem or the other one mentioned in
              my earlier message would be much appreciated.

              --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
              <y_stevenp@...> wrote:

              >
              > Michael,
              >
              >
              >
              > I will investigate this further, but out of curiosity, is there a reason
              > that you're using a Dialog as opposed to the Panel? One of the key
              > differences between the two is that the Dialog wraps the inner body
              content
              > in a form. I'm not sure why this would cause any trouble on the maps
              side of
              > things, but I will most certainly investigate. We strive to make
              sure that
              > our APIs play nicely together. J I will look into this and get back
              to you.
              >
              >
              >
              > Thanks!
              >
              > Steven Peterson
              > Web Developer, Platform Engineering
              > Yahoo!
              >

            • Michael Newton
              That did the trick, thank you. You need to give the Dialog a body before rendering, or it throws an error, but an empty string worked fine for that. It s an
              Message 6 of 7 , Dec 12, 2006
              • 0 Attachment
                That did the trick, thank you. You need to give the Dialog a body
                before rendering, or it throws an error, but an empty string worked
                fine for that.

                It's an unusual problem, but the solution makes sense -- normally when
                doing this manually I would have created the container for the map and
                then added it to the DOM with appendChild() before instantiating the map.

                I was trying to figure out subscribing to the hide and show events to
                fix the map display just as your message came in, but was having a bit
                of trouble with it, thanks for all your help.


                --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
                <y_stevenp@...> wrote:
                >
                > Michael,
                >
                > I couldn't find anything that was specifically Panel or
                Dialog-related, but
                > I am guessing that the issue in creating the map is that you are
                trying to
                > put it into an element that's not yet in the DOM. I reworked your
                > implementation a little bit, and it's working for me now.
                >
                > ...
                > Please let me know how this works out for you, and if you have any
                further
                > questions, don't hesitate to let me know! J
                >
                > Steven Peterson
                > Web Developer, Platform Engineering
                > Yahoo!
                >
              • Steven Peterson
                Michael - You can also create the Dialog dynamically (which will allow you to avoid having to have preexisting markup). Just make sure when you call render
                Message 7 of 7 , Dec 12, 2006
                • 0 Attachment

                  Michael –

                   

                  You can also create the Dialog dynamically (which will allow you to avoid having to have preexisting markup). Just make sure when you call render that you pass document.body as an argument so that it knows where to go. This will allow you to avoid having the extra markup. Another thing you can try that worked for me is to make the Dialog body the container element for the map, instead of nesting it further. Just give your Dialog body an ID, and use that as the ID that you pass to the Map constructor. The key is to make sure that whatever you need is in the DOM before rendering the Map. This is a great example of the synergy of two of our developer APIs! I really appreciate the feedback! J

                   

                  Steven Peterson

                  Web Developer, Platform Engineering

                  Yahoo!

                   

                  From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Michael Newton
                  Sent: Tuesday, December 12, 2006 4:42 PM
                  To: ydn-javascript@yahoogroups.com
                  Subject: [ydn-javascript] Re: Solution: Yahoo! AJAX Map in a Dialog

                   

                  That did the trick, thank you. You need to give the Dialog a body
                  before rendering, or it throws an error, but an empty string worked
                  fine for that.

                  It's an unusual problem, but the solution makes sense -- normally when
                  doing this manually I would have created the container for the map and
                  then added it to the DOM with appendChild() before instantiating the map.

                  I was trying to figure out subscribing to the hide and show events to
                  fix the map display just as your message came in, but was having a bit
                  of trouble with it, thanks for all your help.

                  --- In ydn-javascript@yahoogroups.com, "Steven Peterson"
                  <y_stevenp@...> wrote:

                  >
                  > Michael,
                  >
                  > I couldn't find anything that was specifically Panel or
                  Dialog-related, but
                  > I am guessing that the issue in creating the map is that you are
                  trying to
                  > put it into an element that's not yet in the DOM. I reworked your
                  > implementation a little bit, and it's working for me now.
                  >
                  > ...
                  > Please let me know how this works out for you, and if you have any
                  further
                  > questions, don't hesitate to let me know! J
                  >
                  > Steven Peterson
                  > Web Developer, Platform Engineering
                  > Yahoo!
                  >

                Your message has been successfully submitted and would be delivered to recipients shortly.