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. It accepts the configuration block as an attribute or embedded <script> and generates a Leaflet map.

The config format is defined by a JSON-Schema file. See the documentation generated from that file.

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

The map can operate in “modal” mode by setting the modal attribute. In this mode, the map is hidden by default and, when shown, appears in a full-screen modal dialog.

To show or hide the map, you can use the show(), hide(), toggle() methods. The map will also listen to hash change events and, if its id comes up as the hash, it will automatically appear.

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
config config A JSON string or equivalent object that defines the map and layers. The schema for this config comes from VizWiz, so it won’t be documented here. Any attributes prefixed with map- will be passed on to the generated <cob-map> component. E.g. map-id or map-style. 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
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

Methods

Method Description
hide Hides the modal, if the map is in modal mode.
show Shows the modal, if the map is in modal mode.
toggle If the map is in modal mode, toggles whether or not it’s visible.

Built with StencilJS