This could be just unclear requirements, but when fit-to-markers is used as an attribute and also a zoom level is set, looks like the zoom level wins.
Unclear if this is the requirement?

Screenshots:
Initial View on load:

Zoomed out one level to find the other marker:

Code Snippet:

  <px-map zoom="8" fit-to-markers flex-to-size>

/cc @davidrleonard

Symbol markers' alignment of font-awesome icons are off in Firefox only.

Screenshot:

/cc @davidrleonard

The code snippet in px-map-marker-static.html usage section looks wrong.

/cc @ppeyro

Loading clusters was much snappier before the dist changes.
In today's pull, clusters count comes in late. David's diagnosis show a delay in d3 being blocked.

Screenshot attached:

/cc @davidrleonard

Stacking order of scale vs. Controls should match the design and be placed at the bottom of the controls. Also unclear if the stacking order is or should be configurable?

Design Screenshot:

Current Stacking Order:

/cc @davidrleonard

Zoom attribute should be validated to be in correct format. If there is a letter/typo in there, no error and no map.

/cc @ppeyro

Without having a flex parent, map doesn't draw.

/cc @ppeyro

/cc @ppeyro

Added a static marker with popup to a map with clusters as type important.
At the initial zoom level, the marker shows properly with the popup working fine.

However, when you zoom in, the marker is changed to blue (info) and the popup stops working.

No errors in console log.
Browser: Chrome

Screenshots

Initial

Zoomed in one level:

/cc @davidrleonard

In popup-info, if you just have a title and don’t have a description attribute or the description is not long enough (10+chars), the content is chopped off.

Screenshot:

Code Snippet:

<px-map-marker-static lat="37.7016" lng="-121.8909" type="important" show-badge>
              <px-map-popup-info title="Drinks" description="testing"> </px-map-popup-data>
</px-map-marker-static> 

/cc @davidrleonard

Malformed GeoJSON doesn't throw an error.

/cc @ppeyro

When the location action fails after the user presses the px-map-control-locate button, the following things should happen:

• The button should be set to the disabled state so it cannot be clicked, with a visual indicator that is disabled
• A tooltip should show up when the user hovers over the disabled button with text that describes the error causing it to fail

Note: These styles can all be applied by setting them in the class .px-map-control-locate-button--error.

doc it or error check it? Current error is cryptic, evaluating n.appendchild

/cc @ppeyro

When the user presses the px-map-control-locate button, some time will elapse between the button click and the location event succeeding (and the map responding to it) while the browser responds to the location request and looks up the location. Progress could be instant or take 10-30s depending on many factors.

After the button is pressed, but before the location is found, the following things should happen:

• The button should show a progress indicator like a spinner so the user knows the location event is in progress
• The button should be set to the disabled state so it cannot be clicked, with a visual indicator that it is disabled

When the location is found, the button should return to its initial state (initial icon and non-disabled state).

Note: These styles can all be applied by setting them in the class .px-map-control-locate-button--locating.

In geojson data file:
If you set the icon-type to an unsupported type, say "alert" or "information", it results in the cluster with a black pie slice. Zooming into the cluster, the marker is rendered as an info marker.

No warnings/errors in console log.

Screenshots:

Zoomed into the cluster:

/cc @davidrleonard

This is using IE version 11.0.9600.18617.

When navigating to https://www.predix-ui.com/#/components/px-map/, the map isn't shown. When opening the page with the developer console on (F12), an error is raised:
PxMapBehavior is undefined.

Full snippet:

Polymer({
    is%3A 'px-map'%2C
    behaviors%3A [PxMapBehavior.LeafletRoot]
  })%3B

%2F%2F%23 sourceURL%3Dhttps%3A%2F%2Fwww.predix-ui.com%2Fpx-map%2Fpx-map%2Fpx-map.html.js

Alongside that, the console produces three errors about missing :'s:
Expected ':'
File: px-map-behavior-element.es6.js, Line: 16, Column: 19

File: px-map-behavior-layer.es6.js, Line: 20, Column: 13

File: px-map-behavior-root.es6.js, Line: 66, Column: 12

Instantiating the map on our own app produced the same console errors when loaded in IE11, but none when loaded in Chrome.

Clusters: FF & Safari: Getting a typerror: evt.srcElement is undefined

/cc @ppeyro

Adding zoomInTitle and zoomOutTitle to control-zoom results in "zoom out" string when tooltip is enabled on hover over both zoom control buttons:

Screenshot:

Code snippet:

  <px-map-control-zoom position="bottomleft" zoom-in-title></px-map-control-zoom>

/cc @davidrleonard

Adding both metric-units and imperial-units to the scale as attributes causes the scale's side bar to not align correctly.

Screenshot:

Code Snippet:

<px-map-control-scale position="bottomright" metric-units imperial-units ></px-map-control-scale>

/cc @davidrleonard

Clusters: selecting the individual marker in a cluster:

• FF: generates a typerror: evt.srcElement.getVisibleMarkers is not a function.
• Safari: generates a typerror: evt.srcElement is undefined.
• Chrome: no errors

Zooming out from the individual marker in a cluster, generates the same error as above.

/cc @ppeyro

When binding a listener to the px-map-move event and normalizing the event with Polymer.dom(e), the rootTarget does not have a getVisibleMarkers method defined.

Example code:

  <script>
    function handleMapMove(evt) {
      var markers = Polymer.dom(evt).rootTarget.getVisibleMarkers();
      console.log('There are ' + markers.length + ' markers visible on the map.');
    }

    var map = document.querySelector('px-map');
    map.addEventListener('px-map-moved', handleMapMove.bind(this));
  </script>

/cc @ppeyro

This only happens in certain cases, for example when zoomed out to view the whole world where the scale chops off the last chars because its width is not wide enough.

Screenshot:

/cc @davidrleonard

I wish I know what to write here...

Close on control interact doesn't work properly due to a timing issue.
_Map and _maptoAdd are at times undefined causing the interaction to fail by not closing out the popup.

Uncommenting

<script src="../webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../polymer/polymer-mini.html" />

Will slow it down enough for the close on interact to work.

Screenshot:

This is a tracking issue.
In the original feature ticket, there was a requirement for a
"Layer picker – show/hide base layers and overlay layers"

Should be investigated/implemented?
Marking this issue as a future enhancement.

/cc @davidrleonard

Clusters: why is the marker count in console log always off by 1 or 2 than what's in the zoomed in section?

/cc @ppeyro

px-map-marker-static does not behave as expected when changing its "type."

If there is a typo in popup-data's data object, only the title remains without any warnings/errors.

Screenshot:
Popup limited to title only

Typo in popup-data:

/cc @davidrleonard

We should consider adding disable-scroll-zoom or disable-touch-zoom to the demo pages.

It's very easy to activate the cursor on the map and with any slight cursor movement, the demo map starts panning and/or zooming. Also, since most of the demos don't have the control zoom illustrated, to get back to the initial state of the map inthe demo, the whole page has to be refreshed.

The numbers in the px-map-control-scale should align with the top or bottom of their scale "bucket" to improve the visual style.

Setting the name attribute in marker-locate is supposed to show on hover over the marker but doesn't seem to work.

Code Snippet:

<px-map-marker-locate name="This is You" lat="{{location.lat}}" lng="{{location.lng}}" accuracy="{{location.accuracy}}" ></px-map-marker-locate>

If you open a popup and while it's open start zooming out, the popup remains open, causing the popup content getting truncated and an image corruption error in the console log. I am assuming we want to close off the popup before the controls get activated. Or should this be left up to the developer to configure?

Screenshots:
Popup Open

Zoom Control activated

/cc @davidrleonard

If the longitude value is invalid/alphanumeric for example, the error message is generated, however, it identifies lat instead of lng.

Screenshot:

Code Snippet:

<px-map-marker-static lat="37.7120" lng="abc-122.0765" type="info" show-badge>

/cc @davidrleonard

The diamond is blue not orange. It should be orange.

/cc @ppeyro

What needs to happen for each

• Every subcomponent needs a demo/ page with:
  • Description blurb at top
  • Basic configurable demo with props
• Every subcomponent needs documentation
  • API description block
  • Usage block
  • Style variables block
• Every API property needs a description (if possible)

A list of subcomponents to finish

• px-map-control-info.html
• px-map-control-locate.html
• px-map-control-scale.html
• px-map-control-zoom.html
• px-map-layer-group.html
• px-map-marker-group.html
• px-map-marker-locate.html
• px-map-marker-static.html
• px-map-marker-symbol.html
• px-map-popup-data.html
• px-map-popup-info.html
• px-map-tile-layer.html

Final checks

• Check to make sure all the examples/ are cleaned up, consistent

px-map Updates:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

px-map-static-marker: And px-map-symbol-marker:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

px-map-marker-group

api doc should be updated with more info about:

• clusterConfig
• iconFns
• colorsbytype section looks incomplete

Screenshot:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

px-map-marker-locate

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

px-map-popup-info

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

px-map-control-scale

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

px-map-control-locate

/cc @davidrleonard

Similar to marker binding, px-map-marker-group features should be able to bind popups.

A feature in a feature collection with a bound marker and popup would be set up like this:

    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          "-117.24042573",
          "32.67445793"
        ]
      },
      "properties": {
        "title": "Cabrillo National Monument",
        "marker-icon": {
          "icon-base": "static-icon",
          "icon-type": "warning",
          "icon-with-badge": true
        },
        "marker-popup" : {
          "popup-base": "info-popup",
          "popup-title": "Cabrillo National Monument",
          "popup-description" : "Lorem ipsum dot sit amet, colloquas..."
        }
      },
      "id": "10001"
    },

Popups should only be bound to individual markers, not to marker clusters.

Marker clusters should be configured to draw with the following color options:

• Show all colors in a donut pie chart, each pie arc should be relative to the # of that color group in the cluster
• Show the dominant color in the cluster (i.e. show the color of the largest color group of markers)
• Show a specific color if it exists in the cluster (i.e. if ANY important red color group markers exist, show that color to alert about the cluster)

See #29 for the precursor to this request.

Right now, controls are stacked in the same position in reverse DOM order automatically. If it seems useful for developers, we should expose an explicit order attribute or some other way to allow developers to dynamically re-stack controls on the map without detaching and re-attaching them.

Clusters: IE: getting a second script error (in addition to the above) about object not supporting 'getVisibleMarkers'

/cc @ppeyro

In px-control-locate, if move-max-zoom is set to a different zoom value, it doesn't make any difference on the zoom level. It seems locate always defaults to the highest zoom level.

Screenshot:

Code Snippet:

<px-map-control-locate
              position="bottomright"
              move-to-location
              last-found-location={{location}}
              move-max-zoom = "6"
              on-px-map-control-locate-error="handleerror"
            >
          </px-map-control-locate>

/cc @davidrleonard

This is timing issue that happens on load when you have multiple clusters trying to draw before d3 has finished loading.

Screenshot:

/cc @davidrleonard

This is in all 3 browsers(chrome,ff, safari) although easier to reproduce in safari and FF.
Started noticing this on a map with multiple markers, but stripped those out and now even on a simple map with no markers, if you start zooming out/in using the controls 3 times in a row after the map loads, you get an image corrupt/truncated error in the log. Also, when this happens one or 2 tiles might go missing but most times the image tiles stay intact.

Screenshot:

/cc @davidrleonard

In a situation where there are multiple markers/popups at the same lat+lng coordinates, only the last/top marker/popup is viewable and all other markers/popups are completely hidden.

Should the popups & static markers be stacked or tagged or in some way identified to have multiple items underneath them?

Screenshot:

2 ovelaid markers+popups/only the second one is visible:

/cc @davidrleonard

Locate doesn't seem to locate the location in the latest pull.

You can properly add the locate control to the map, but it doesn't seem to be functional. Selecting the icon indicates it's trying to locate(turning to disable momentarily), but then the icon turns back to blue but the location is not pinpointed.
No errors in console log either.
This is on all browsers.

/cc @davidrleonard

If the popup-data component is empty, it generates a box with zero height on hover over the marker.

Screenshot:

Code Snippet:

<px-map-popup-data ></px-map-popup-data>

/cc @davidrleonard

In control-zoom: zoom-in-text will work if the string is enclosed in single quotes and not in double quotes.
In control-locate: it's the reverse, the same syntax won't work unless the string is in double quotes.

Code Snippet:

<px-map-control-zoom position="bottomleft" zoom-in-title ="Zoom it on me" zoom-in-text='<i class="fa fa-briefcase"></i>'></px-map-control-zoom>

<px-map-control-locate position="bottomright" locate-title="Locate Me" locate-text="<i class='fa fa-briefcase'></i>"></px-map-control-locate>

/cc @davidrleonard

If you double click on the map after you reach max-zoom, the map still continue to redraw causing a jittering effect and a slight shift in tiles. Not sure if this is by design and the intended behavior?

Screenshot:
Max Zoom Reached:

double click on marker after max-zoom:

/cc @davidrleonard

To reduce complexity and better match our design system, we should remove the showBadge attribute from all markers.

Instead, type warning and info markers should always show a badge. Other marker types should never show a badge.

This will require some non-trivial changes to the icon constructors (StaticIcon, SymbolIcon, etc.) and to the components that implement them (px-map-marker-static, px-map-marker-symbol, and px-map-marker-group which also uses it).