Jalmogo/mississippi updates (#1423)

* fix(css in mapWidgetContainer)

* refactor(mainMap types)

Author: jalMogo

src/base/static/components/molecules/map-filter-slider.tsx

@@ -59,6 +59,7 @@ const MapFilterSlider: React.FunctionComponent<FilterSliderProps> = ({
         padding: 8px;
         border-radius: 8px;
         color: #fff;
+        width: 400px;
         margin-top: 8px;
       `}
     >

src/base/static/components/organisms/main-map.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { jsx } from "@emotion/core";
 import { findDOMNode } from "react-dom";
 import { Map } from "mapbox-gl";
-import { GeometryObject } from "geojson";
+import { GeometryObject, GeoJsonProperties } from "geojson";
 import PropTypes from "prop-types";
 import MapGL, { Popup, InteractiveMap } from "react-map-gl";
 import { connect } from "react-redux";
@@ -316,12 +316,12 @@ class MainMap extends React.Component<Props, State> {
     }
   }
 
-  parsePopupContent = (popupContent, properties) => {
+  parsePopupContent = (popupContent: string, properties: GeoJsonProperties) => {
     // Support a Handlebars-inspired syntax for injecting feature properties
     // into popup content.
     return popupContent.replace(/{{(\w+?)}}/gi, (...args) => {
-      if (properties[args[1]]) {
-        return properties[args[1]];
+      if (properties![args[1]]) {
+        return properties![args[1]];
       } else {
         // eslint-disable-next-line no-console
         console.error(

src/base/static/components/organisms/map-widget-container.tsx

@@ -41,7 +41,7 @@ const MapWidgetContainer: React.FunctionComponent<ContainerProps> = props => {
         bottom: 8px;
         left: 8px;
         right: ${props.layout === "desktop" ? "unset" : "8px"};
-        width: ${props.layout === "desktop" ? "400px" : "unset"};
+        width: ${props.layout === "desktop" ? "auto" : "unset"};
       `}
     >
       <React.Fragment>