Midwest Component Library v0.28.2

Previews

No matching results.

x
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
31
32
33
34
35
36
37
38
<div class="grid grid-cols-2 gap-4">
  <div>
    <p class="text-xs text-theme-6 font-medium mb-2">:muted</p>
    <div class="midwest-map" style="--map-height: 200px" role="application" aria-label="Map" data-controller="midwest-map" data-midwest-map-latitude-value="37.334886" data-midwest-map-longitude-value="-122.008988" data-midwest-map-span-value="0.05" data-midwest-map-map-type-value="MutedStandard" data-midwest-map-color-scheme-value="Auto" data-midwest-map-markers-value="[]" 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>
  </div>
  <div>
    <p class="text-xs text-theme-6 font-medium mb-2">:standard</p>
    <div class="midwest-map" style="--map-height: 200px" role="application" aria-label="Map" data-controller="midwest-map" data-midwest-map-latitude-value="37.334886" data-midwest-map-longitude-value="-122.008988" data-midwest-map-span-value="0.05" data-midwest-map-map-type-value="Standard" data-midwest-map-color-scheme-value="Auto" data-midwest-map-markers-value="[]" 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>
  </div>
  <div>
    <p class="text-xs text-theme-6 font-medium mb-2">:hybrid</p>
    <div class="midwest-map" style="--map-height: 200px" role="application" aria-label="Map" data-controller="midwest-map" data-midwest-map-latitude-value="37.334886" data-midwest-map-longitude-value="-122.008988" data-midwest-map-span-value="0.05" data-midwest-map-map-type-value="Hybrid" data-midwest-map-color-scheme-value="Auto" data-midwest-map-markers-value="[]" 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>
  </div>
  <div>
    <p class="text-xs text-theme-6 font-medium mb-2">:satellite</p>
    <div class="midwest-map" style="--map-height: 200px" role="application" aria-label="Map" data-controller="midwest-map" data-midwest-map-latitude-value="37.334886" data-midwest-map-longitude-value="-122.008988" data-midwest-map-span-value="0.05" data-midwest-map-map-type-value="Satellite" data-midwest-map-color-scheme-value="Auto" data-midwest-map-markers-value="[]" 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>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="grid grid-cols-2 gap-4">
  <div>
    <p class="text-xs text-theme-6 font-medium mb-2">:muted</p>
    <%= midwest_map(latitude: 37.334886, longitude: -122.008988, span: 0.05, map_type: :muted, height: 200) %>
  </div>
  <div>
    <p class="text-xs text-theme-6 font-medium mb-2">:standard</p>
    <%= midwest_map(latitude: 37.334886, longitude: -122.008988, span: 0.05, map_type: :standard, height: 200) %>
  </div>
  <div>
    <p class="text-xs text-theme-6 font-medium mb-2">:hybrid</p>
    <%= midwest_map(latitude: 37.334886, longitude: -122.008988, span: 0.05, map_type: :hybrid, height: 200) %>
  </div>
  <div>
    <p class="text-xs text-theme-6 font-medium mb-2">:satellite</p>
    <%= midwest_map(latitude: 37.334886, longitude: -122.008988, span: 0.05, map_type: :satellite, height: 200) %>
  </div>
</div>

Map types

MapKit JS ships four map styles: :muted (subdued, design-friendly), :standard (full color), :hybrid (satellite + labels), and :satellite (pure aerial imagery).

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/map_types

Annotate a preview to embed its Figma design here:

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