@m4l/components 7.1.2 → 7.2.0

package/src/components/maps/components/Map/featureRenders/CommonFeatureRender/subcomponents/MarkerIconLabel/types.ts

@@ -0,0 +1,16 @@
+import { MarkerProps } from 'react-leaflet';
+import { DivIconFeatureDescriptionProps } from '../FeatureDivIconLabel/types';
+import { MapPopupComponent } from '../../../../popups/types';
+import { GeoJsonProperties } from '../../../../contexts/MapContext/types';
+import { PopupOptions } from 'leaflet';
+
+export interface FeatureDescriptionProps
+  extends DivIconFeatureDescriptionProps,
+    Omit<MarkerProps, 'children'> {
+  withPoint?: boolean;
+  popupRender?: MapPopupComponent | undefined;
+  properties?: GeoJsonProperties;
+  popupOptions?: Omit<PopupOptions, 'content'>;
+
+  [name: string]: any;
+}

package/src/components/maps/components/Map/featureRenders/MarkerFeatureRender/IconMarker.tsx

@@ -0,0 +1,30 @@
+//react
+import { GruaIconMarker } from './IconMarkerGrua';
+import { IconMarkerTaxi } from './IconMarkerTaxi';
+
+export type IconForm = 'grua' | 'taxi';
+export interface IconMarkerProps {
+  iconForm: string;
+  bearing: number;
+}
+/**
+ * TODO: Documentar
+ */
+export function IconMarker(props: IconMarkerProps) {
+  const { iconForm, bearing } = props;
+
+  let iconMarker;
+  if (iconForm === 'grua') {
+    iconMarker = <GruaIconMarker />;
+  } else if (iconForm === 'taxi') {
+    iconMarker = <IconMarkerTaxi />;
+  } else {
+    iconMarker = <div>no icon</div>;
+  }
+  const adjustedBearing = (bearing + 90) % 360;
+  return (
+    <div style={{ transform: `rotate(${adjustedBearing}deg); transform-origin: center center` }}>
+      {iconMarker}
+    </div>
+  );
+}

package/src/components/maps/components/Map/featureRenders/MarkerFeatureRender/IconMarkerGrua.tsx

@@ -0,0 +1,14 @@
+//react
+
+/**
+ * TODO: Documentar
+ */
+export function GruaIconMarker() {
+  return (
+    <img
+      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPCEtLSBDcmVhdG9yOiBDb3JlbERSQVcgWDggLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMzMuODk4Mm1tIiBoZWlnaHQ9IjEyLjdtbSIgdmVyc2lvbj0iMS4xIiBzdHlsZT0ic2hhcGUtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgdGV4dC1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uOyBpbWFnZS1yZW5kZXJpbmc6b3B0aW1pemVRdWFsaXR5OyBmaWxsLXJ1bGU6ZXZlbm9kZDsgY2xpcC1ydWxlOmV2ZW5vZGQiCnZpZXdCb3g9IjAgMCAyNTAgOTMiCiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiA8ZGVmcz4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgogICA8IVtDREFUQVsKICAgIC5maWwzIHtmaWxsOmJsYWNrfQogICAgLmZpbDQge2ZpbGw6IzFFOTZEQ30KICAgIC5maWwxIHtmaWxsOiMzMzMzMzN9CiAgICAuZmlsNSB7ZmlsbDp3aGl0ZX0KICAgIC5maWw4IHtmaWxsOnVybCgjaWQxOCl9CiAgICAuZmlsNyB7ZmlsbDp1cmwoI2lkMTkpfQogICAgLmZpbDAge2ZpbGw6dXJsKCNpZDIwKX0KICAgIC5maWwyIHtmaWxsOnVybCgjaWQyMSl9CiAgICAuZmlsNiB7ZmlsbDp1cmwoI2lkMjIpfQogICBdXT4KICA8L3N0eWxlPgogICAgIDxtYXNrIGlkPSJpZDAiPgogIDxsaW5lYXJHcmFkaWVudCBpZD0iaWQxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjcuMTYwMzQiIHkxPSI0NS4yNTYzIiB4Mj0iMTYuMDE0MiIgeTI9IjQ1LjI1NDUiPgogICA8c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLW9wYWNpdHk6MDsgc3RvcC1jb2xvcjp3aGl0ZSIvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLW9wYWNpdHk6MTsgc3RvcC1jb2xvcjp3aGl0ZSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgIDxyZWN0IHN0eWxlPSJmaWxsOnVybCgjaWQxKSIgeD0iOCIgeT0iMjgiIHdpZHRoPSI0LjI2NjMyIiBoZWlnaHQ9IjMxLjk4MTIiLz4KICAgICA8L21hc2s+CiAgICA8bWFzayBpZD0iaWQyIj4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImlkMyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxOTguNjYyIiB5MT0iNTYuMTg2OCIgeDI9IjIxNC4wNzIiIHkyPSIxMjEuMzg0Ij4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjA7IHN0b3AtY29sb3I6d2hpdGUiLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjE7IHN0b3AtY29sb3I6d2hpdGUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogICAgIDxyZWN0IHN0eWxlPSJmaWxsOnVybCgjaWQzKSIgeD0iMTcwIiB5PSI3NyIgd2lkdGg9Ijc1LjkyODEiIGhlaWdodD0iOS42MjU3MiIvPgogICAgPC9tYXNrPgogICAgPG1hc2sgaWQ9ImlkNCI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTkwLjM2NyIgeTE9Ii0xNC42NDEiIHgyPSIyNDEuNjM2IiB5Mj0iMTIxLjA4OCI+CiAgIDxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3Atb3BhY2l0eTowOyBzdG9wLWNvbG9yOndoaXRlIi8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3Atb3BhY2l0eToxOyBzdG9wLWNvbG9yOndoaXRlIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICAgICA8cmVjdCBzdHlsZT0iZmlsbDp1cmwoI2lkNSkiIHg9IjE0NyIgeT0iNyIgd2lkdGg9IjEwMi44MjQiIGhlaWdodD0iNDEuMTgwNyIvPgogICAgPC9tYXNrPgogICAgPG1hc2sgaWQ9ImlkNiI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTE3LjYzMyIgeTE9IjM5LjUxNTciIHgyPSIxODEuNDk2IiB5Mj0iNzkuODE5MiI+CiAgIDxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3Atb3BhY2l0eTowOyBzdG9wLWNvbG9yOndoaXRlIi8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3Atb3BhY2l0eToxOyBzdG9wLWNvbG9yOndoaXRlIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICAgICA8cmVjdCBzdHlsZT0iZmlsbDp1cmwoI2lkNykiIHg9IjEyOSIgeT0iNTYiIHdpZHRoPSIzNy4zMzQiIGhlaWdodD0iMzIuMzMwMSIvPgogICAgPC9tYXNrPgogICAgPG1hc2sgaWQ9ImlkOCI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTU2LjAxIiB5MT0iNzMuNTk1NyIgeDI9IjE4MC40NTkiIHkyPSI3MS41MjEzIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjA7IHN0b3AtY29sb3I6d2hpdGUiLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjE7IHN0b3AtY29sb3I6d2hpdGUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogICAgIDxyZWN0IHN0eWxlPSJmaWxsOnVybCgjaWQ5KSIgeD0iMTY1IiB5PSI1NiIgd2lkdGg9IjYuMjg5MDciIGhlaWdodD0iMzIuMzMwMSIvPgogICAgPC9tYXNrPgogICAgPG1hc2sgaWQ9ImlkMTAiPgogIDxsaW5lYXJHcmFkaWVudCBpZD0iaWQxMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzQuMzgxIiB5MT0iNDQuMjIyNyIgeDI9IjE4Ny44NyIgeTI9IjQ0LjIyMDkiPgogICA8c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLW9wYWNpdHk6MDsgc3RvcC1jb2xvcjp3aGl0ZSIvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLW9wYWNpdHk6MTsgc3RvcC1jb2xvcjp3aGl0ZSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgPHJlY3Qgc3R5bGU9ImZpbGw6dXJsKCNpZDExKSIgeD0iMTM0IiB5PSIzMSIgd2lkdGg9IjM3LjQxMTMiIGhlaWdodD0iMjcuMzI4NCIvPgogICAgPC9tYXNrPgogICAgPG1hc2sgaWQ9ImlkMTIiPgogIDxsaW5lYXJHcmFkaWVudCBpZD0iaWQxMyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI4NS40ODIzIiB5MT0iNDQuMjIwNSIgeDI9IjE2NS45NDEiIHkyPSI0NC4yMTg3Ij4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjA7IHN0b3AtY29sb3I6d2hpdGUiLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjE7IHN0b3AtY29sb3I6d2hpdGUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogICAgIDxyZWN0IHN0eWxlPSJmaWxsOnVybCgjaWQxMykiIHg9IjkxIiB5PSIzNiIgd2lkdGg9IjQ0LjQ0MyIgaGVpZ2h0PSIxNy4zMjczIi8+CiAgICA8L21hc2s+CiAgICA8bWFzayBpZD0iaWQxNCI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDE1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMwLjI2MjMiIHkxPSI0My44MTUiIHgyPSI5NC42NjkxIiB5Mj0iNDQuMjU5Ij4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjA7IHN0b3AtY29sb3I6d2hpdGUiLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjE7IHN0b3AtY29sb3I6d2hpdGUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogICAgIDxyZWN0IHN0eWxlPSJmaWxsOnVybCgjaWQxNSkiIHg9IjM1IiB5PSIzNiIgd2lkdGg9IjM0LjUxNDgiIGhlaWdodD0iMTcuMzI3MyIvPgogICAgPC9tYXNrPgogICAgPG1hc2sgaWQ9ImlkMTYiPgogIDxsaW5lYXJHcmFkaWVudCBpZD0iaWQxNyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxNDcuMDkzIiB5MT0iNTAuNjA5OCIgeDI9IjE2Ni4wNTkiIHkyPSIxMDcuNDE4Ij4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjA7IHN0b3AtY29sb3I6d2hpdGUiLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjE7IHN0b3AtY29sb3I6d2hpdGUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogICAgIDxyZWN0IHN0eWxlPSJmaWxsOnVybCgjaWQxNykiIHg9IjEzNCIgeT0iNjEiIHdpZHRoPSIzMi4zNjkxIiBoZWlnaHQ9IjE1LjgwODEiLz4KICAgIDwvbWFzaz4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImlkMTgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMzAuNTc2IiB5MT0iNDUuMjc0OCIgeDI9IjI5Ljk0OTYiIHkyPSI0Mi4zNTQ4Ij4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjE7IHN0b3AtY29sb3I6IzY2NjY2NiIvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLW9wYWNpdHk6MTsgc3RvcC1jb2xvcjojOTk5OTk5Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImlkMTkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4bGluazpocmVmPSIjaWQxOCIgeDE9Ijk3LjQ3MDIiIHkxPSI0Ni4wODY3IiB4Mj0iOTYuODg0MyIgeTI9IjQxLjk4NDUiPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeGxpbms6aHJlZj0iI2lkMTgiIHgxPSIxNzYuMjY5IiB5MT0iOTEuODc5IiB4Mj0iMTc1LjA3NSIgeTI9IjcwLjUzMzQiPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeGxpbms6aHJlZj0iI2lkMTgiIHgxPSIxNzYuMjY5IiB5MT0iMjIuOTQ4IiB4Mj0iMTc1LjA3NSIgeTI9IjEuNjAyNDUiPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDIyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeGxpbms6aHJlZj0iI2lkMTgiIHgxPSIyMjYuNDciIHkxPSI2NC4zOTQ1IiB4Mj0iMjIxLjExOSIgeTI9IjUxLjgzMTEiPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8ZyBpZD0ic2xveV94MDAyMF8xIj4KICA8bWV0YWRhdGEgaWQ9IkNvcmVsQ29ycElEXzBDb3JlbC1MYXllciIvPgogIDxnIGlkPSJfMjM0ODc3MDk4NTc5MiI+CiAgIDxnPgogICAgPHJlY3QgY2xhc3M9ImZpbDAiIHg9IjExMCIgeT0iNzEiIHdpZHRoPSIxMzEuODAyIiBoZWlnaHQ9IjE5LjcwODUiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjIzMiIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjIyMyIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjIxNCIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjIwNSIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE5NSIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE4NiIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE3NyIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE2OCIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE1OSIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE0OSIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE0MCIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjEzMSIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjEyMiIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjExMyIgeT0iNjkiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICA8L2c+CiAgIDxnPgogICAgPHJlY3QgY2xhc3M9ImZpbDIiIHg9IjExMCIgeT0iMiIgd2lkdGg9IjEzMS44MDIiIGhlaWdodD0iMTkuNzA4NSIgcng9IjIiIHJ5PSIyIi8+CiAgICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iMjMyIiB3aWR0aD0iNi4zMzE1OCIgaGVpZ2h0PSIyNC41NTEzIiByeD0iMiIgcnk9IjIiLz4KICAgIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSIyMjMiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjIxNCIgd2lkdGg9IjYuMzMxNTgiIGhlaWdodD0iMjQuNTUxMyIgcng9IjIiIHJ5PSIyIi8+CiAgICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iMjA1IiB3aWR0aD0iNi4zMzE1OCIgaGVpZ2h0PSIyNC41NTEzIiByeD0iMiIgcnk9IjIiLz4KICAgIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSIxOTUiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE4NiIgd2lkdGg9IjYuMzMxNTgiIGhlaWdodD0iMjQuNTUxMyIgcng9IjIiIHJ5PSIyIi8+CiAgICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iMTc3IiB3aWR0aD0iNi4zMzE1OCIgaGVpZ2h0PSIyNC41NTEzIiByeD0iMiIgcnk9IjIiLz4KICAgIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSIxNjgiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE1OSIgd2lkdGg9IjYuMzMxNTgiIGhlaWdodD0iMjQuNTUxMyIgcng9IjIiIHJ5PSIyIi8+CiAgICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iMTQ5IiB3aWR0aD0iNi4zMzE1OCIgaGVpZ2h0PSIyNC41NTEzIiByeD0iMiIgcnk9IjIiLz4KICAgIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSIxNDAiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjEzMSIgd2lkdGg9IjYuMzMxNTgiIGhlaWdodD0iMjQuNTUxMyIgcng9IjIiIHJ5PSIyIi8+CiAgICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iMTIyIiB3aWR0aD0iNi4zMzE1OCIgaGVpZ2h0PSIyNC41NTEzIiByeD0iMiIgcnk9IjIiLz4KICAgIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSIxMTMiIHdpZHRoPSI2LjMzMTU4IiBoZWlnaHQ9IjI0LjU1MTMiIHJ4PSIyIiByeT0iMiIvPgogICA8L2c+CiAgIDxnPgogICAgPHBvbHlnb24gY2xhc3M9ImZpbDEiIHBvaW50cz0iOSwzMSAwLDMyIDAsNTYgOSw1NyA5LDU5IDIzLDYxIDIzLDI4IDksMjkgIi8+CiAgICA8cG9seWdvbiBjbGFzcz0iZmlsMyIgc3R5bGU9Im1hc2s6dXJsKCNpZDApIiBwb2ludHM9IjksNTcgOSw1OSAxMiw1OSAxMiwyOSA5LDI5IDksMzEgIi8+CiAgIDwvZz4KICAgPHBhdGggY2xhc3M9ImZpbDQiIGQ9Ik0xNTAgOGw5MyAwYzEsMCAyLDEgMiwybDAgOSAxIDBjMiwwIDQsMiA0LDNsMCA0OWMwLDIgLTIsMyAtNCwzbC0xIDAgMCAxMGMwLDEgLTEsMSAtMiwxbC03NiAwIDAgMWMwLDEgLTEsMiAtMSwybC0zMyAwYy0yLDAgLTMsLTEgLTMsLTNsMCAtMjVjMCwtMSAwLC0yIDEsLTJsMTcgMCAwIC00IC0xNCAwIDAgLTIgLTQzIDAgMCAyIC0yMiAwIDAgLTIgLTMzIDAgMCAyIC0xNyAtMiAwIC0xNiAxNyAtMiAwIDIgMzMgMCAwIC0yIDIyIDAgMCAyIDQzIDAgMCAtMiAxNCAwIDAgLTI0YzAsLTEgMSwtMiAyLC0yeiIvPgogICA8cGF0aCBjbGFzcz0iZmlsMyIgc3R5bGU9Im1hc2s6dXJsKCNpZDIpIiBkPSJNMjQ1IDc3bDAgN2MwLDEgLTEsMSAtMiwxbC03MyAwYzAsLTMgMCwtNSAwLC01IDQ1LDAgNjgsMCA2OCwwIDMsMCA2LC0xIDcsLTN6Ii8+CiAgIDxwYXRoIGNsYXNzPSJmaWw1IiBzdHlsZT0ibWFzazp1cmwoI2lkNCkiIGQ9Ik0xNTAgOGw5MyAwYzEsMCAyLDEgMiwybDAgOSAxIDBjMiwwIDQsMiA0LDNsMCAxMWMtMywwIC02LDAgLTgsMCAtMSw0IC0yLDggLTUsMTQgLTgsMSAtMTYsMSAtMjUsMCAwLDAgLTUsMCAtMTQsMCAwLDAgLTQsLTIgLTEyLC03IC00LC0yIC05LC01IC0xNiwtOSAtNywwIC0xNCwwIC0yMiwwbDAgLTIxYzAsLTEgMSwtMiAyLC0yeiIvPgogICA8cGF0aCBjbGFzcz0iZmlsMyIgc3R5bGU9Im1hc2s6dXJsKCNpZDYpIiBkPSJNMTM1IDg4bC0yIDBjLTIsMCAtMywtMSAtMywtM2wwIC0yNWMwLC0xIDAsLTIgMSwtMmwxNyAwIDAgLTEgMTggMCAwIDQgLTMxIDAgMCAyN3oiLz4KICAgPHBhdGggY2xhc3M9ImZpbDMiIHN0eWxlPSJtYXNrOnVybCgjaWQ4KSIgZD0iTTE3MCA4NWwtMyAwIDAgMWMwLDEgLTEsMiAtMSwybDAgMCAwIC0zMSA0IDAgMCAyOHoiLz4KICAgPHBvbHlnb24gY2xhc3M9ImZpbDMiIHN0eWxlPSJtYXNrOnVybCgjaWQxMCkiIHBvaW50cz0iMTQ4LDU3IDE0OCw1NCAxMzQsNTQgMTM0LDUyIDEzNCwzNiAxMzQsMzQgMTQ4LDM0IDE0OCwzMSAxNzAsMzEgMTcwLDU3ICIvPgogICA8Y2lyY2xlIGNsYXNzPSJmaWwxIiBjeD0iMjI0IiBjeT0iNTgiIHI9IjMiLz4KICAgPHBhdGggY2xhc3M9ImZpbDYiIGQ9Ik0yMjQgNTFjNCwwIDcsMyA3LDcgMCw0IC0zLDcgLTcsNyAtNCwwIC03LC0zIC03LC03IDAsLTQgMywtNyA3LC03em0wIDJjMywwIDUsMiA1LDUgMCwzIC0yLDUgLTUsNSAtMywwIC01LC0yIC01LC01IDAsLTMgMiwtNSA1LC01eiIvPgogICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iMjM3IiB5PSIyOSIgd2lkdGg9IjQuNDQ1MzEiIGhlaWdodD0iMzQuMDgwOSIgcng9IjEiIHJ5PSIyIi8+CiAgIDxyZWN0IGNsYXNzPSJmaWwxIiB0cmFuc2Zvcm09Im1hdHJpeCg2Ljk1ODM0RS0xNSAwLjIwMTQwNSAtMC44MTg2ODQgMS42NjIxM0UtMTQgMjA3LjU2NiA2OS4zNzU3KSIgd2lkdGg9IjE2LjkxOTUiIGhlaWdodD0iNDEuNjI5IiByeD0iMyIgcnk9IjMiLz4KICAgPHJlY3QgY2xhc3M9ImZpbDEiIHRyYW5zZm9ybT0ibWF0cml4KDYuOTU4MzRFLTE1IDAuMjAxNDA1IC0wLjgxODY4NCAxLjY2MjEzRS0xNCAyMDcuNTY2IDIwLjMyOTYpIiB3aWR0aD0iMTYuOTE5NSIgaGVpZ2h0PSI0MS42MjkiIHJ4PSIzIiByeT0iMyIvPgogICA8cG9seWdvbiBjbGFzcz0iZmlsMSIgcG9pbnRzPSIxMzQsNjIgMTM0LDg2IDEzMSw4NCAxMzEsNjAgIi8+CiAgIDxwb2x5Z29uIGNsYXNzPSJmaWwxIiBwb2ludHM9IjE2NSw1OSAxMzQsNTkgMTM2LDYxIDE2NSw2MSAiLz4KICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjM2IiB5PSI0MiIgd2lkdGg9IjMyLjc5MDUiIGhlaWdodD0iMi43NDE0NiIvPgogICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iOTEiIHk9IjQxIiB3aWR0aD0iNDIuOTQxIiBoZWlnaHQ9IjEuNTU1OCIvPgogICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iOTEiIHk9IjQ2IiB3aWR0aD0iNDIuOTQxIiBoZWlnaHQ9IjEuNTU1OCIvPgogICA8cmVjdCBjbGFzcz0iZmlsNyIgeD0iOTEiIHk9IjQyIiB3aWR0aD0iMTEuNDc1NyIgaGVpZ2h0PSIzLjg1MjEyIi8+CiAgIDxwb2x5Z29uIGNsYXNzPSJmaWwxIiBwb2ludHM9IjY5LDQxIDkxLDM5IDkxLDQxIDY5LDQyICIvPgogICA8cG9seWdvbiBjbGFzcz0iZmlsMSIgcG9pbnRzPSI2OSw0NyA5MSw0OCA5MSw0NyA2OSw0NSAiLz4KICAgPHJlY3QgY2xhc3M9ImZpbDgiIHg9IjI0IiB5PSI0MiIgd2lkdGg9IjEyLjI2MTEiIGhlaWdodD0iMi43NDE0NiIvPgogICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iMjEiIHk9IjQxIiB3aWR0aD0iMi45NjM2OSIgaGVpZ2h0PSI1LjkyNzM3Ii8+CiAgIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSIxNDMiIHk9IjM4IiB3aWR0aD0iMjYuNzQ1OCIgaGVpZ2h0PSIxLjU1NTgiLz4KICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjE0MyIgeT0iNDkiIHdpZHRoPSIyNi43NDU4IiBoZWlnaHQ9IjEuNTU1OCIvPgogICA8cmVjdCBjbGFzcz0iZmlsMSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNzYxOEUtMTQgMC4yMzQyNDkgLTAuMzQ1NDIgNC40NDczM0UtMTUgMTQ1LjAwNCAzNy42MDc2KSIgd2lkdGg9IjU1LjUwNTYiIGhlaWdodD0iNC41MDQwNyIvPgogICA8cmVjdCBjbGFzcz0iZmlsMSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNzYxOEUtMTQgMC4yMzQyNDkgLTAuMzQ1NDIgNC40NDczM0UtMTUgMTUyLjU2IDM3LjYwNzYpIiB3aWR0aD0iNTUuNTA1NiIgaGVpZ2h0PSI0LjUwNDA3Ii8+CiAgIDxyZWN0IGNsYXNzPSJmaWwxIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjI3NjE4RS0xNCAwLjIzNDI0OSAtMC4zNDU0MiA0LjQ0NzMzRS0xNSAxNjQuNDUxIDM3LjYwNzYpIiB3aWR0aD0iNTUuNTA1NiIgaGVpZ2h0PSI0LjUwNDA3Ii8+CiAgIDxyZWN0IGNsYXNzPSJmaWwxIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjI3NjE4RS0xNCAwLjEyMTEzNiAtMC4zNDU0MiAyLjI5OTgzRS0xNSAxMzkuMTEzIDQwLjYyNzEpIiB3aWR0aD0iNTUuNTA1NiIgaGVpZ2h0PSI0LjUwNDA3Ii8+CiAgIDxyZWN0IGNsYXNzPSJmaWwxIiB4PSIxMzgiIHk9IjQxIiB3aWR0aD0iNy40NDY2MyIgaGVpZ2h0PSIxLjU1NTgiLz4KICAgPHJlY3QgY2xhc3M9ImZpbDEiIHg9IjEzOCIgeT0iNDYiIHdpZHRoPSI3LjQ0NjYzIiBoZWlnaHQ9IjEuNTU1OCIvPgogICA8cmVjdCBjbGFzcz0iZmlsMSIgeD0iMTM0IiB5PSI0MyIgd2lkdGg9IjQuNzMyNDkiIGhlaWdodD0iMS41NTU4Ii8+CiAgIDxyZWN0IGNsYXNzPSJmaWwxIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMwODYzRS0xNSAwLjEzMTE4MSAtMC4xNTM5NjcgMS4wODI1OUUtMTQgMTY0LjQ4NSA1Mi40ODM0KSIgd2lkdGg9IjE2LjkxOTUiIGhlaWdodD0iNDEuNjI5IiByeD0iMyIgcnk9IjMiLz4KICAgPHJlY3QgY2xhc3M9ImZpbDEiIHRyYW5zZm9ybT0ibWF0cml4KDEuMzA4NjNFLTE1IDAuMTMxMTgxIC0wLjE1Mzk2NyAxLjA4MjU5RS0xNCAxNjQuNDg1IDMzLjE4MjkpIiB3aWR0aD0iMTYuOTE5NSIgaGVpZ2h0PSI0MS42MjkiIHJ4PSIzIiByeT0iMyIvPgogICA8cG9seWdvbiBjbGFzcz0iZmlsMyIgc3R5bGU9Im1hc2s6dXJsKCNpZDEyKSIgcG9pbnRzPSI5MSwzNiAxMzQsMzYgMTM0LDUyIDkxLDUyICIvPgogICA8cG9seWdvbiBjbGFzcz0iZmlsMyIgc3R5bGU9Im1hc2s6dXJsKCNpZDE0KSIgcG9pbnRzPSI2OSwzNiAzNiwzNiAzNiw1MiA2OSw1MiAiLz4KICAgPHBhdGggY2xhc3M9ImZpbDUiIHN0eWxlPSJtYXNrOnVybCgjaWQxNikiIGQ9Ik0xMzUgNjFsMzEgMCAwIDEwYy0xMCwyIC0yMSw0IC0zMSw1bDAgLTE1eiIvPgogIDwvZz4KIDwvZz4KPC9zdmc+Cg=="
+      alt=""
+      style={{ height: '32px', width: '32px' }}
+    />
+  );
+}

package/src/components/maps/components/Map/featureRenders/MarkerFeatureRender/IconMarkerTaxi.tsx

@@ -0,0 +1,14 @@
+//react
+
+/**
+ * TODO: Documentar
+ */
+export function IconMarkerTaxi() {
+  return (
+    <img
+      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8IS0tIENyZWF0b3I6IENvcmVsRFJBVyBYOCAtLT4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWw6c3BhY2U9InByZXNlcnZlIiBoZWlnaHQ9IjI5IiB3aWR0aD0iNjIiIHZlcnNpb249IjEuMSIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIg0Kdmlld0JveD0iMCAwIDg2IDM5Ig0KIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiA8ZGVmcz4NCiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCiAgIDwhW0NEQVRBWw0KICAgIC5jYXItZmlsMSB7ZmlsbDojMzMzMzMzfQ0KICAgIC5jYXItZmlsMiB7ZmlsbDojRjQ0MzM2fQ0KICAgIC5jYXItZmlsMyB7ZmlsbDojRkZFQjNCfQ0KICAgIC5jYXItZmlsNiB7ZmlsbDpibGFjaztmaWxsLXJ1bGU6bm9uemVyb30NCiAgICAuY2FyLWZpbDAge2ZpbGw6I0ZGRUIzQjtmaWxsLXJ1bGU6bm9uemVyb30NCiAgICAuY2FyLWZpbDUge2ZpbGw6IzMzMzMzMztmaWxsLXJ1bGU6bm9uemVyb30NCiAgICAuY2FyLWZpbDQge2ZpbGw6d2hpdGU7ZmlsbC1ydWxlOm5vbnplcm99DQogICBdXT4NCiAgPC9zdHlsZT4NCiAgICA8bWFzayBpZD0iaWQwIj4NCiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDkuMTg0MiIgeTE9IjE0LjU2MTkiIHgyPSI0OS4xODU4IiB5Mj0iLTMuNjU0MjgiPg0KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjA7IHN0b3AtY29sb3I6d2hpdGUiLz4NCiAgIDxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3Atb3BhY2l0eToxOyBzdG9wLWNvbG9yOndoaXRlIi8+DQogIDwvbGluZWFyR3JhZGllbnQ+DQogICAgIDxyZWN0IHN0eWxlPSJmaWxsOnVybCgjaWQxKSIgd2lkdGg9Ijg2Ljc4NjQiIGhlaWdodD0iNDAuMDI4NyIvPg0KICAgIDwvbWFzaz4NCiAgICA8bWFzayBpZD0iaWQyIj4NCiAgPGxpbmVhckdyYWRpZW50IGlkPSJpZDMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTEuMTA0MyIgeTE9IjM3LjA0MDkiIHgyPSI1MS4xMDU5IiB5Mj0iMjAuNTIzNiI+DQogICA8c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLW9wYWNpdHk6MDsgc3RvcC1jb2xvcjp3aGl0ZSIvPg0KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjE7IHN0b3AtY29sb3I6d2hpdGUiLz4NCiAgPC9saW5lYXJHcmFkaWVudD4NCiAgICAgPHJlY3Qgc3R5bGU9ImZpbGw6dXJsKCNpZDMpIiB4PSIxIiB5PSIyOSIgd2lkdGg9IjgzLjk4MzciIGhlaWdodD0iMTEuMTA3Ii8+DQogICAgPC9tYXNrPg0KICAgIDxtYXNrIGlkPSJpZDQiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImlkNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI0OS4zNTYyIiB5MT0iMi4yMTIwMyIgeDI9IjQ5LjM1NjIiIHkyPSIxOS45OTQ5Ij4NCiAgIDxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3Atb3BhY2l0eTowOyBzdG9wLWNvbG9yOndoaXRlIi8+DQogICA8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLW9wYWNpdHk6MTsgc3RvcC1jb2xvcjp3aGl0ZSIvPg0KICA8L2xpbmVhckdyYWRpZW50Pg0KICAgICA8cmVjdCBzdHlsZT0iZmlsbDp1cmwoI2lkNSkiIHdpZHRoPSI4NS43NjEyIiBoZWlnaHQ9IjE2LjQ0MjciLz4NCiAgICA8L21hc2s+DQogICAgPG1hc2sgaWQ9ImlkNiI+DQogIDxsaW5lYXJHcmFkaWVudCBpZD0iaWQ3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjQ5LjE4NDIiIHkxPSIyNC42NzI0IiB4Mj0iNDkuMTg1OCIgeTI9IjQ5LjA3MjYiPg0KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1vcGFjaXR5OjA7IHN0b3AtY29sb3I6d2hpdGUiLz4NCiAgIDxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3Atb3BhY2l0eToxOyBzdG9wLWNvbG9yOndoaXRlIi8+DQogIDwvbGluZWFyR3JhZGllbnQ+DQogICAgIDxyZWN0IHN0eWxlPSJmaWxsOnVybCgjaWQ3KSIgd2lkdGg9Ijg2Ljc4NjQiIGhlaWdodD0iNDAuMDI4NyIvPg0KICAgIDwvbWFzaz4NCiA8L2RlZnM+DQogPGc+DQogIDxnPg0KICAgPHBhdGggY2xhc3M9ImNhci1maWwwIiBkPSJNODQgMzFjLTEsMiAtMyw1IC01LDUgMCwtNCAzLC01IDUsLTYgMCwxIDAsMSAwLDF6bS0zMiAtMjVsMCAyIDE0IDAgNiAtMiAtMjAgMHptMCAyNWwwIDIgMjAgMCAtNiAtMiAtMTQgMHptLTIgMmwwIC0yIC0xMyAwIC0xMSAyIDI0IDB6bTAgLTI1bDAgLTIgLTI0IDAgMTEgMiAxMyAwem0yNCAtMWwtNiAyYzEsMSAxLDIgMSwzIDAsMCAxLDMgMSw4IDAsNSAtMSw3IC0xLDcgMCwxIDAsMiAtMSwzbDYgM2MxLC0xIDEsLTUgMSwtNiAwLDAgMSwtMiAxLC03IDAsLTUgLTEsLTggLTEsLTggMCwtMiAwLC01IC0xLC01em0tNDAgMjJsLTEwIDNjLTEsLTEgLTIsLTQgLTIsLTUgMCwwIC0xLC0yIC0xLC03IDAsLTUgMSwtOCAxLC04IDAsLTEgMSwtNCAyLC01bDEwIDJjMCwxIC0xLDIgLTEsMyAwLDAgLTEsMyAtMSw4IDAsNSAxLDcgMSw3IDAsMSAxLDIgMSwyem0tMzEgLTRjMTIsNiAyMCw4IDIwLDggLTEwLC0xIC0yMCwtOCAtMjAsLTh6bS0xIDZjMCwwIC0xLC0yIC0xLC01IDIsMiA2LDUgOCwxMCAtMywwIC02LC0yIC03LC01em0yMSAtMjVjMCwwIC04LDIgLTIwLDggMCwwIDEwLC03IDIwLC04em0tMjEgMmMxLC0zIDQsLTUgNiwtNSAtMSw1IC01LDggLTcsMTAgMSwtMyAxLC01IDEsLTV6bTgyIDBjMCwwIDAsMSAwLDEgLTIsLTEgLTUsLTIgLTUsLTYgMiwwIDQsMiA1LDV6bTEgMGMtMiwtNCAtMywtNiAtNiwtNmwtNTAgMCAxIC0yYzAsMCAtMSwxIC0yLDJsLTIwIDBjLTIsMCAtNSwyIC03LDYgMCwwIC0xLDQgLTEsMTIgMCw4IDEsMTIgMSwxMiAxLDMgNSw1IDcsNWwyMCAwYzEsMSAyLDIgMiwybC0xIC0yIDUwIDBjMywwIDUsLTMgNiwtNSAwLDAgMSwtNCAxLC0xMiAwLC04IC0xLC0xMiAtMSwtMTJ6Ii8+DQogICA8Zz4NCiAgICA8cGF0aCBjbGFzcz0iY2FyLWZpbDEiIGQ9Ik0zIDE0YzEyLC02IDIwLC04IDIwLC04IC0xMCwxIC0yMCw4IC0yMCw4eiIvPg0KICAgIDxwYXRoIGNsYXNzPSJjYXItZmlsMSIgZD0iTTIzIDMzYzAsMCAtOCwtMiAtMjAsLTggMCwwIDEwLDcgMjAsOHoiLz4NCiAgICA8cG9seWdvbiBjbGFzcz0iY2FyLWZpbDEiIHBvaW50cz0iNTAsNiAyNiw2IDM3LDggNTAsOCAiLz4NCiAgICA8cG9seWdvbiBjbGFzcz0iY2FyLWZpbDEiIHBvaW50cz0iNTIsNiA1Miw4IDY2LDggNzIsNiAiLz4NCiAgICA8cG9seWdvbiBjbGFzcz0iY2FyLWZpbDEiIHBvaW50cz0iNTAsMzEgMzcsMzEgMjYsMzMgNTAsMzMgIi8+DQogICAgPHBvbHlnb24gY2xhc3M9ImNhci1maWwxIiBwb2ludHM9IjUyLDMxIDUyLDMzIDcyLDMzIDY2LDMxICIvPg0KICAgIDxwYXRoIGNsYXNzPSJjYXItZmlsMSIgZD0iTTMzIDI3YzAsMCAtMSwtMiAtMSwtNyAwLC01IDEsLTggMSwtOCAwLC0xIDEsLTIgMSwtM2wtMTAgLTJjLTEsMSAtMiw0IC0yLDUgMCwwIC0xLDMgLTEsOCAwLDUgMSw3IDEsNyAwLDEgMSw0IDIsNWwxMCAtM2MwLDAgLTEsLTEgLTEsLTJ6Ii8+DQogICAgPHBhdGggY2xhc3M9ImNhci1maWwxIiBkPSJNNzAgMjBjMCw1IC0xLDcgLTEsNyAwLDEgMCwyIC0xLDNsNiAzYzEsLTEgMSwtNSAxLC02IDAsMCAxLC0yIDEsLTcgMCwtNSAtMSwtOCAtMSwtOCAwLC0yIDAsLTUgLTEsLTVsLTYgMmMxLDEgMSwyIDEsMyAwLDAgMSwzIDEsOHoiLz4NCiAgIDwvZz4NCiAgIDxwYXRoIGNsYXNzPSJjYXItZmlsMiIgZD0iTTg0IDMwYy0yLDEgLTUsMiAtNSw2IDIsMCA0LC0zIDUsLTUgMCwwIDAsMCAwLC0xeiIvPg0KICAgPHBhdGggY2xhc3M9ImNhci1maWwyIiBkPSJNNzkgM2MwLDQgMyw1IDUsNiAwLDAgMCwtMSAwLC0xIC0xLC0zIC0zLC01IC01LC01eiIvPg0KICAgPHBhdGggY2xhc3M9ImNhci1maWwzIiBkPSJNMSAxM2MyLC0yIDYsLTUgNywtMTAgLTIsMCAtNSwyIC02LDUgMCwwIDAsMiAtMSw1eiIvPg0KICAgPHBhdGggY2xhc3M9ImNhci1maWwzIiBkPSJNOSAzNmMtMiwtNSAtNiwtOCAtOCwtMTAgMCwzIDEsNSAxLDUgMSwzIDQsNSA3LDV6Ii8+DQogICA8cGF0aCBjbGFzcz0iY2FyLWZpbDQiIHN0eWxlPSJtYXNrOnVybCgjaWQwKSIgZD0iTTg1IDhjLTIsLTQgLTMsLTYgLTYsLTZsLTUwIDAgMSAtMmMwLDAgLTEsMSAtMiwybC0yMCAwYy0yLDAgLTUsMiAtNyw2IDAsMCAtMSw0IC0xLDEyIDAsOCAxLDEyIDEsMTIgMSwzIDUsNSA3LDVsMjAgMGMxLDEgMiwyIDIsMmwtMSAtMiA1MCAwYzMsMCA1LC0zIDYsLTUgMCwwIDEsLTQgMSwtMTIgMCwtOCAtMSwtMTIgLTEsLTEyeiIvPg0KICAgPHBhdGggY2xhc3M9ImNhci1maWw1IiBzdHlsZT0ibWFzazp1cmwoI2lkMikiIGQ9Ik0xIDMyYzEsMyA1LDUgNyw1bDIwIDBjMSwxIDIsMiAyLDJsLTEgLTIgNTAgMGMzLDAgNSwtMyA2LC01IC0xLDEgLTUsMiAtMTEsMSAwLDAgLTIsLTEgLTYsLTMgLTExLC0xIC0yMiwtMSAtMzQsLTEgMCwwIC0zLDEgLTEwLDMgLTMsMCAtOCwxIC0xNSw0IC0yLDAgLTUsLTEgLTgsLTR6Ii8+DQogICA8cGF0aCBjbGFzcz0iY2FyLWZpbDQiIHN0eWxlPSJtYXNrOnVybCgjaWQ0KSIgZD0iTTg1IDhjLTIsLTQgLTMsLTYgLTYsLTZsLTUwIDAgMSAtMmMwLDAgLTEsMSAtMiwybC0yMCAwYy0yLDAgLTUsMiAtNyw2IDAsMCAtMSwyIC0xLDggOCwtNiAxNSwtOSAyMywtMTAgLTEsMyAtMiw2IC0yLDkgNCwtMiA4LC00IDEyLC00IDEyLC0yIDI0LC0yIDM2LDAgMywwIDUsMSA3LDIgNSwtNCA4LC01IDksLTMgMCwtMiAwLC0yIDAsLTJ6Ii8+DQogICA8cGF0aCBjbGFzcz0iY2FyLWZpbDYiIHN0eWxlPSJtYXNrOnVybCgjaWQ2KSIgZD0iTTg1IDMyYy0yLDMgLTMsNSAtNiw1bC01MCAwIDEgMmMwLDAgLTEsLTEgLTIsLTJsLTIwIDBjLTIsMCAtNSwtMiAtNywtNSAwLDAgLTEsLTUgLTEsLTEzIDAsLTcgMSwtMTEgMSwtMTEgMSwtMyA1LC02IDcsLTZsMjAgMGMxLC0xIDIsLTIgMiwtMmwtMSAyIDUwIDBjMywwIDUsMyA2LDYgMCwwIDEsNCAxLDExIDAsOCAtMSwxMyAtMSwxM3oiLz4NCiAgPC9nPg0KIDwvZz4NCjwvc3ZnPg0K"
+      alt=""
+      style={{ height: '32px', width: '32px' }}
+    />
+  );
+}

package/src/components/maps/components/Map/featureRenders/MarkerFeatureRender/index.tsx

@@ -0,0 +1,112 @@
+//react
+import { Marker, MarkerProps } from 'react-leaflet';
+//external libraries
+import { shallow } from 'zustand/shallow';
+
+import { ComponentRenderPropFeature, RendePropFeatureArgs } from '../../contexts/MapContext';
+import { DivIcon, LatLngLiteral } from 'leaflet';
+import { IconForm } from './IconMarker';
+import { useMemo } from 'react';
+import L from 'leaflet';
+import useMapStore from '../../hooks/useMapStore';
+
+interface CustomMarkerProps extends MarkerProps {
+  id: string | number;
+  iconForm: IconForm | string;
+  position: LatLngLiteral;
+  width: number;
+  height: number;
+  bearing: number;
+}
+
+/**
+ * TODO: Documentar
+ */
+function CustomMarker(props: CustomMarkerProps) {
+
+  const { position, width, height, iconForm, bearing, ...other } = props;
+
+  const html = useMemo(() => {
+    // return ReactDOMServer.renderToString(<IconMarker iconForm={iconForm} bearing={bearing} />);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bearing]);
+
+  const customIcon: DivIcon = useMemo(() => {
+    return L.divIcon({
+      className: 'custom-icon',
+      iconSize: [width, height],
+      html: `<div>Hola</div>`,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [html]);
+
+  return (
+    <Marker
+      position={position}
+      icon={customIcon}
+      // eventHandlers={{
+      //     click: (e) => {
+      //     }
+      // }}
+      {...other}
+      ></Marker>
+  );
+}
+
+/**
+ * TODO: Documentar
+ */
+export const MarkerFeatureRender: ComponentRenderPropFeature = (props: RendePropFeatureArgs) => {
+  const { id, layerId } = props;
+
+  const feature = useMapStore(state => {
+    const gObject = state.hashLayers[layerId].geoJsonObject;
+
+    if (!gObject) {
+      return null;
+    }
+    if (gObject.object.type === 'Feature') {
+      return {
+        id: gObject.object.id,
+        geometry: gObject.object.geometry,
+        properties: gObject.object.properties,
+      };
+    } else {
+      const feat = gObject.object.features.find(f => f.id === id);
+      if (feat) {
+        return {
+          id: feat.id,
+          geometry: feat.geometry,
+          properties: feat.properties,
+        };
+      }
+      return null;
+    }
+  }, shallow);
+
+  if (!feature) {
+    return null;
+  }
+
+  if (feature.geometry.type === 'Point') {
+    const [lat, lng] = feature.geometry.coordinates;
+
+    const bearing = feature.properties?.iconRotate ?? 0;
+    return (
+      // <Marker position={{ lat, lng }}>
+      // ddd
+      // </Marker>
+      <CustomMarker
+        position={{ lat, lng }}
+        width={32}
+        height={32}
+        bearing={bearing}
+        iconForm={'grua'}
+        id={feature.id}
+      />
+    );
+  }
+
+  return null;
+  // const transform = `translate3d(${lat}px, ${lng}px, 0)`;
+};

package/src/components/maps/components/Map/featureRenders/index.ts

@@ -0,0 +1,3 @@
+export { MarkerFeatureRender } from './MarkerFeatureRender';
+
+export { CommonFeatureRender } from './CommonFeatureRender';

package/src/components/maps/components/Map/hooks/useAutoFocus/index.tsx

@@ -0,0 +1,124 @@
+// react
+import { useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+// m4l
+// external libraries
+import  throttle  from 'lodash.throttle';
+import { shallow } from 'zustand/shallow';
+import L from 'leaflet';
+// componentes estilados
+// internal components
+// sub components
+// utils
+// hooks
+import useMapStore from '../useMapStore';
+
+// types
+import type { Feature, FeatureCollection } from '../../contexts/MapContext/types';
+import { FeatureData, LayerForBound, LayerWithFeatures } from './types';
+
+/**
+ * "useAutoFocus" esta pendiente de que las capas que tiene auto foucus y son visible o cuando cambien su features.
+ * en cambios su propiedad de autoFocus o visible, el Efecto de autonEnfoque se activa, haciendo
+ * que el mapa se ajuste a los límites de las capas que tienen auto focus.
+ * @author Juan Escobar
+ */
+export function useAutoFocus() {
+  const map = useMap();
+
+  const layerWithAutoFocus: LayerWithFeatures[] = useMapStore(state => {
+    return state.layersIds
+      .filter(lId => {
+        if (state.hashLayers[lId].autoFocus && state.hashLayers[lId].visible) {
+          return true;
+        }
+        return false;
+      })
+      .map(layerId => ({
+        layerId,
+        features: (function (): FeatureData[] {
+          if (state.hashLayers[layerId].geoJsonObject?.object.type === 'FeatureCollection') {
+            //Remove feature from featureCollection
+            const layer = state.hashLayers[layerId].geoJsonObject?.object as FeatureCollection;
+
+            return layer.features
+              .filter(feature => feature.layerData !== undefined)
+              .map(feature => ({ featureId: feature.id, layerData: feature.layerData }));
+          } else {
+            const feature = state.hashLayers[layerId].geoJsonObject?.object as Feature;
+
+            if (feature.layerData !== undefined) {
+              return [{ featureId: feature.id, layerData: feature.layerData }];
+            }
+          }
+
+          return [];
+        })(),
+      }));
+  }, shallow);
+
+  /** Efecto qe esta pendiente de los cambios de las capas con autofocus */
+  useEffect(() => {
+    /**
+     * Procesa las capas que tienen auto focus, y ajusta los límites del mapa
+     */
+    const proccesLayerWithAutoFocus = (layersFoucus: LayerWithFeatures[]) => {
+      const layersToFitBounds: LayerForBound[] = [];
+
+      for (const layerWhitFeatures of layersFoucus) {
+        const features = layerWhitFeatures?.features;
+
+        for (let i = 0; i < features.length; i++) {
+          const feature = features[i];
+
+          if (feature.layerData !== undefined) {
+            const featureForBounds = {
+              layerId: layerWhitFeatures.layerId,
+              featureId: feature.featureId,
+              layerData: feature.layerData,
+            };
+            layersToFitBounds.push(featureForBounds);
+            // Haz algo con los límites aquí
+          } else {
+            console.error(`La capa ${layerWhitFeatures.layerId} no tiene un método getBounds`);
+          }
+        }
+      }
+
+      if (layersToFitBounds.length > 0) {
+        let featureForBounds = layersToFitBounds[0];
+
+        let bounds: L.LatLngBounds = L.latLngBounds(
+          featureForBounds.layerData.boundsNW,
+          featureForBounds.layerData.boundsSE,
+        );
+
+        // Amplía los límites para incluir todas las capas
+        for (let i = 1; i < layersToFitBounds.length; i++) {
+          featureForBounds = layersToFitBounds[i];
+          const newBounds: L.LatLngBounds = L.latLngBounds(
+            featureForBounds.layerData.boundsNW,
+            featureForBounds.layerData.boundsSE,
+          );
+          bounds = bounds.extend(newBounds);
+        }
+
+        //Hay un bug con animate:true, no carga bien aunque los bounds son correctos.
+        //TODO: maxZoom, alineado con el TileLayer Actual
+        map.fitBounds(bounds, { animate: false, maxZoom: 22, padding: [50, 50] });
+      }
+    };
+
+    /**
+     * Funcion encargada de solo llamar proccesLayerWithAutoFocus cada cierto timeout, para evitar sobrecarga
+     * de toda la aplicación cuando son muchas figuras que cargan en el mapa
+     */
+    const throttleBounds = throttle(proccesLayerWithAutoFocus, 300, {
+      leading: false, // No enviar el primer evento de fitBounds
+      trailing: true, // Incluir siempre el ultimo evento en la cola, para que no quede se quedee a la mitad del fitBounds
+    });
+
+    throttleBounds(layerWithAutoFocus);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layerWithAutoFocus]);
+}

package/src/components/maps/components/Map/hooks/useAutoFocus/types.ts

@@ -0,0 +1,18 @@
+import { FeatureId } from '../../contexts/MapContext';
+import { FeatureLayerData } from '../../contexts/MapContext/types';
+
+export type FeatureData = {
+  featureId: FeatureId;
+  layerData: FeatureLayerData | undefined;
+};
+
+export type LayerWithFeatures = {
+  layerId: string;
+  features: FeatureData[];
+};
+
+export type LayerForBound = {
+  layerId: string;
+  featureId: FeatureId;
+  layerData: FeatureLayerData;
+};

package/src/components/maps/components/Map/hooks/useDisableClickEvents/index.tsx

@@ -0,0 +1,47 @@
+// react
+import { useEffect, useRef } from 'react';
+import { useMap } from 'react-leaflet';
+import type { LeafletMouseEvent } from 'leaflet';
+
+// m4l
+
+// external libraries
+// componentes estilados
+
+// internal components
+// sub components
+// utils
+// hooks
+// types
+
+/**
+ * "useDisableClickEvents" se encarga de desactivar el click cuando se esta sobre
+ * el div que recibe como parámetro.
+ * @param nodeElement
+ */
+export function useDisableClickEvents(nodeElement: HTMLDivElement | null) {
+  const map = useMap();
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const clickHandlers = useRef<((event: LeafletMouseEvent) => void)[]>([]); // Guardar una referencia a los manejadores de eventos de click
+
+  // const cursorRef = useRef<string>('default'); // Guardar una referencia a los manejadores de eventos de click
+
+  useEffect(() => {
+    if (!map || !nodeElement) {return;}
+
+    // clickHandlers.current = (map as any)._events.click ? [...(map as any)._events.click.map((handler: any) => handler.fn)] : [];
+    // Desactivar el arrastre del mapa cuando el mouse está sobre el div
+    nodeElement.addEventListener('mouseover', function () {
+      // cursorRef.current = map.getContainer().style.cursor;
+      // map.off('click');
+    });
+
+    // Reactivar el arrastre del mapa cuando el mouse sale del div
+    nodeElement.addEventListener('mouseleave', function () {
+      // clickHandlers.current.forEach(handler => {
+      //   map.on('click', handler);
+      // });
+    });
+  }, [map, nodeElement]);
+}

package/src/components/maps/components/Map/hooks/useDisableZoomEvents/index.tsx

@@ -0,0 +1,38 @@
+// react
+import { useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+// m4l
+
+// external libraries
+// componentes estilados
+
+// internal components
+// sub components
+// utils
+// hooks
+// types
+
+/**
+ * "useDisableZoomEvents" se encarga de desactivar el zoom por doble click y por scroll
+ * cuando se está sobre el div que recibe como parámetro.
+ * @param nodeElement
+ */
+export function useDisableZoomEvents(nodeElement: HTMLDivElement | null) {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!map || !nodeElement) {return;}
+
+    // Desactivar el arrastre del mapa cuando el mouse está sobre el div
+    nodeElement.addEventListener('mouseover', function () {
+      map.doubleClickZoom.disable();
+      map.scrollWheelZoom.disable();
+    });
+
+    // Reactivar el arrastre del mapa cuando el mouse sale del div
+    nodeElement.addEventListener('mouseleave', function () {
+      map.scrollWheelZoom.enable();
+      map.doubleClickZoom.enable();
+    });
+  }, [map, nodeElement]);
+}

package/src/components/maps/components/Map/hooks/useMapStore/index.ts

@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { useStore } from 'zustand';
+
+import { MapContext } from '../../contexts/MapContext/MapContext';
+import { MapStateWithActions } from '../../contexts/MapContext/types';
+
+// // ----------------------------------------------------------------------
+// export function useMapContext() {
+//     const context = useContext(MapContext);
+
+//     if (!context) throw new Error('useMap context must be use inside MapContext');
+
+//     return context;
+// }
+
+// ----------------------------------------------------------------------
+/**
+ * TODO: Documentar
+ */
+export function useMapStore<T>(
+  selector: (state: MapStateWithActions) => T,
+  equalityFn?: (left: T, right: T) => boolean,
+): T {
+  const context = useContext(MapContext);
+  if (!context) {throw new Error('useMapStore context must be use inside MapContext');}
+
+  return useStore(context, selector, equalityFn);
+}
+
+export default useMapStore;

package/src/components/maps/components/Map/icons.ts

@@ -0,0 +1,72 @@
+export const MAP_ICONS = {
+  /**
+   * Map en general
+   */
+
+  MAP_ZOOM_IN: 'cmp_map_zoom_in.svg',
+  MAP_ZOOM_OUT: 'cmp_map_zoom_out.svg',
+
+  /**
+   * Map sources
+   */
+
+  MAP_SOURCES_TOOL: 'cmp_map_mapsources_tool.svg',
+  MAP_SOURCE_OSM: 'cmp_map_mapsources_osm.svg',
+  MAP_SOURCE_GOOGLE_ROADS: 'cmp_map_mapsources_google.svg',
+  MAP_SOURCE_GOOGLE_HYBRID: 'cmp_map_mapsources_googlehybrid.svg',
+  MAP_SOURCE_GOOGLE_SATELLITE: 'cmp_map_mapsources_googlesatelite.svg',
+  MAP_SOURCE_BING: 'cmp_map_mapsources_bing.svg',
+
+  /**
+   * Map sources road options+
+   */
+
+  MAP_SOURCE_ROAD_TRAFFIC: 'cmp_map_mapsources_layer-traffic.svg',
+  MAP_SOURCE_ROAD_TRANSIT: 'cmp_map_mapsources_layer-transit.svg',
+  MAP_SOURCE_ROAD_BICYCLING: 'cmp_map_mapsources_layer-bicycle.svg',
+
+  /**
+   * Layers
+   */
+
+  MAP_LAYERS_TOOL: 'cmp_map_layers_tool.svg',
+  MAP_LAYER_VISIBLE: 'cmp_map_layers_view.svg',
+  MAP_LAYER_AUTOFOCUS: 'cmp_map_layers_zoom_fit.svg',
+  MAP_LAYER_CLUSTER: 'cmp_map_layers_cluster.svg',
+  MAP_LAYER_DELETE: 'cmp_map_layers_delete.svg',
+
+  ADD: 'add.svg',
+
+  /**
+   * Measure Tool *
+   *
+   */
+
+  MAP_GPS_TOOLS_TOOL: 'cmp_map_gpstools_tool.svg',
+
+  MAP_MEASURE_TOOL: 'cmp_map_measure_tool.svg',
+
+  GENERAL: 'general.svg',
+  CONFIG: 'config.svg',
+  STROKE: 'stroke.svg',
+  FILL: 'fill.svg',
+  // REFRESH: 'refresh.svg',
+
+  // ENABLED: 'enabled.svg',
+  // DISABLED: 'disabled.svg',
+  EDIT: 'edit.svg',
+  DELETE: 'delete.svg',
+  ACTIVE: 'active.svg',
+  NAME: 'name.svg',
+  // EMAIL: 'email.svg',
+  // USER: 'users.svg',
+  // FIRSTNAME: 'first_name.svg',
+  // LASTNAME: 'last_name.svg',
+  // MAIN_PHONE: 'fixed_phone.svg',
+  // SECONDARY_PHONE: 'fixed_phone.svg',
+  // CREATED_AT: 'created_at.svg',
+  // UPDATED_AT: 'updated_at.svg',
+  // VIEW_DETAIL: 'view_detail.svg',
+
+  // USERS: 'users.svg',
+};

package/src/components/maps/components/Map/index.ts

@@ -0,0 +1,25 @@
+export { MyMap as Map } from './Map';
+
+export type { MapProps } from './types';
+export { MapProvider, MapContext } from './contexts/MapContext/MapContext';
+export { useMapStore } from './hooks/useMapStore';
+
+export type {
+  RendePropFeatureArgs,
+  ComponentRenderPropFeature,
+  FeatureId,
+  FeatureCollection,
+  Feature,
+  Geometry,
+} from './contexts/MapContext';
+
+export * from './featureRenders';
+
+export * from './popups';
+
+export { getMapComponentsDictionary } from './dictionary';
+
+//Plugin layers
+export * from './pluginLayers';
+
+// export type { LatLngBoundsLiteral, LatLngLiteral, LatLng } from 'leaflet';