Custom Map Widget

What is it

The map widget uses our custom map component to render an ArcGIS map. You can style and filter the map through URL Search params.

How to access it

There is no interface, you can control what map shows and how by changing the url/link that you put on the new location. 

Parameters

Parameter Type Description
item_id string or number The unique identifier for a feature in the layer. It can be either a string or a numeric value.
item_key string The key associated with item_id. This is used to query the feature schema. For example: SELECT * WHERE ${item_key} EQUALS ${item_id}.
layer_fill_color - note string or RGBA values. Use a hex code without the # (e.g., 123456). Alternatively, You can pass RGB or RGBA color values as a comma-delimited string. For example:
•
RGB: 255,0,0 for red.
•
RGBA: 0,0,0,0.5 for black with 50% transparency.
layer_outline_color - note string Use a hex code without the # (e.g., 123456). Alternatively, You can pass RGB or RGBA color values as a comma-delimited string. For example:
•
RGB: 255,0,0 for red.
•
RGBA: 0,0,0,0.5 for black with 50% transparency.
layer_outline_width - note number Sets the width in pixels of the layer outline.
layer_id string or number The ID of the feature layer you want to overlay on the map.
layer_opacity range (0–1) Controls the opacity of the feature layer geometry.
layer_url URL The URL of the feature layer, which can be found on the ESRI feature layer page.
tile_layer_url URL Specifies an alternative base map URL, in case you do not wish to use the default base map.
animate boolean Toggles the zoom animation.

Note: Providing a layer_fill_color will override the default styles for layer_outline_color and layer_outline_width so it’s recommended to also pass values for those params. If you wish to customize the layer_outline_width or layer_outline_color, you must also specify a layer_fill_color. Otherwise, your styles will not be applied

 

Examples

Take a look at the examples below - click on each link and try changing the parameters within the link to see the results!

  1. Use the default layer and filter by CC_NAME

    Open the map using the default layer and filter by the CC_NAME property.

    Example URL: https://widgets.matsu.gov/map?item_id=WILLOW&item_key=CC_NAME

  2. Use the default layer and customize layer opacity

    Adjust the layer’s opacity by setting layer_opacity to a value between 0 and 1.

    Example URL: https://widgets.matsu.gov/map?layer_opacity=0.5

  3. Use custom layer colors

    https://widgets.matsu.gov/map?layer_fill_color=5efc03&layer_outline_width=1&layer_outline_color=000000

  4. Use custom layer colors with RGBA values

    [https://widgets.matsu.gov/map?](https://widgets.matsu.gov/map?layer_fill_color=5efc03&layer_outline_width=1&layer_outline_color=000000&layer_opacity=0.3)[layer_fill_color=66,135,245,0.3&layer_outline_width=1&layer_outline_color=0,0,0](https://widgets.matsu.gov/map?layer_fill_color=66,135,245,0.3&layer_outline_width=1&layer_outline_color=0,0,0)

  5. Custom layer colors with custom opacity

    https://widgets.matsu.gov/map?layer_fill_color=5efc03&layer_outline_width=1&layer_outline_color=000000&layer_opacity=0.3

  6. Use a different layer with a custom query

    Specify a custom layer_url and layer_id to query a different feature layer. Then set item_id and item_key to filter the data.

    Example URL: https://widgets.matsu.gov/map?item_id=3&item_key=DISTNUM&layer_url=https://maps.matsugov.us/map/rest/services/OpenData/Administrative_AssemblyDistricts/FeatureServer&layer_id=5881a8933a264ab98df6aface0b7a678

  7. Embed the map in an <iframe>

    You can also embed the map in a webpage using an <iframe>.

<iframe title="Matanuska-Susitna Borough Assembly District 3" src="<https://widgets.matsu.gov/map?item_id=3&item_key=DISTNUM&layer_url=https://maps.matsugov.us/map/rest/services/OpenData/Administrative_AssemblyDistricts/FeatureServer&layer_id=5881a8933a264ab98df6aface0b7a678>" />

Print Article