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
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
  <div class="midwest-map" style="--map-height: 280px" role="application" aria-label="London — muted (CartoDB Positron)" data-controller="midwest-map" data-midwest-map-latitude-value="51.5074" data-midwest-map-longitude-value="-0.1278" data-midwest-map-span-value="0.04" data-midwest-map-map-type-value="MutedStandard" data-midwest-map-color-scheme-value="Auto" data-midwest-map-markers-value="[{"latitude":51.5074,"longitude":-0.1278,"title":"London","subtitle":"United Kingdom","color":"#0f172a"}]" 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="leaflet">
    <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">Leaflet</p>
    </div>
  </div>
  <div class="midwest-map" style="--map-height: 280px" role="application" aria-label="London — standard (OpenStreetMap)" data-controller="midwest-map" data-midwest-map-latitude-value="51.5074" data-midwest-map-longitude-value="-0.1278" data-midwest-map-span-value="0.04" 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="leaflet">
    <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">Leaflet</p>
    </div>
  </div>
  <div class="midwest-map" style="--map-height: 280px" role="application" aria-label="London — satellite (ESRI)" data-controller="midwest-map" data-midwest-map-latitude-value="51.5074" data-midwest-map-longitude-value="-0.1278" data-midwest-map-span-value="0.04" 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="leaflet">
    <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">Leaflet</p>
    </div>
  </div>
  <div class="midwest-map" style="--map-height: 280px" role="application" aria-label="London — dark (CartoDB Dark Matter)" data-controller="midwest-map" data-midwest-map-latitude-value="51.5074" data-midwest-map-longitude-value="-0.1278" data-midwest-map-span-value="0.04" data-midwest-map-map-type-value="MutedStandard" data-midwest-map-color-scheme-value="Dark" data-midwest-map-markers-value="[{"latitude":51.5074,"longitude":-0.1278,"title":"London","color":"#60a5fa","open":true}]" 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="leaflet">
    <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">Leaflet</p>
    </div>
  </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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
  <%# Muted (CartoDB Positron, the default) %>
  <%= midwest_map(
        provider:    :leaflet,
        latitude:    51.5074,
        longitude:   -0.1278,
        span:        0.04,
        map_type:    :muted,
        label:       "London — muted (CartoDB Positron)",
        height:      280,
        markers: [
          Midwest::Map::MarkerData.new(
            latitude:  51.5074,
            longitude: -0.1278,
            title:     "London",
            subtitle:  "United Kingdom",
            color:     "#0f172a"
          )
        ]
      ) %>
  <%# Standard (OpenStreetMap) %>
  <%= midwest_map(
        provider:    :leaflet,
        latitude:    51.5074,
        longitude:   -0.1278,
        span:        0.04,
        map_type:    :standard,
        label:       "London — standard (OpenStreetMap)",
        height:      280
      ) %>
  <%# Satellite (ESRI World Imagery) %>
  <%= midwest_map(
        provider:    :leaflet,
        latitude:    51.5074,
        longitude:   -0.1278,
        span:        0.04,
        map_type:    :satellite,
        label:       "London — satellite (ESRI)",
        height:      280
      ) %>
  <%# Dark (CartoDB Dark Matter, auto color scheme) %>
  <%= midwest_map(
        provider:     :leaflet,
        latitude:     51.5074,
        longitude:    -0.1278,
        span:         0.04,
        color_scheme: :dark,
        label:        "London — dark (CartoDB Dark Matter)",
        height:       280,
        markers: [
          Midwest::Map::MarkerData.new(
            latitude:  51.5074,
            longitude: -0.1278,
            title:     "London",
            color:     "#60a5fa",
            open:      true
          )
        ]
      ) %>
</div>

Leaflet (open-source)

Use provider: :leaflet for a zero-key, open-source map powered by OpenStreetMap and CartoDB tile layers. No API token or account required. Map types map to free tile providers: :muted → CartoDB Positron, :standard → OpenStreetMap, :satellite → ESRI World Imagery. Dark color schemes switch to CartoDB Dark Matter automatically.

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

Annotate a preview to embed its Figma design here:

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