<cob-map heading="Parking and city councilors" style="height: 500px" latitude="42.347316" longitude="-71.065227" zoom="12" show-zoom-control show-legend>
    <cob-map-esri-layer url="https://services.arcgis.com/sFnw0xNflSi8J0uh/arcgis/rest/services/City_Council_Districts/FeatureServer/0" color="#0C2639" hover-color="#FB4D42" label="Boston City Council Districts" fill>
        <script slot="popup" type="text/mustache">
            <img src="{{Image}}" class="cdp-i" alt="{{Councilor}}" style="margin-bottom: 1rem" />
            <div class="ta-c m-v300">
                <div class="cdp-t t--sans t--upper m-t200">{{Councilor}}</div>
                <div class="cdp-st t--subinfo t--g300">District {{DISTRICT}}</div>
            <a href="{{Bio}}" class="btn btn--b btn--100 btn--sm">Visit webpage<span class="a11y--h"> of </span></a>
    <cob-map-esri-layer url="https://services.arcgis.com/sFnw0xNflSi8J0uh/arcgis/rest/services/SnowParking/FeatureServer/0" icon-src="/images/global/icons/mapping/parking.svg" cluster-icons label="Snow Emergency Parking Lots">
        <script slot="popup" type="text/mustache">
            <div style="min-width: 280px">
                <h3 class="h3 m-v300">{{Address}}</h4>
                    <div class="m-v300">
                        <ul class="dl dl--sm">
                            <li class="dl-i"><span class="dl-t">Name:</span> <span class="dl-d">{{Name}}</span></li>
                            <li class="dl-i"><span class="dl-t">Fee:</span> <span class="dl-d">{{Fee}}</span></li>
                    <div class="t--subinfo m-v300">{{.}}</div>{{/Comments}} {{#Phone}}
                    <div class="t--subinfo m-v300">Call ahead to find out the number of spaces available: <a href="tel:{{.}}">{{.}}</a></div>{{/Phone}}
    <div class="t--info" slot="instructions">
        <p class="m-t000">Hover over and click on your district to find your councilor, or search your address.</p>
        <p>To see all City Council members, including at-large councilors, visit the
            <a target="_blank" href="https://www.boston.gov/departments/city-council#city-council-members">City Council page.</a>

Web component for a Leaflet map and data from Esri. Configured through a handful of nested components.



heading: Title for the map. Shown on the collapse / expand header at mobile widths.

latitude / longitude: Position to center the map on to start. Will be updated as the map is moved by the user. Changes to this will move the map.

zoom: Zoom level for the map. Will be updated as the map is zoomed. Changes to this will zoom the map.

show-zoom-control: Boolean attribute for whether to show zoom buttons in the bottom right of the map.

show-legend: Boolean attribute for whether to put a map legend in the overlay.

show-address-search: Boolean attribute for whether to put a search box for addresses in the overlay.

address-search-heading: Header to show above the address search box. Defaults to “Address search”

address-search-placeholder: String to use as the placeholder in the address search box (if visible). Defaults to “Search for an address…”

address-search-popup-layer-uid: If provided, clicking on the search result markers from an address search will open this layer’s popup. If there’s only one search result, the popup will be opened automatically.

basemap-url: URL for an ArcGIS tiled layer basemap. Default to our custom City of Boston basemap, layered over a generic Esri basemap.

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.


instructions: If included, placed in the overlay above address search and the legend.


These elements are added as children of <cob-map> to include layers of geo features on the map.


uid: Identifier string for the layer. Must be unique within the map.

url: URL for an ArcGIS feature layer.

label: String to show on the legend for this layer.

icon-src: URL to use as an icon for the layer’s features, and to show in the legend for this layer.

cluster-icons: If the layer is showing icons, use the markercluster Leaflet plugin to show nearby icons as a single dot until you zoom in.

color: For polygon layers, the color for the borders. (The fill will be a semi-transparent version of this color).

hover-color: If set, the color to use for polygon borders if the mouse is hovered over them.

fill: Boolean attribute. If set, regions will be filled in with the color attribute at 20% opacity. Also causes the legend to show a box rather than a straight line for this layer.

popup-template: A Mustache template to use to generate the contents of a Leaflet popup for the layer’s features. Its context will be the feature’s properties. To specify the template in a more editor-friendly way, use the popup slot and a <script> tag.


popup: Alternate way to define the popup template that avoids the need to HTML escape tags and quotes. Include a <script slot="popup" type="text/mustache"> element whose text contents are a Mustache template.


This element bridges the JSON configuration generated by vizwiz into web components. It accepts the configuration block as an attribute or embedded <script> and generates the above components.


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.


config: Alternate way to define the JSON configuration 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.