<cob-map id="map" modal 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": "<div class=\"t--info\"><p>To see all City Council members, including at-large councilors, visit the\n      <a target=\"_blank\"\n        href=\"https://www.boston.gov/departments/city-council#city-council-members\">City Council page.</a>\n    </p>\n  </div>",
                "latitude": 42.32,
                "longitude": -71.1284,
                "zoom": 12,
                "showZoomControl": true,
                "showLegend": true,
                "showUserLocation": false,
                "addressSearch": {
                    "title": "Address search",
                    "placeholder": "Search for your address…",
                    "autoPopupDataSourceUid": "data1",
                    "zoomToResult": false
                }
            }]
        }
    </script>
</cob-map>

cob-map

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.

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.

id

string

ID of the HTML element. Used to automatically open the map modal.

boolean

If true, the map starts hidden and, when shown, appears in a full-screen modal dialog.

Note: On the server, this may be the empty string when true, so we need to check against !== false to test it.

modalVisible

boolean

Change to true to make the modal appear.

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.

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.

id

string

ID of the HTML element. Used to automatically open the map modal.

boolean

If true, the map starts hidden and, when shown, appears in a full-screen modal dialog.

Note: On the server, this may be the empty string when true, so we need to check against !== false to test it.

boolean

Change to true to make the modal appear.

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.

Methods

hide()

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

show()

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

toggle()

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


Built with StencilJS


stencil_readme: web-components/map-esri-layer/readme.md not found


stencil_readme: web-components/viz/readme.md not found