Fleet

Web Components: Map: Modal Closed 

<cob-map id="map" open-overlay>
    <script slot="config" type="application/json">
        {
            "version": "1.0",
            "uid": "map1",
            "dataSources": [{
                    "uid": "data1",
                    "icons": null,
                    "polygons": {
                        "style": "default",
                        "color": "#0c2639",
                        "hoverColor": "#fb4d42",
                        "fill": true
                    },
                    "popupHtmlTemplate": "<img src=\"{{Image}}\" class=\"cdp-i cdp-i--c\" alt=\"{{Councilor}}\" style=\"margin-bottom: 1rem\"/>\n          <div class=\"ta-c m-v300\">\n            <div class=\"cdp-t t--sans t--upper m-t200\">{{Councilor}}</div>\n            <div class=\"cdp-st t--subinfo t--g300\">District {{DISTRICT}}</div>\n          </div>\n          <a href=\"{{Bio}}\" class=\"btn btn--b btn--100 btn--sm\">\n            Visit webpage<span class=\"a11y--h\"> of {{Councillor}}</span>\n          </a>",
                    "data": {
                        "type": "arcgis",
                        "service": "https://services.arcgis.com/sFnw0xNflSi8J0uh/arcgis/rest/services/City_Council_Districts/FeatureServer",
                        "layer": 0
                    },
                    "legend": {
                        "label": "City Council Districts",
                        "symbol": "polygon"
                    }
                },
                {
                    "uid": "data2",
                    "icons": {
                        "markerUrl": "/images/global/icons/mapping/parking.svg",
                        "cluster": false
                    },
                    "polygons": null,
                    "popupHtmlTemplate": "<div style=\"min-width: 280px\">\n        <h3 class=\"h3 m-v300\">{{Address}}</h4>\n        <div class=\"m-v300\">\n          <ul class=\"dl dl--sm\">\n            <li class=\"dl-i\"><span class=\"dl-t\">Name:</span> <span class=\"dl-d\">{{Name}}</span></li>\n            <li class=\"dl-i\"><span class=\"dl-t\">Fee:</span> <span class=\"dl-d\">{{Fee}}</span></li>\n          </ul>\n        </div>\n        {{#Comments}}<div class=\"t--subinfo m-v300\">{{.}}</div>{{/Comments}}\n        {{#Phone}}<div class=\"t--subinfo m-v300\">Call ahead to find out the number of spaces available: <a href=\"tel:{{.}}\">{{.}}</a></div>{{/Phone}}\n      </div>",
                    "data": {
                        "type": "arcgis",
                        "service": "https://services.arcgis.com/sFnw0xNflSi8J0uh/arcgis/rest/services/SnowParking/FeatureServer",
                        "layer": 0
                    },
                    "legend": {
                        "label": "Parking Lots",
                        "symbol": "icon"
                    }
                }
            ],
            "maps": [{
                "uid": "yBHcvxTmQyrK4WhLBxe16",
                "title": "Parking and city councilors",
                "instructionsHtml": "<div class=\"t--info\"><p>To see all City Council members, including at-large councilors, visit the\n      <a target=\"_blank\"\n        href=\"https://www.boston.gov/departments/city-council#city-council-members\">City Council page.</a>\n    </p>\n  </div>",
                "latitude": 42.32,
                "longitude": -71.1284,
                "zoom": 12,
                "showZoomControl": true,
                "showLegend": true,
                "showUserLocation": false,
                "addressSearch": {
                    "title": "Address search",
                    "placeholder": "Search for your address…",
                    "autoPopupDataSourceUid": "data1",
                    "zoomToResult": false
                }
            }]
        }
    </script>
</cob-map>
<a href="#map" class="btn">Show Map</a>

cob-map

Web component for a Leaflet map and data from Esri. The map is rendered full-screen as a modal, with a close box that hides it (since embedded maps that trap mouse wheel scrolls and stuff are a painful UX).

The map is by default hidden. You can show it with the show() method, but a better way is to make an <a> tag that links the user to the #<id> fragment. If a <cob-map> is on the page and configured with that id attribute, it will appear. This use of fragments means that after the modal appears full-screen, if the user clicks the back button it will just close the map.

Configure it with either a the config attribute or a child <script slot="config" type="application/json">. The config format is defined by a JSON-Schema file. See the documentation generated from that file. (Note: the map does not update if the config is changed dynamically.)

This component typechecks by converting the JSON-Schema to TypeScript. To update the type definitions, run npx gulp schema:map.

Slots

config

Alternate way to define the JSON configuration from the config attribute that avoids the need to HTML escape and put in the “config” attribute. Include a <script slot="config" type="application/json"> element whose text contents are the JSON configuration.

Properties

Property Attribute Description Type Default
config config A JSON string or equivalent object that defines the map and layers. string ''
id id ID of the HTML element. Used to automatically open the map modal. string ''
modalVisible modal-visible Change to true to make the modal appear. boolean false
openOverlay open-overlay Test attribute to make the overlay open automatically at mobile widths. Only used so that we can take Percy screenshots of the overlay. boolean false

Methods

hide() => void

Hides the map’s modal

Returns

Type: void

show() => void

Shows the map in a full-window modal dialog. A better way to make the modal appear on a web page is to link to #, which will cause the map to appear and leave a record in the browser history so that the back button will close the map (rather than take the user to the page before).

Returns

Type: void

toggle() => void

Toggles whether or not the map is visible.

Returns

Type: void

Built with StencilJS