@rio-cloud/rio-uikit 0.16.2-beta.3 → 0.16.2-beta.4

package/components/filepicker/FilePicker.js

@@ -5,7 +5,6 @@ import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Dropzone, { useDropzone } from 'react-dropzone';
 import Button from '../button/Button';
-import classNames from 'classnames';
 var FilePicker = function FilePicker(props) {
   var label = props.label,
     accept = props.accept,
@@ -23,7 +22,10 @@ var FilePicker = function FilePicker(props) {
   var showButton = isButton || isFull;
   var showDropzone = isDropzone || isFull;
   var handleDrop = useCallback(function (acceptedFiles, rejectedFiles) {
-    var files = accept.includes('image') ? acceptedFiles.map(function (file) {
+    var hasImagesType = Object.keys(accept).some(function (mimeType) {
+      return mimeType.startsWith('image');
+    });
+    var files = hasImagesType ? acceptedFiles.map(function (file) {
       return Object.assign(file, {
         preview: URL.createObjectURL(file)
       });
@@ -60,7 +62,6 @@ FilePicker.defaultProps = {
   displayMode: 'button',
   multiple: true,
   label: 'Select Files',
-  accept: '',
   onPick: function onPick() {},
   className: ''
 };
@@ -68,7 +69,7 @@ FilePicker.propTypes = {
   displayMode: PropTypes.string /* Display mode: 'dropzone' / 'button' / 'full' */,
   multiple: PropTypes.bool /* Allow multiple file selections or not */,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) /* Text to display on Button */,
-  accept: PropTypes.string /* List of accepted Mime Types */,
+  accept: PropTypes.object /* Object list of accepted Mime Types as keys and file extensions array as value */,
   maxSize: PropTypes.number /* Maximum File Size */,
   onPick: PropTypes.func /* Pick callback */,
   className: PropTypes.string /* Custom className for the displayed component (dropzone/button) */,

package/components/map/assets/icon_map_settings_maptype_night_active.svg

@@ -0,0 +1,12 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 20.322L19.98 31.644L39.96 20.322L19.98 9L0 20.322ZM5.363 22.178C5.363 22.178 2.01 20.254 2.01 20.256L5.363 18.354L8.717 20.254L5.363 22.178V22.178ZM8.98 24.24L5.626 22.317L8.98 20.417L12.333 22.316L8.98 24.24ZM12.614 26.277C12.614 26.277 9.261 24.352 9.261 24.354L12.614 22.454L15.967 24.352L12.614 26.277V26.277ZM16.25 28.317L12.897 26.394L16.25 24.494L19.603 26.393L16.25 28.317V28.317ZM19.887 30.392L16.534 28.469L19.887 26.569L23.241 28.468L19.887 30.392ZM9.11 20.128C9.11 20.128 5.757 18.204 5.757 18.206L9.11 16.304L12.464 18.204L9.11 20.128V20.128ZM12.727 22.19L9.373 20.267L12.727 18.367L16.08 20.266L12.727 22.19V22.19ZM16.361 24.227L13.008 22.304L16.361 20.404L19.714 22.303L16.361 24.227V24.227ZM19.997 26.267C19.997 26.267 16.644 24.343 16.644 24.345L19.997 22.443L23.35 24.343L19.997 26.267V26.267ZM23.634 28.342L20.28 26.419L23.633 24.519L26.987 26.418L23.633 28.342H23.634V28.342ZM12.76 18.038C12.76 18.038 9.407 16.114 9.407 16.116L12.76 14.214L16.113 16.114L12.76 18.038ZM16.376 20.1L13.023 18.177L16.376 16.277L19.729 18.176L16.376 20.1ZM20.011 22.137C20.011 22.137 16.658 20.212 16.658 20.214L20.011 18.313L23.364 20.213L20.011 22.137V22.137ZM23.647 24.177L20.294 22.254L23.647 20.354L27 22.253L23.647 24.177ZM27.284 26.252L23.931 24.329L27.284 22.429L30.637 24.328L27.284 26.252V26.252ZM16.367 15.964L13.014 14.041L16.367 12.141L19.721 14.04L16.367 15.964V15.964ZM19.983 18.026L16.63 16.102L19.983 14.202L23.337 16.101L19.983 18.025V18.026ZM23.618 20.063C23.618 20.063 20.265 18.138 20.265 18.14L23.618 16.239L26.971 18.139L23.618 20.063ZM27.254 22.103L23.901 20.18L27.254 18.28L30.607 20.179L27.254 22.103V22.103ZM30.891 24.178C30.891 24.178 27.538 22.253 27.538 22.255L30.891 20.355L34.244 22.253L30.891 24.178V24.178ZM20.061 13.835C20.061 13.835 16.707 11.91 16.707 11.912L20.06 10.011L23.413 11.911L20.06 13.835H20.061V13.835ZM23.676 15.896C23.676 15.896 20.323 13.972 20.323 13.974L23.676 12.073L27.03 13.972L23.676 15.896ZM27.311 17.933C27.311 17.933 23.958 16.009 23.958 16.011L27.311 14.109L30.664 16.009L27.311 17.933ZM30.947 19.973C30.947 19.973 27.594 18.049 27.594 18.051L30.947 16.15L34.3 18.05L30.947 19.973V19.973ZM34.584 22.048C34.584 22.048 31.231 20.124 31.231 20.126L34.584 18.225L37.937 20.124L34.584 22.048Z" fill="#30B4C0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.352 3.14533C12.4221 3.2154 12.4698 3.3047 12.489 3.40192C12.5082 3.49913 12.4981 3.59987 12.46 3.69133C12.1552 4.42281 11.9989 5.20757 12 6C12 7.5913 12.6321 9.11742 13.7574 10.2426C14.8826 11.3679 16.4087 12 18 12C18.7924 12.0011 19.5772 11.8448 20.3087 11.54C20.4001 11.5019 20.5007 11.4919 20.5978 11.5111C20.695 11.5303 20.7842 11.5779 20.8543 11.6478C20.9243 11.7178 20.972 11.807 20.9913 11.9041C21.0106 12.0012 21.0006 12.1019 20.9627 12.1933C20.4307 13.4688 19.5332 14.5584 18.3831 15.3248C17.2331 16.0911 15.882 16.5 14.5 16.5C10.634 16.5 7.5 13.366 7.5 9.5C7.5 6.588 9.278 4.092 11.8067 3.03733C11.898 2.99935 11.9986 2.98933 12.0957 3.00856C12.1928 3.02778 12.282 3.07538 12.352 3.14533V3.14533Z" fill="#30B4C0"/>
+<g clip-path="url(#clip0_1_2)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5 4.25C25.5815 4.25002 25.6607 4.27657 25.7258 4.32565C25.7908 4.37473 25.8381 4.44365 25.8605 4.522L26.267 5.945C26.3545 6.25146 26.5187 6.53055 26.7441 6.75591C26.9695 6.98128 27.2485 7.14548 27.555 7.233L28.978 7.6395C29.0563 7.66193 29.1252 7.70924 29.1742 7.77428C29.2232 7.83932 29.2497 7.91855 29.2497 8C29.2497 8.08145 29.2232 8.16068 29.1742 8.22572C29.1252 8.29076 29.0563 8.33807 28.978 8.3605L27.555 8.767C27.2485 8.85452 26.9695 9.01872 26.7441 9.24409C26.5187 9.46945 26.3545 9.74854 26.267 10.055L25.8605 11.478C25.8381 11.5563 25.7908 11.6252 25.7257 11.6742C25.6607 11.7232 25.5815 11.7497 25.5 11.7497C25.4186 11.7497 25.3393 11.7232 25.2743 11.6742C25.2092 11.6252 25.1619 11.5563 25.1395 11.478L24.733 10.055C24.6455 9.74854 24.4813 9.46945 24.2559 9.24409C24.0306 9.01872 23.7515 8.85452 23.445 8.767L22.022 8.3605C21.9437 8.33807 21.8748 8.29076 21.8258 8.22572C21.7768 8.16068 21.7503 8.08145 21.7503 8C21.7503 7.91855 21.7768 7.83932 21.8258 7.77428C21.8748 7.70924 21.9437 7.66193 22.022 7.6395L23.445 7.233C23.7515 7.14548 24.0306 6.98128 24.2559 6.75591C24.4813 6.53055 24.6455 6.25146 24.733 5.945L25.1395 4.522C25.1619 4.44365 25.2092 4.37473 25.2742 4.32565C25.3393 4.27657 25.4185 4.25002 25.5 4.25ZM30 2.75C30.0837 2.74995 30.1649 2.77788 30.2309 2.82934C30.2968 2.8808 30.3437 2.95284 30.364 3.034L30.493 3.552C30.611 4.022 30.978 4.389 31.448 4.507L31.966 4.636C32.0473 4.65614 32.1195 4.70293 32.1712 4.7689C32.2228 4.83487 32.2508 4.91623 32.2508 5C32.2508 5.08377 32.2228 5.16513 32.1712 5.2311C32.1195 5.29707 32.0473 5.34386 31.966 5.364L31.448 5.493C30.978 5.611 30.611 5.978 30.493 6.448L30.364 6.966C30.3439 7.04731 30.2971 7.11954 30.2311 7.17117C30.1651 7.22279 30.0838 7.25084 30 7.25084C29.9162 7.25084 29.8349 7.22279 29.7689 7.17117C29.7029 7.11954 29.6561 7.04731 29.636 6.966L29.507 6.448C29.4493 6.21721 29.33 6.00645 29.1618 5.83824C28.9936 5.67003 28.7828 5.55069 28.552 5.493L28.034 5.364C27.9527 5.34386 27.8805 5.29707 27.8288 5.2311C27.7772 5.16513 27.7492 5.08377 27.7492 5C27.7492 4.91623 27.7772 4.83487 27.8288 4.7689C27.8805 4.70293 27.9527 4.65614 28.034 4.636L28.552 4.507C28.7828 4.44931 28.9936 4.32997 29.1618 4.16176C29.33 3.99355 29.4493 3.78279 29.507 3.552L29.636 3.034C29.6563 2.95284 29.7032 2.8808 29.7691 2.82934C29.8351 2.77788 29.9163 2.74995 30 2.75V2.75ZM29.25 9.5C29.3288 9.49995 29.4055 9.52471 29.4694 9.57075C29.5333 9.61679 29.5811 9.68178 29.606 9.7565L29.803 10.348C29.878 10.5715 30.053 10.7475 30.277 10.822L30.8685 11.0195C30.943 11.0445 31.0077 11.0923 31.0536 11.1561C31.0995 11.2198 31.1242 11.2964 31.1242 11.375C31.1242 11.4536 31.0995 11.5302 31.0536 11.5939C31.0077 11.6577 30.943 11.7055 30.8685 11.7305L30.277 11.928C30.0535 12.003 29.8775 12.178 29.803 12.402L29.6055 12.9935C29.5805 13.068 29.5327 13.1327 29.4689 13.1786C29.4052 13.2245 29.3286 13.2491 29.25 13.2491C29.1714 13.2491 29.0949 13.2245 29.0311 13.1786C28.9673 13.1327 28.9195 13.068 28.8945 12.9935L28.697 12.402C28.6602 12.2916 28.5982 12.1914 28.5159 12.1091C28.4336 12.0268 28.3334 11.9648 28.223 11.928L27.6315 11.7305C27.557 11.7055 27.4923 11.6577 27.4464 11.5939C27.4005 11.5302 27.3759 11.4536 27.3759 11.375C27.3759 11.2964 27.4005 11.2198 27.4464 11.1561C27.4923 11.0923 27.557 11.0445 27.6315 11.0195L28.223 10.822C28.4465 10.747 28.6225 10.572 28.697 10.348L28.8945 9.7565C28.9194 9.68186 28.9671 9.61693 29.0309 9.57089C29.0947 9.52486 29.1713 9.50006 29.25 9.5V9.5Z" fill="#30B4C0"/>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="12" height="12" fill="white" transform="translate(21 2)"/>
+</clipPath>
+</defs>
+</svg>

package/components/map/assets/icon_map_settings_maptype_night_inactive.svg

@@ -0,0 +1,12 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0199966 20.2L20 31.522L39.98 20.2L20 8.878L0.0199966 20.2ZM5.383 22.056C5.383 22.056 2.03 20.132 2.03 20.134L5.383 18.232L8.737 20.132L5.383 22.056V22.056ZM9 24.118L5.646 22.195L9 20.295L12.353 22.194L9 24.118ZM12.634 26.155C12.634 26.155 9.281 24.23 9.281 24.232L12.634 22.332L15.987 24.23L12.634 26.155V26.155ZM16.27 28.195L12.917 26.272L16.27 24.372L19.623 26.271L16.27 28.195V28.195ZM19.907 30.27L16.554 28.347L19.907 26.447L23.261 28.346L19.907 30.27ZM9.13 20.006C9.13 20.006 5.777 18.082 5.777 18.084L9.13 16.182L12.484 18.082L9.13 20.006V20.006ZM12.747 22.068L9.393 20.145L12.747 18.245L16.1 20.144L12.747 22.068V22.068ZM16.381 24.105L13.028 22.182L16.381 20.282L19.734 22.181L16.381 24.105V24.105ZM20.017 26.145C20.017 26.145 16.664 24.221 16.664 24.223L20.017 22.321L23.37 24.221L20.017 26.145V26.145ZM23.654 28.22L20.3 26.297L23.653 24.397L27.007 26.296L23.653 28.22H23.654V28.22ZM12.78 17.916C12.78 17.916 9.427 15.992 9.427 15.994L12.78 14.092L16.133 15.992L12.78 17.916ZM16.396 19.978L13.043 18.055L16.396 16.155L19.749 18.054L16.396 19.978ZM20.031 22.015C20.031 22.015 16.678 20.09 16.678 20.092L20.031 18.191L23.384 20.091L20.031 22.015V22.015ZM23.667 24.055L20.314 22.132L23.667 20.232L27.02 22.131L23.667 24.055ZM27.304 26.13L23.951 24.207L27.304 22.307L30.657 24.206L27.304 26.13V26.13ZM16.387 15.842L13.034 13.919L16.387 12.019L19.741 13.918L16.387 15.842V15.842ZM20.003 17.904L16.65 15.98L20.003 14.08L23.357 15.979L20.003 17.903V17.904ZM23.638 19.941C23.638 19.941 20.285 18.016 20.285 18.018L23.638 16.117L26.991 18.017L23.638 19.941ZM27.274 21.981L23.921 20.058L27.274 18.158L30.627 20.057L27.274 21.981V21.981ZM30.911 24.056C30.911 24.056 27.558 22.131 27.558 22.133L30.911 20.233L34.264 22.131L30.911 24.056V24.056ZM20.081 13.713C20.081 13.713 16.727 11.788 16.727 11.79L20.08 9.889L23.433 11.789L20.08 13.713H20.081V13.713ZM23.696 15.774C23.696 15.774 20.343 13.85 20.343 13.852L23.696 11.951L27.05 13.85L23.696 15.774ZM27.331 17.811C27.331 17.811 23.978 15.887 23.978 15.889L27.331 13.987L30.684 15.887L27.331 17.811ZM30.967 19.851C30.967 19.851 27.614 17.927 27.614 17.929L30.967 16.028L34.32 17.928L30.967 19.851V19.851ZM34.604 21.926C34.604 21.926 31.251 20.002 31.251 20.004L34.604 18.103L37.957 20.002L34.604 21.926Z" fill="#939BA8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.352 3.14533C12.4221 3.2154 12.4698 3.3047 12.489 3.40192C12.5082 3.49913 12.4981 3.59987 12.46 3.69133C12.1552 4.42281 11.9989 5.20757 12 6C12 7.5913 12.6321 9.11742 13.7574 10.2426C14.8826 11.3679 16.4087 12 18 12C18.7924 12.0011 19.5772 11.8448 20.3087 11.54C20.4001 11.5019 20.5007 11.4919 20.5978 11.5111C20.695 11.5303 20.7842 11.5779 20.8543 11.6478C20.9243 11.7178 20.972 11.807 20.9913 11.9041C21.0106 12.0012 21.0006 12.1019 20.9627 12.1933C20.4307 13.4688 19.5332 14.5584 18.3831 15.3248C17.2331 16.0911 15.882 16.5 14.5 16.5C10.634 16.5 7.5 13.366 7.5 9.5C7.5 6.588 9.278 4.092 11.8067 3.03733C11.898 2.99935 11.9986 2.98933 12.0957 3.00856C12.1928 3.02778 12.282 3.07538 12.352 3.14533V3.14533Z" fill="#939BA8"/>
+<g clip-path="url(#clip0_1_4)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5 4.25C25.5815 4.25002 25.6607 4.27657 25.7258 4.32565C25.7908 4.37473 25.8381 4.44365 25.8605 4.522L26.267 5.945C26.3545 6.25146 26.5187 6.53055 26.7441 6.75591C26.9694 6.98128 27.2485 7.14548 27.555 7.233L28.978 7.6395C29.0563 7.66193 29.1252 7.70924 29.1742 7.77428C29.2232 7.83932 29.2497 7.91855 29.2497 8C29.2497 8.08145 29.2232 8.16068 29.1742 8.22572C29.1252 8.29076 29.0563 8.33807 28.978 8.3605L27.555 8.767C27.2485 8.85452 26.9694 9.01872 26.7441 9.24409C26.5187 9.46945 26.3545 9.74854 26.267 10.055L25.8605 11.478C25.8381 11.5563 25.7908 11.6252 25.7257 11.6742C25.6607 11.7232 25.5814 11.7497 25.5 11.7497C25.4185 11.7497 25.3393 11.7232 25.2743 11.6742C25.2092 11.6252 25.1619 11.5563 25.1395 11.478L24.733 10.055C24.6455 9.74854 24.4813 9.46945 24.2559 9.24409C24.0305 9.01872 23.7515 8.85452 23.445 8.767L22.022 8.3605C21.9437 8.33807 21.8748 8.29076 21.8258 8.22572C21.7768 8.16068 21.7503 8.08145 21.7503 8C21.7503 7.91855 21.7768 7.83932 21.8258 7.77428C21.8748 7.70924 21.9437 7.66193 22.022 7.6395L23.445 7.233C23.7515 7.14548 24.0305 6.98128 24.2559 6.75591C24.4813 6.53055 24.6455 6.25146 24.733 5.945L25.1395 4.522C25.1619 4.44365 25.2092 4.37473 25.2742 4.32565C25.3393 4.27657 25.4185 4.25002 25.5 4.25ZM30 2.75C30.0837 2.74995 30.1649 2.77788 30.2309 2.82934C30.2968 2.8808 30.3437 2.95284 30.364 3.034L30.493 3.552C30.611 4.022 30.978 4.389 31.448 4.507L31.966 4.636C32.0473 4.65614 32.1195 4.70293 32.1712 4.7689C32.2228 4.83487 32.2508 4.91623 32.2508 5C32.2508 5.08377 32.2228 5.16513 32.1712 5.2311C32.1195 5.29707 32.0473 5.34386 31.966 5.364L31.448 5.493C30.978 5.611 30.611 5.978 30.493 6.448L30.364 6.966C30.3439 7.04731 30.2971 7.11954 30.2311 7.17117C30.1651 7.22279 30.0838 7.25084 30 7.25084C29.9162 7.25084 29.8349 7.22279 29.7689 7.17117C29.7029 7.11954 29.6561 7.04731 29.636 6.966L29.507 6.448C29.4493 6.21721 29.33 6.00645 29.1618 5.83824C28.9935 5.67003 28.7828 5.55069 28.552 5.493L28.034 5.364C27.9527 5.34386 27.8805 5.29707 27.8288 5.2311C27.7772 5.16513 27.7492 5.08377 27.7492 5C27.7492 4.91623 27.7772 4.83487 27.8288 4.7689C27.8805 4.70293 27.9527 4.65614 28.034 4.636L28.552 4.507C28.7828 4.44931 28.9935 4.32997 29.1618 4.16176C29.33 3.99355 29.4493 3.78279 29.507 3.552L29.636 3.034C29.6563 2.95284 29.7032 2.8808 29.7691 2.82934C29.8351 2.77788 29.9163 2.74995 30 2.75V2.75ZM29.25 9.5C29.3288 9.49995 29.4055 9.52471 29.4694 9.57075C29.5333 9.61679 29.5811 9.68178 29.606 9.7565L29.803 10.348C29.878 10.5715 30.053 10.7475 30.277 10.822L30.8685 11.0195C30.943 11.0445 31.0077 11.0923 31.0536 11.1561C31.0995 11.2198 31.1241 11.2964 31.1241 11.375C31.1241 11.4536 31.0995 11.5302 31.0536 11.5939C31.0077 11.6577 30.943 11.7055 30.8685 11.7305L30.277 11.928C30.0535 12.003 29.8775 12.178 29.803 12.402L29.6055 12.9935C29.5805 13.068 29.5327 13.1327 29.4689 13.1786C29.4051 13.2245 29.3286 13.2491 29.25 13.2491C29.1714 13.2491 29.0948 13.2245 29.0311 13.1786C28.9673 13.1327 28.9195 13.068 28.8945 12.9935L28.697 12.402C28.6602 12.2916 28.5982 12.1914 28.5159 12.1091C28.4336 12.0268 28.3334 11.9648 28.223 11.928L27.6315 11.7305C27.557 11.7055 27.4923 11.6577 27.4464 11.5939C27.4005 11.5302 27.3758 11.4536 27.3758 11.375C27.3758 11.2964 27.4005 11.2198 27.4464 11.1561C27.4923 11.0923 27.557 11.0445 27.6315 11.0195L28.223 10.822C28.4465 10.747 28.6225 10.572 28.697 10.348L28.8945 9.7565C28.9194 9.68186 28.9671 9.61693 29.0309 9.57089C29.0947 9.52486 29.1713 9.50006 29.25 9.5V9.5Z" fill="#939BA8"/>
+</g>
+<defs>
+<clipPath id="clip0_1_4">
+<rect width="12" height="12" fill="white" transform="translate(21 2)"/>
+</clipPath>
+</defs>
+</svg>

package/components/map/components/Map.js

@@ -13,7 +13,7 @@ import throttle from 'lodash/fp/throttle';
 import mapProps from '../utils/proptypes';
 import addEventListener from '../../../utils/addEventListener';
 import '../herePolyfill';
-import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS, TILE_SIZE } from './constants';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS } from './constants';
 import ZoomButtons from './features/settings/ZoomButtons';
 import IncidentsLayer from './features/layers/IncidentsLayer';
 import TrafficLayer from './features/layers/TrafficLayer';
@@ -23,9 +23,12 @@ import DefaultRasterLayer from './features/layers/baselayers/DefaultRasterLayer'
 import FleetStyleLayer from './features/layers/baselayers/FleetStyleLayer';
 import SatelliteLayer from './features/layers/baselayers/SatelliteLayer';
 import TerrainLayer from './features/layers/baselayers/TerrainLayer';
+import NightLayer from './features/layers/baselayers/NightLayer';
+import { getDefaultBaseLayer } from './features/layers/baselayers/useBaseLayer';
 import { addEventListenerMap, removeEventListenerMap } from '../utils/eventHandling';
 import { MapContext, MapSettingsContext } from './context';
 import { createUtils, getPPI } from './mapUtils';
+import { useDarkMode } from '../../../hooks/useDarkMode';
 export var NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
 var RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
 
@@ -39,19 +42,6 @@ var getPlatform = function getPlatform(credentials) {
     app_code: credentials.app_code
   });
 };
-
-// Obtain the default map types from the platform object:
-var createDefaultLayers = function createDefaultLayers(platform, language, darkMode) {
-  return platform.createDefaultLayers({
-    lg: language,
-    lg2: 'de',
-    // Only needed for a raster based map
-    tileSize: TILE_SIZE,
-    ppi: getPPI(),
-    // default style for default raster layer
-    style: !darkMode && 'mini'
-  });
-};
 var getHereUi = function getHereUi(hereMap, defaultLayers, showScaleBar) {
   var hereUi = H.ui.UI.createDefault(hereMap, defaultLayers);
   if (hereUi) {
@@ -99,7 +89,7 @@ var getBaseLayer = function getBaseLayer(api, baseLayer, language, useWebGL, dar
   switch (baseLayer) {
     case MAP_TYPE_DEFAULT:
       {
-        return useWebGL ? /*#__PURE__*/React.createElement(DefaultVectorLayer, {
+        return !darkMode && useWebGL ? /*#__PURE__*/React.createElement(DefaultVectorLayer, {
           api: api,
           language: language,
           key: baseLayer
@@ -128,6 +118,12 @@ var getBaseLayer = function getBaseLayer(api, baseLayer, language, useWebGL, dar
         language: language,
         key: baseLayer
       });
+    case MAP_TYPE_NIGHT:
+      return /*#__PURE__*/React.createElement(NightLayer, {
+        api: api,
+        language: language,
+        key: baseLayer
+      });
     default:
       null;
   }
@@ -151,14 +147,6 @@ var getStyle = function getStyle(height, width) {
   }
   return style;
 };
-
-// https://developer.here.com/documentation/maps/3.1.37.0/api_reference/H.service.Platform.html#createDefaultLayers
-var getMapRenderingEngine = function getMapRenderingEngine(defaultLayers, useWebGL, darkMode) {
-  if (useWebGL) {
-    return defaultLayers.vector.normal.map;
-  }
-  return darkMode ? defaultLayers.raster.normal.mapnight : defaultLayers.raster.normal.map;
-};
 var Map = function Map(props) {
   var children = props.children,
     credentials = props.credentials,
@@ -208,22 +196,35 @@ var Map = function Map(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     showCluster = _useState10[0],
     setShowCluster = _useState10[1];
+  var isDarkMode = useDarkMode();
+  useEffect(function () {
+    // Toggle night map only if current map type is default
+    if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
+      setBaseLayer(MAP_TYPE_NIGHT);
+      onMapTypeChange(MAP_TYPE_NIGHT);
+    }
+    // Toggle back to default map only if current map type is night
+    else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
+      setBaseLayer(MAP_TYPE_DEFAULT);
+      onMapTypeChange(MAP_TYPE_DEFAULT);
+    }
+  }, [isDarkMode]);
   var devicePixelRatio = window.devicePixelRatio || 1;
   useEffect(function () {
-    var platform = getPlatform(credentials);
-    var defaultLayers = createDefaultLayers(platform, language, darkMode);
+    console.debug('initialize here map');
     var bounds = boundingBox && getBounds(boundingBox);
-    var mapRenderingEngine = getMapRenderingEngine(defaultLayers, useWebGL, darkMode);
+    var platform = getPlatform(credentials);
+    var defaultLayers = platform.createDefaultLayers();
+    var defaultLayer = getDefaultBaseLayer(defaultLayers, baseLayer, useWebGL);
 
     // Instantiate (and display) a map object:
-    var hereMap = new H.Map(mapRef.current, mapRenderingEngine, {
+    var mapConfig = {
       zoom: zoom,
       center: center,
       bounds: bounds,
-      pixelRatio: devicePixelRatio,
-      // Need to be set for better performence of raster based map
-      engineType: useWebGL ? undefined : H.map.render.RenderEngine.EngineType.P2D
-    });
+      pixelRatio: devicePixelRatio
+    };
+    var hereMap = new H.Map(mapRef.current, defaultLayer, mapConfig);
 
     // Add a resize listener to make sure that the map occupies the whole container
     var resizeListener = addEventListener(window, 'resize', throttle(RESIZE_THROTTLE, function () {
@@ -267,7 +268,7 @@ var Map = function Map(props) {
         hereMap.dispose();
       }
     };
-  }, [useWebGL, darkMode]);
+  }, [useWebGL]);
 
   // Update BoundingBox from outside
   useEffect(function () {
@@ -282,17 +283,25 @@ var Map = function Map(props) {
     }
   }, [boundingBox]);
 
-  // Update Zoom from outside
+  // Update Zoom from outside if value is different
   useEffect(function () {
-    if (api && zoom) {
-      api.map.setZoom(zoom, zoomAnimation);
+    if (!api) {
+      return;
+    }
+    var currentMapZoom = api.utils.getZoom();
+    if (zoom && currentMapZoom !== zoom) {
+      api.utils.setZoom(zoom, zoomAnimation);
     }
   }, [zoom]);
 
-  // Update Lat & Lng from outside
+  // Update Lat & Lng from outside if value is different
   useEffect(function () {
-    if (api && center) {
-      api.map.setCenter(center, zoomAnimation);
+    if (!(api && center)) {
+      return;
+    }
+    var currentMapCenter = api.utils.getCenter();
+    if (currentMapCenter.lat !== center.lat || currentMapCenter.lng !== center.lng) {
+      api.utils.setCenter(center, zoomAnimation);
     }
   }, [center]);
 
@@ -344,22 +353,22 @@ var Map = function Map(props) {
     }));
   };
   var handleZoomIn = function handleZoomIn() {
-    var z = Math.round(api.map.getZoom());
+    var z = api.utils.getZoom();
     var newZoom = z + 1;
     onZoomIn(newZoom, z);
-    api.map.setZoom(newZoom, true);
+    api.utils.setZoom(newZoom, zoomAnimation);
   };
   var handleZoomOut = function handleZoomOut() {
-    var z = Math.round(api.map.getZoom());
+    var z = api.utils.getZoom();
     var newZoom = z - 1;
     onZoomOut(newZoom, z);
-    api.map.setZoom(newZoom, true);
+    api.utils.setZoom(newZoom, zoomAnimation);
   };
   var style = getStyle(height, width);
   var autoHeightClass = isEmpty(style) ? 'height-100pct' : '';
   var hideZoomButtons = disableBehavior;
   return /*#__PURE__*/React.createElement("div", {
-    className: "Map position-relative ".concat(autoHeightClass),
+    className: "Map position-relative map-type-".concat(baseLayer.toLowerCase(), " ").concat(autoHeightClass),
     style: style,
     ref: mapRef
   }, isMapInitialized && /*#__PURE__*/React.createElement(MapContext.Provider, {
@@ -389,6 +398,7 @@ Map.TYPE_DEFAULT = MAP_TYPE_DEFAULT;
 Map.TYPE_FLEET_STYLE = MAP_TYPE_FLEET_STYLE;
 Map.TYPE_SATELLITE = MAP_TYPE_SATELLITE;
 Map.TYPE_TERRAIN = MAP_TYPE_TERRAIN;
+Map.TYPE_NIGHT = MAP_TYPE_NIGHT;
 Map.LAYER_INCIDENTS = MAP_LAYER_INCIDENTS;
 Map.LAYER_TRAFFIC = MAP_LAYER_TRAFFIC;
 Map.LAYER_ROAD_RESTRICTIONS = MAP_LAYER_ROAD_RESTRICTIONS;
@@ -424,7 +434,7 @@ Map.propTypes = {
   hideMapSettings: PropTypes.bool,
   hideClusterSettings: PropTypes.bool,
   hideMapLayerSettings: PropTypes.bool,
-  mapType: PropTypes.oneOf([Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE, Map.TYPE_TERRAIN]),
+  mapType: PropTypes.oneOf([Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE, Map.TYPE_TERRAIN, Map.TYPE_NIGHT]),
   mapLayer: PropTypes.arrayOf(PropTypes.string),
   showCluster: PropTypes.bool,
   showScaleBar: PropTypes.bool,

package/components/map/components/constants.js

@@ -2,13 +2,11 @@ export var MAP_TYPE_DEFAULT = 'DEFAULT';
 export var MAP_TYPE_FLEET_STYLE = 'FLEET_STYLE';
 export var MAP_TYPE_SATELLITE = 'SATELLITE';
 export var MAP_TYPE_TERRAIN = 'TERRAIN';
+export var MAP_TYPE_NIGHT = 'NIGHT';
 export var MAP_LAYER_INCIDENTS = 'INCIDENTS';
 export var MAP_LAYER_TRAFFIC = 'TRAFFIC';
 export var MAP_LAYER_ROAD_RESTRICTIONS = 'ROAD_RESTRICTIONS';
 export var FORMAT = 'png8';
 export var TILE_SIZE = 256;
 export var TILE_TYPE = 'maptile';
-export var HIGH_RES_PPI = 320;
-
-// https://3.base.maps.ls.hereapi.com/maptile/2.1/maptile/da6f196b15/normal.day/11/1086/709/256/png8?xnlp=CL_JSMv3.1.37.0&apikey=Kls87GMD8WOPMBac1vgJ0eWYpSw1YzSXtXNcWHtZf5w&style=alps&lg=eng
-// https://3.base.maps.ls.hereapi.com/maptile/2.1/maptile/da6f196b15/normal.day/11/1086/709/256/png8?xnlp=CL_JSMv3.1.37.0&apikey=Kls87GMD8WOPMBac1vgJ0eWYpSw1YzSXtXNcWHtZf5w&ppi=320&lg=en&lg2=de
+export var HIGH_RES_PPI = 320;

package/components/map/components/features/layers/baselayers/DefaultRasterLayer.js

@@ -1,17 +1,16 @@
 import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_DEFAULT } from '../../../constants';
 
 // https://developer.here.com/documentation/map-tile/dev_guide/topics/resource-info.html
 
 var DefaultRasterLayer = function DefaultRasterLayer(props) {
   var api = props.api,
-    language = props.language,
-    darkMode = props.darkMode;
+    language = props.language;
   useBaseLayer({
     api: api,
     language: language,
-    mapTileServiceType: 'base',
-    scheme: 'normal.day',
-    additionalParameters: !darkMode && {
+    mapType: MAP_TYPE_DEFAULT,
+    additionalParameters: {
       style: 'alps'
     }
   });

package/components/map/components/features/layers/baselayers/DefaultVectorLayer.js

@@ -1,13 +1,14 @@
 import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_DEFAULT } from '../../../constants';
 var DefaultVectorLayer = function DefaultVectorLayer(props) {
   var api = props.api,
     language = props.language;
   useBaseLayer({
     api: api,
     language: language,
-    mapTileServiceType: 'base',
-    scheme: 'normal.day',
-    additionalParameters: {}
+    mapType: MAP_TYPE_DEFAULT,
+    additionalParameters: {},
+    isWebGL: true
   });
   return null;
 };

package/components/map/components/features/layers/baselayers/FleetStyleLayer.js

@@ -1,12 +1,12 @@
 import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_FLEET_STYLE } from '../../../constants';
 var FleetStyleLayer = function FleetStyleLayer(props) {
   var api = props.api,
     language = props.language;
   useBaseLayer({
     api: api,
     language: language,
-    mapTileServiceType: 'base',
-    scheme: 'normal.day',
+    mapType: MAP_TYPE_FLEET_STYLE,
     additionalParameters: {
       style: 'fleet'
     }

package/components/map/components/features/layers/baselayers/NightLayer.js

@@ -0,0 +1,17 @@
+import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_NIGHT } from '../../../constants';
+
+// https://developer.here.com/documentation/map-tile/dev_guide/topics/resource-info.html
+
+var NightLayer = function NightLayer(props) {
+  var api = props.api,
+    language = props.language;
+  useBaseLayer({
+    api: api,
+    language: language,
+    mapType: MAP_TYPE_NIGHT,
+    additionalParameters: {}
+  });
+  return null;
+};
+export default NightLayer;

package/components/map/components/features/layers/baselayers/SatelliteLayer.js

@@ -1,12 +1,12 @@
 import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_SATELLITE } from '../../../constants';
 var SatelliteLayer = function SatelliteLayer(props) {
   var api = props.api,
     language = props.language;
   useBaseLayer({
     api: api,
     language: language,
-    mapTileServiceType: 'aerial',
-    scheme: 'hybrid.day',
+    mapType: MAP_TYPE_SATELLITE,
     additionalParameters: {
       style: 'default'
     }

package/components/map/components/features/layers/baselayers/TerrainLayer.js

@@ -1,12 +1,12 @@
 import { useBaseLayer } from './useBaseLayer';
+import { MAP_TYPE_TERRAIN } from '../../../constants';
 var TerrainLayer = function TerrainLayer(props) {
   var api = props.api,
     language = props.language;
   useBaseLayer({
     api: api,
     language: language,
-    mapTileServiceType: 'aerial',
-    scheme: 'terrain.day',
+    mapType: MAP_TYPE_TERRAIN,
     additionalParameter: {
       style: 'default'
     }

package/components/map/components/features/layers/baselayers/useBaseLayer.js

@@ -4,19 +4,36 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { useState, useEffect } from 'react';
 import { mapToLongLocale } from '../../../../utils/localization';
-import { FORMAT, TILE_SIZE } from '../../../constants';
 import { getPPI } from '../../../mapUtils';
+import { MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT } from '../../../constants';
+
+// Obtain the default map types from the platform object:
+export var getDefaultBaseLayer = function getDefaultBaseLayer(defaultLayers, mapType, useWebGL) {
+  if (mapType === MAP_TYPE_SATELLITE) {
+    return defaultLayers.raster.satellite.map;
+  }
+  if (mapType === MAP_TYPE_TERRAIN) {
+    return defaultLayers.raster.terrain.map;
+  }
+  if (mapType === MAP_TYPE_FLEET_STYLE) {
+    return defaultLayers.raster.normal.map;
+  }
+  if (mapType === MAP_TYPE_NIGHT) {
+    return defaultLayers.raster.normal.mapnight;
+  }
+  if (useWebGL) {
+    return defaultLayers.vector.normal.map;
+  }
+  return defaultLayers.raster.normal.map;
+};
 export var useBaseLayer = function useBaseLayer(props) {
   var api = props.api,
-    _props$mapTileService = props.mapTileServiceType,
-    mapTileServiceType = _props$mapTileService === void 0 ? 'base' : _props$mapTileService,
-    _props$tileType = props.tileType,
-    tileType = _props$tileType === void 0 ? 'maptile' : _props$tileType,
-    scheme = props.scheme,
     _props$additionalPara = props.additionalParameters,
     additionalParameters = _props$additionalPara === void 0 ? {} : _props$additionalPara,
-    options = props.options,
-    language = props.language;
+    language = props.language,
+    _props$isWebGL = props.isWebGL,
+    isWebGL = _props$isWebGL === void 0 ? false : _props$isWebGL,
+    mapType = props.mapType;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     baseLayer = _useState2[0],
@@ -27,13 +44,8 @@ export var useBaseLayer = function useBaseLayer(props) {
         lg: mapToLongLocale(language),
         ppi: getPPI()
       });
-      var mapTiler = api.platform.getMapTileService({
-        type: mapTileServiceType
-      });
-
-      // Function signature: createTileLayer(tileType, scheme, tileSize, format, opt_additionalParameters, opt_opacity, opt_dark, opt_options)
-      // See: https://developer.here.com/documentation/maps/3.1.37.0/api_reference/H.service.MapTileService.html#createTileLayer
-      var newBaseLayer = mapTiler.createTileLayer(tileType, scheme, TILE_SIZE, FORMAT, additionalParametersWithLocale, 1, false, options);
+      var defaultLayers = api.platform.createDefaultLayers(additionalParametersWithLocale);
+      var newBaseLayer = getDefaultBaseLayer(defaultLayers, mapType, isWebGL);
       api.map.setBaseLayer(newBaseLayer);
       setBaseLayer(newBaseLayer);
     }

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.js

@@ -3,11 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["mapType", "onMapTypeChange"];
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN } from '../../../constants';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN } from '../../../constants';
 import MapSettingsPanel from '../MapSettingsPanel';
 import MapSettingsItem from '../MapSettingsItem';
 import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TRUCK_ACTIVE, MAP_TYPE_FLAT_TRUCK_INACTIVE, MAP_TYPE_SATELITE_ACTIVE, MAP_TYPE_SATELITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE } from '../../../../icons/MapIcon';
+import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TRUCK_ACTIVE, MAP_TYPE_FLAT_TRUCK_INACTIVE, MAP_TYPE_SATELITE_ACTIVE, MAP_TYPE_SATELITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE, MAP_TYPE_NIGHT_ACTIVE, MAP_TYPE_NIGHT_INACTIVE } from '../../../../icons/MapIcon';
 var MapTypeSettings = function MapTypeSettings(props) {
   var mapType = props.mapType,
     onMapTypeChange = props.onMapTypeChange,
@@ -17,7 +17,8 @@ var MapTypeSettings = function MapTypeSettings(props) {
       isDefault: mapType === MAP_TYPE_DEFAULT,
       isFleetStyle: mapType === MAP_TYPE_FLEET_STYLE,
       isTerrain: mapType === MAP_TYPE_TERRAIN,
-      isSatellite: mapType === MAP_TYPE_SATELLITE
+      isSatellite: mapType === MAP_TYPE_SATELLITE,
+      isNight: mapType === MAP_TYPE_NIGHT
     };
   }, [mapType]);
   var getIcon = function getIcon(currentType) {
@@ -41,6 +42,11 @@ var MapTypeSettings = function MapTypeSettings(props) {
         name: MAP_TYPE_SATELITE_INACTIVE
       });
     }
+    if (currentType.isNight) {
+      return /*#__PURE__*/React.createElement(MapIcon, {
+        name: MAP_TYPE_NIGHT_INACTIVE
+      });
+    }
   };
   return /*#__PURE__*/React.createElement(MapSettingsTile, _extends({
     className: "MapTypeSettings",

package/components/map/components/mapUtils.js

@@ -88,8 +88,21 @@ export var createUtils = function createUtils(mapApi) {
         lng: center.lng
       };
     },
+    setCenter: function setCenter(position, animate) {
+      mapApi.getViewModel().setLookAtData({
+        position: position
+      }, animate);
+    },
     getZoom: function getZoom() {
-      return mapApi.getZoom();
+      var _mapApi$getViewModel$ = mapApi.getViewModel().getLookAtData(),
+        zoom = _mapApi$getViewModel$.zoom;
+      return Math.round(zoom);
+    },
+    setZoom: function setZoom(zoom) {
+      var zoomAnimation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      mapApi.getViewModel().setLookAtData({
+        zoom: zoom
+      }, zoomAnimation);
     },
     getViewPort: function getViewPort() {
       var viewPort = mapApi.getViewPort();
@@ -110,16 +123,33 @@ export var createUtils = function createUtils(mapApi) {
       };
     },
     getBounds: function getBounds() {
-      var _mapApi$getViewModel$ = mapApi.getViewModel().getLookAtData(),
-        bounds = _mapApi$getViewModel$.bounds;
+      var _mapApi$getViewModel$2 = mapApi.getViewModel().getLookAtData(),
+        bounds = _mapApi$getViewModel$2.bounds;
+
+      // TODO: remove old 3.0 version after all Services use the latest Map
+      if (bounds.getTopLeft) {
+        return {
+          topLeft: {
+            lng: bounds.getTopLeft().lng,
+            lat: bounds.getTopLeft().lat
+          },
+          bottomRight: {
+            lng: bounds.getBottomRight().lng,
+            lat: bounds.getBottomRight().lat
+          }
+        };
+      }
+
+      // HERE Maps API for JavaScript 3.1
+      var boundingBox = bounds.getBoundingBox();
       return {
         topLeft: {
-          lng: bounds.getTopLeft().lng,
-          lat: bounds.getTopLeft().lat
+          lng: boundingBox.getTopLeft().lng,
+          lat: boundingBox.getTopLeft().lat
         },
         bottomRight: {
-          lng: bounds.getBottomRight().lng,
-          lat: bounds.getBottomRight().lat
+          lng: boundingBox.getBottomRight().lng,
+          lat: boundingBox.getBottomRight().lat
         }
       };
     },