<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"
}
}
],
"filters": [{
"dataSourceUid": "data1",
"title": "Day",
"type": "select",
"options": [{
"title": "Any",
"value": "Any",
"query": "1=1"
},
"separator",
{
"title": "Monday",
"value": "Monday"
},
{
"title": "Tuesday",
"value": "Tuesday"
},
{
"title": "Wednesday",
"value": "Wednesday"
},
{
"title": "Thursday",
"value": "Thursday"
},
{
"title": "Friday",
"value": "Friday"
},
{
"title": "Saturday",
"value": "Saturday"
},
{
"title": "Sunday",
"value": "Sunday"
}
],
"queryTemplate": "Day = '[object Object]'"
},
{
"dataSourceUid": "data1",
"title": "Time",
"type": "select",
"options": [{
"title": "Any",
"value": "Any",
"query": "1=1"
},
{
"type": "separator"
},
{
"title": "Breakfast",
"value": "Breakfast"
},
{
"title": "Lunch",
"value": "Lunch"
},
{
"title": "Dinner",
"value": "Dinner"
}
],
"queryTemplate": "Time = '[object Object]'"
}
],
"maps": [{
"uid": "yBHcvxTmQyrK4WhLBxe16",
"title": "Parking and city councilors",
"instructionsHtml": null,
"latitude": 42.32,
"longitude": -71.1284,
"zoom": 12,
"showZoomControl": true,
"showLegend": true,
"showUserLocation": false,
"addressSearch": null
}]
}
</script>
</cob-map>
Web component for a Leaflet map and data from Esri. The map is rendered full-screen as a modal, with a close box that hides it (since embedded maps that trap mouse wheel scrolls and stuff are a painful UX).
The map is by default hidden. You can show it with the show()
method, but a
better way is to make an <a>
tag that links the user to the #<id>
fragment.
If a <cob-map>
is on the page and configured with that id
attribute, it will
appear. This use of fragments means that after the modal appears full-screen, if
the user clicks the back button it will just close the map.
Configure it with either a the config
attribute or a child <script
slot="config" type="application/json">
. The config format is defined by a
JSON-Schema file. See the
documentation generated
from that file. (Note: the map does not update if the config is changed
dynamically.)
This component typechecks by converting the JSON-Schema to TypeScript. To update
the type definitions, run npx gulp schema:map
.
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. | 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 map’s modal
Type: void
show() => void
Shows the map in a full-window modal dialog. A better way to make the modal
appear on a web page is to link to #
Type: void
toggle() => void
Toggles whether or not the map is visible.
Type: void
Built with StencilJS