<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>
            </div>
            <a href="{{Bio}}" class="btn btn--b btn--100 btn--sm">Visit webpage<span class="a11y--h"> of </span></a>
        </script>
    </cob-map-esri-layer>
    <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>
                        </ul>
                    </div>
                    {{#Comments}}
                    <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>
        </script>
    </cob-map-esri-layer>
    <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>
        </p>
    </div>
</cob-map>

cob-map

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

Slots

instructions

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

Properties

addressSearchHeading

string

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

addressSearchPlaceholder

string

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

addressSearchPopupLayerUid

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.

basemapUrl

string

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

heading

string

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

latitude

number

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.

longitude

number

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.

openOverlay

boolean

Test attribute to make the overlay open automatically at mobile widths. Only used so that we can take Percy screenshots of the overlay.

showAddressSearch

boolean

Boolean attribute for whether to put a search box for addresses in the overlay.

showLegend

boolean

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

showZoomControl

boolean

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

zoom

number

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

Attributes

address-search-heading

string

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

address-search-placeholder

string

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

string

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

heading

string

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

latitude

number

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.

longitude

number

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.

open-overlay

boolean

Test attribute to make the overlay open automatically at mobile widths. Only used so that we can take Percy screenshots of the overlay.

boolean

Boolean attribute for whether to put a search box for addresses in the overlay.

show-legend

boolean

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

show-zoom-control

boolean

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

zoom

number

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


Built with StencilJS


cob-map-esri-layer

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

Slots

Alternate way to define the popup template from the popup-template attribute 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.

Properties

clusterIcons

boolean

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

color

string

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

fill

boolean

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.

hoverColor

string

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

iconSrc

string

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

label

string

String to show on the legend for this layer.

popupTemplate

string

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.

uid

string

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

url

string

URL for an ArcGIS feature layer.

Attributes

cluster-icons

boolean

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

color

string

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

fill

boolean

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.

hover-color

string

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

icon-src

string

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

label

string

String to show on the legend for this layer.

string

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.

uid

string

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

url

string

URL for an ArcGIS feature layer.

Events

cobMapEsriLayerConfig

Sent on load and when the configuration changes so that the parent

can update the layer’s contents or appearance.


Built with StencilJS


cob-viz

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 appropriate <cob-map> and <cob-esri-layer> components.

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

config

string

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.

Attributes

config

string

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.


Built with StencilJS