- Tile layer components now support an opacity property.
- Fixed
px-map-marker-groupnot updating when its data prop is updated with an empty features collection - Tweaked
px-map-control-scalefont-size so that it always fits within the scale element. Font-size can be configured with--px-map-scale-font-sizeCSS variable.
- Map will now clamp internal
minZoomandmaxZoomvalues based on the supported bounds of all children layers. This new behaviour can be suppressed by setting theunclamp-zoom-to-layersproperty on the px-map component
- Fixed regression in feature properties popup width from
px-map-layer-geojsoncomponent - Fixed
fit-to-markersprop not applying the correct zoom level when there's greater than 1 marker in map viewport
- Fixed regression in popup width when defined in the properties of a
px-map-marker-groupcomponent
- Added
maxWidth(Defaults to 400) andminWidth(Defaults to 300) properties to px-map-popup-info and px-map-popup-data. They are used to manually set max and min width of the popup container.
- Fixed missing disabled styling on control zoom buttons
- Add the
openedproperty to px-map-popup-info and px-map-popup-data. Use this property to programmatically open or close a popup without user interaction on the popup's parent. Seeexamples/popup-open-close-api.htmlfor a demo.
- Update deps
- Add custom mouseover & mouseout events to px-map-marker-static elements
- Fixes a bug where markers (or other layers) that are imperatively detached from the DOM and then re-attached were not re-attached to the map
- fix documentation typos
- fixing demo pages for IE11
- Unpin leaflet.markercluster version
- Pin leaflet.markercluster to ~1.2.0 until leaflet bug is resolved
- Update .travis.yml
- Update tests
- fix relative path for geojson demo
- replace html w markdown in docs
- Add Polymer 1.x/2.x hybrid element support
- Remove broken import from demo page.
- Adds the
px-map-tile-layer-wmslayer to support querying WMS services to request base tile images
- Fix path to API source file for px-map-tile-layer-google demo
This is a major release and includes new features and breaking changes.
- The px-map code is written in ES6 format, and in previous versions the code
was shipped in transpiled format in the
dist/directory. This built code has been deleted. If you were relying on it you should switch over to use thepx-map/px-map-*.htmlfiles directly instead ofpx-map/dist/px-map-*.html. If you need to transpile the px-map code for older browsers, you should do so as part of your app's build process. See the Transpile ES6 guide on the Predix Design System website for guidance on how to implement this in your build system.
- All px-map marker colors can now be set in a fully dynamic, customizable way. This allows developers to set up to 100 custom colors for markers, which is especially valuable for marker group visualizations with custom asset types. See the documentation in px-map-marker-* documentation pages for more info on using this new feature.
- Add device flags
- We're adding the new
px-map-tile-layer-googlesubcomponent in this release. Thanks to Ollie Sims as his team for this contribution. Teams using px-map can now choose from a variety of tile providers, including Google, Bing, and any provider that exposes an x/y/z API.
- Expose the
disableDoubleClickZoomproperty to allow the developer to disable zooming on double click for mouse or touch input.
- Set the cluster icon container to use the box-sizing border-box model to determine how to size itself. Fixes a bug that happened when the cluster icon inherited box-sizing context-box from the app, causing the icon to look broken.
- Fix misc. bugs in demo for
px-map-layer-geojson
- Fix wording in documentation
- Add Object.assign polyfill for IE
- Check that
zoomis set before trying to draw the map - Check for
parent.getPopupmethod before calling it inaddInstforpx-map-behavior-popup
- Add title tag for
px-map-marker-locate - Add
hideErrorargument tolatLngIsValidmethod so developer can choose to hide the console error if lat or lng is invalid
- Fix paths for px-map API viewer
- Adds the
--px-map-z-indexproperty to px-map which can be used to position the map in the correct layer within your application. Note that the z-indices of Leaflet layers exist in their own stacking context, and so are not affected by the z-index set on px-map. Read more about the stacking context here. - Adds the
invalidateSize()method to px-map, which can be used to check whether the map container has changed size or visibility, and - if so - updates the map accordingly by refreshing the tile layer.
This is a major release and includes breaking changes.
Updates all icons to take svg icons (e.g. px-icon, iron-icon) rather than an icon font (e.g. font-awesome).
Components affected:
- px-map-marker-symbol
- px-map-marker-group
- px-map-control-zoom
- px-map-control-locate
Changes:
px-map-marker-symbol: Thesymbol-classattribute has been removed and replaced with theiconattribute. Replace all references tosymbol-classandsymbolClassin your code withicon. Replace icon font icons with svg icons, either from px-icon-set or from another svg icon set.px-map-control-zoom: Thezoom-in-textandzoom-out-textattributes have been removed. The zoom in and zoom out icons are no longer configurable. Delete any references to these attributes in your code.px-map-control-locate: Thelocate-textattribute has been removed. The locate icon is no longer configurable. Delete any references to this attribute in your code.
See px-icon-set to find new icons you can use to replace previous font-awesome icons. If you can't find the icons you need in px-icon-set, you can look at iron-icons. If you would like to define your own icons, look at iron-iconset-svg.
- Updates colors and icons for the Predix Design System refresh.
- Document choices for production tile services, add specific info on restrictions of OpenStreetMap tile service.
- Document CSS variables (#91)
- Adds the
attributionPrefixattribute topx-map. You can now customize the attribution prefix (replace the 'Leaflet' link) or turn the prefix off altogether. Thanks to William Chang of GE Energy Connections for this contribution.
- Speeds up style configuration lookups in
px-map-layer-geojsonby memoizing them at creation time and updating them when needed. Thanks to Dave Fox of GE Energy Connections for this contribution.
- Fixes a property documentation typo
- Replace inuit-clearfix with px-clearfix-design
- Update documentation for px-map-popup-info
- Fix travis WCT version to v5.x.x
- Ensures data popups are not shown if the popup has no data
- Adds tap events to
px-map-marker-groupthat fire when clusters or any individual marker inside a cluster is tapped
- Remove mapbox tile layer example. Please do not use this tile layer in production.
- Removes a stray debugger statement from
px-map-layer-geojson
- Fix documentation data loading issue for
px-map-layer-geojson
- Update to import d3 library using px-d3-imports instead of pxd3 to prevent Px.d3 from being undefined when called in px-map-marker group. Be sure to test that d3 is imported in your app before using this version in production.
- Update documentation for px-map-popup-info
- Remove extraneous demo config for px-map-layer-geojson
- We're excited to add the
px-map-layer-geojsonsubcomponent in this release. Thanks to Dave Fox and his team at GE Energy Connections for this contribution. The new component can draw GeoJSON geometries as vector shapes on the map. The component allows for complex, feature-level styling. It should be very helpful for anyone looking to draw additional feature/asset types with px-map.
- A bug that caused data popups to pan the map wildly when they were opened has been fixed. This bug was only present in shady DOM.
- Validates that lat and lng are valid numbers and handles invalid values gracefully (#54). Adds tests.
- Allows developers to force the px-map-tile-layer URL to be decoded if a browser behavior encodes it (#86).
- Fixes a bug that causes popups to collapse when their content is too short
- Adds a default minZoom and maxZoom for map to fix a bug where marker group permanently fails if it attaches before a tile layer and no minZoom and maxZoom are defined (#76). This bug seems to be related to a limitation in the underlying library we use for marker group. See this issue, which seems to have solved a related bug in the past: Leaflet/Leaflet.markercluster#198. It's possible a regression in Leaflet.markercluster caused this bug to happen again — this may require future investigation.
- Adds
disableTouchZoomanddisableScrollZoomto demos to make it easier to browse the demo site.
- Fixes
moveMaxZoomattribute bug inpx-map-locate-control, adds test
This release adds a new subcomponent that loads base layer tiles from the Bing Maps API. It handles authentication and communication with the API, making it simple to add Bing's aerial or road imagery to your map.
- Load tiles from the Bing Maps API with
px-map-tile-layer-bing. See the new component's API docs page for more information and a demo.
This is the first minor release since v1.0.0 and it has a lot of great fixes, tweaks, and improvements to existing components. This release was focused on hardening the components to respond the way developers and users expect.
There are no breaking changes in this release, but some old APIs have been quietly deprecated.
Components affected:
- px-map-marker-static
- px-map-marker-symbol
- px-map-marker-group
- px-map-control-zoom
Changes:
- The
showBadgeattribute has been removed frompx-map-marker-staticandpx-map-marker-symbol. The badges will now always appear on when those icons have theirtypeset to 'important' or 'warning.' Search your code forshow-badgeorshowBadgein your HTML or JavaScript and just delete any references. If you set theshowBadgeattribute on a component, nothing will happen, and no errors will be thrown. - Related to
showBadge, you should update any GeoJSON FeatureCollection samples or generators you have created. You should no longer pass the key 'icon-show-badge' in your feature marker-icon properties. Search your code for the following regular expression and delete the line:/(?:\"|\')icon\-show\-badge(?:\"|\')[\s]?:[\s]?true/ - The
zoomInTitleandzoomOutTitleoptions have been removed from thepx-map-control-zoomcomponent. These were not well documented and didn't work as expected. The documentation for the component recommended using localization for setting these attributes anyway. If you happened to use them, switch over to using the localization behavior (see the component's API docs).
- You can now bind popups to markers in
px-map-marker-group. See the API docs for that component for a thorough guide to setting up your features with marker icons and popups. You can also seeexamples/marker-clusters-with-popups.htmlfor an example of it in use. - The
px-mapcomponent had itsfitToMarkersbehavior majorly overhauled and improved. New configurations are now available to customize how thefitToMarkersevent happens (fitToMarkersZoomandfitToMarkersPadding). See the API docs for details. - A lot of new events were added
- Fixes an incorrect call to
addInstwhen a component is cleaning itself up. This may speed things up a bit and stop a small memory leak. - The
px-mapcomponentfitToMarkersis much more consistent and should always fit the markers on the map. - Documentation on all components has been significantly improved to show correct examples of how to use components.
- The
imgSrcattribute onpx-map-popup-infowas sometimes not showing an image in the popup. That's fixed now. - All markers are now smaller, to match the design specifications for Predix UI Maps components. This should make it easier to place many markers near each other on a map without having them overlap.
- Add missing semicolon that causes a failure after inlining script
- Fix lat/lng/zoom set and notification timing bugs, add tests to cover
- Well, that was quick. Small patch for some build-time requirements (deploy key and travis configuration).
This is the first release of the px-map components. The map components make it
easy to build an interactive map out of web components with simple, expressive
APIs.
The 1.0.0 release is the first opportunity for developers to start using the map
components. There are still some rough edges, open bugs, and improvements we'd
like to make. (Nothing is every truly done.) Feedback in the form of bugs,
comments, and feature requests is welcome. Please submit your feedback through
issues on the px-map Github repository:
https://github.com/predixdev/px-map/issues.
This is our first public release, so every component is a new component.
(Woohoo.) Here's a list of all the sub-components available to build with. See
the px-map documentation pages (https://www.predix-ui.com/#/components/px-map/)
for more information on what these components do and how you can use them:
- px-map
- px-map-control-locate
- px-map-control-scale
- px-map-control-zoom
- px-map-layer-group
- px-map-marker-group
- px-map-marker-locate
- px-map-marker-static
- px-map-marker-symbol
- px-map-popup-data
- px-map-popup-info
- px-map-tile-layer
The map components are built using new JavaScript language features (i.e. ES6 syntax and new built-in types and addons). Out of the box, these features are not supported by Internet Explorer 11 or older, Safari 9 or older, and some other out-of-date browsers. (But they work great in new Chrome, Firefox, and Microsoft Edge versions. Give 'em a test drive.)
You'll have to transpile and bundle the map components as part of your build process (e.g. with a transpilation plugin like babel as part of a webpack/browserify/etc. bundle). We'll have more documentation coming soon to help you use off-the-shelf tools like the Polymer CLI (https://www.polymer-project.org/1.0/docs/tools/polymer-cli) to build and distribute your code. Using an optimized build lets you decide how to tune your code for your users. It can also make things run much faster with the right tuning.
Check back on the px-map documentation pages and the Github repository for more information on preparing your code to run in production on older browsers.
See our Github issues page for more information about planned upcoming enhancements and features. We also welcome contributions if your team builds something that can be used by and shared with others.