<cob-map style="height: 500px" latitude="42.347316" longitude="-71.065227" zoom="12" show-zoom-control id="map">
    <cob-map-esri-layer url="https://services.arcgis.com/sFnw0xNflSi8J0uh/arcgis/rest/services/City_Council_Districts/FeatureServer/0" color="#0C2639" hover-color="#FB4D42" title="Boston City Council districts"></cob-map-esri-layer>
    <cob-map-legend collapsed-title="City Councilor Look-Up" open>
        <div class="t--info">
            <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.


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.

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

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


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

url: URL for an ArcGIS feature layer.

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

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

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


Optionally added as a child of <cob-map> to include a legend of the layers that appear on the map.

Its children are used as the main contents of the legend box, and the map legend is appended below.

It takes the properties:

collapsedTitle: At lower breakpoints, the legend collapses into a togglable header, and this title is used for it.

open: Defaults the legend to expanded at narrower breakpoints. Really only useful for visual testing.