1

Our page has a main map area with sidebar widgets that trigger different functionality. The widget I'm working with at the moment is going to be annotating points on the map with details including location data. The general workflow is:

  1. User opens widget
  2. User clicks draw region
  3. Path is drawn on map
  4. User clicks on map graphic to trigger popup

I've been searching for a way to combine the functionality of a Popup with that of the OverviewMap. That is, I would like to embed an OverviewMap (or, really, an arbitrary, full second map window) inside a popup. In the picture below, where the image is in the popup is where I'd ideally be inserting the map.

![The popup in question

I began by trying to simply provide a div in the InfoTemplate that I could replace programmatically.

var plinePointInfoTemplate = new InfoTemplate({
  title: "Segment Information",
  content:  "Segment Start  : ${segStartX}, ${segStartY} <br>" +
            "Segment End    : ${segEndX}, ${segEndY} <br>" +
            "Segment Length : ${segLength} <br>" +
            "Average Speed  : ${segSpeed} <br>" +
            "Time To Next Pt: ${segETA} <br>" +
            "<div id=\"infoWindowMap\" " + 
                "data-dojo-type=\"dijit/layout/ContentPane\">Map Goes Here</div> <br>" +
            "<img src=\"http://lorempixel.com/400/200\" />"
});

...

//Populate map in popup
var templateMap = new OverviewMap("infoWindowMap", {
                  basemap: "satellite",
                  center: [-46.807, 32.553],
                  zoom: 3
                  }, 'infoWindowMap'
                );
templateMap.startup();

This hasn't been working (per the picture). I'm pretty new to working with the API and am unsure what exactly is wrong with my approach. It kind of seems like I'm trying to construct the overview map too late in the game - the infowindow and its contained divs don't actually exist until the click event on the first graphic. Is there a way to trigger it's construction after the rest of the page has been built? Am I barking up the wrong tree entirely?

None of the examples I've seen have constructed an overview map after the fact.

  • Chris, do you need the map in the popup to be interactive (zoom, pan, etc), or can it be just an image? Also, what version of the JavaScript API are you working with? – GavinR Jun 24 '16 at 22:07
  • @GavinR The map needs to be interactive (zoom, pan, etc), yes. We're currently on 3.11. – Chris D Jun 27 '16 at 16:45
0

I have what you want working, creating the map object after the Popup is opened, and destroying it when closed. It's not a perfect example (there seems to be a small error), but I think it gets you pointed in the right direction:

Example code: https://jsfiddle.net/gavinr/uhfc4t0z/5/

Video in action: http://i.imgur.com/e9HCvIj.gifv

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.