<cob-map id="map" open-overlay modal-visible>
    <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": null,
                "latitude": 42.32,
                "longitude": -71.1284,
                "zoom": 12,
                "showZoomControl": true,
                "showLegend": false,
                "showUserLocation": false,
                "addressSearch": {
                    "title": "Address search",
                    "placeholder": "Search for your address…",
                    "autoPopupDataSourceUid": "data1",
                    "zoomToResult": false


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.



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.


Property Attribute Description Type Default
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 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


hide() => void

Hides the modal, if the map is in modal mode.


Type: void

show() => void

Shows the modal, if the map is in modal mode.


Type: void

toggle() => void

If the map is in modal mode, toggles whether or not it’s visible.


Type: void

Built with StencilJS