Midwest Component Library v0.28.2

Previews

No matching results.

x
1
2
3
4
5
6
<div class="midwest-map" style="--map-height: 400px" role="application" aria-label="Apple Stores — San Francisco Bay Area" data-controller="midwest-map" data-midwest-map-latitude-value="37.334886" data-midwest-map-longitude-value="-122.008988" data-midwest-map-span-value="0.08" data-midwest-map-map-type-value="MutedStandard" data-midwest-map-color-scheme-value="Auto" data-midwest-map-markers-value="[{"latitude":37.334886,"longitude":-122.008988,"title":"Apple Park Visitor Center","subtitle":"10600 N Tantau Ave, Cupertino","color":"#1d1d1f","glyphText":""},{"latitude":37.3318,"longitude":-122.0312,"title":"Apple Infinite Loop","subtitle":"1 Infinite Loop, Cupertino","color":"#1d1d1f"},{"latitude":37.4419,"longitude":-122.143,"title":"Apple University Ave","subtitle":"340 University Ave, Palo Alto","color":"#1d1d1f"}]" data-midwest-map-shows-user-location-value="false" data-midwest-map-shows-map-type-control-value="false" data-midwest-map-shows-zoom-control-value="true" data-midwest-map-shows-compass-value="Adaptive" data-midwest-map-rotation-value="0" data-midwest-map-provider-value="mapkit">
  <div class="midwest-map__placeholder" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="32" height="32" aria-hidden="true"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" /><circle cx="12" cy="9" r="2.5" /></svg>
    <p class="midwest-map__placeholder-title">Apple MapKit JS</p>
    <p class="midwest-map__placeholder-hint">Provide a <code>token:</code> or <code>token_url:</code> to display the map</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%= midwest_map(
      latitude: 37.334886,
      longitude: -122.008988,
      span: 0.08,
      label: "Apple Stores — San Francisco Bay Area",
      markers: [
        Midwest::Map::MarkerData.new(
          latitude:   37.334886,
          longitude:  -122.008988,
          title:      "Apple Park Visitor Center",
          subtitle:   "10600 N Tantau Ave, Cupertino",
          color:      "#1d1d1f",
          glyph_text: ""
        ),
        Midwest::Map::MarkerData.new(
          latitude:  37.3318,
          longitude: -122.0312,
          title:     "Apple Infinite Loop",
          subtitle:  "1 Infinite Loop, Cupertino",
          color:     "#1d1d1f"
        ),
        Midwest::Map::MarkerData.new(
          latitude:  37.4419,
          longitude: -122.1430,
          title:     "Apple University Ave",
          subtitle:  "340 University Ave, Palo Alto",
          color:     "#1d1d1f"
        )
      ]
    ) %>

Markers

Pass Midwest::Map::MarkerData objects (or plain hashes — both are accepted) to place pins on the map. Each marker supports latitude:, longitude:, optional title:, subtitle:, color: (CSS string), glyph_text: (MapKit only), and open: to show its callout on load.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Map/markers

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."