This page demonstrates all the available marker colors you can use with the Map component.

Sometimes you want to display a map as a static image without any interactivity. This is perfect for decorative maps or when you want to maintain focus on the content.

Basic Locked Map

This map shows Central Park in New York City but is completely non-interactive.

Locked Map With No Attribution

This map removes both interactivity and the attribution text for a cleaner look.

Locked Map With Markers

Even locked maps can display markers - this one shows key locations in San Francisco.

Interactive Version For Comparison

Here’s the same San Francisco map, but interactive for comparison:

Standard Colors

Extended Colors

Using Hex Colors

You can also use hex color codes for complete flexibility:

Animated Markers

Here are examples of animated markers with different colors:

Mixed Tooltips example - Some With Names, Some Without

This example shows that you can mix markers with and without tooltips.

---

Map Component for Astro.js

This guide will help you set up and use the Map component in your Astro.js blog.

Prerequisites

1. An Astro.js project
2. React integration installed in your Astro project
3. A Stadia Maps API key

Installation Steps

1. Install dependencies

# If you haven't set up React integration yet
npx astro add react

# Install Leaflet as a dependency
npm install leaflet

2. Create the component

Create a new file at src/components/Map.jsx and copy the Map component code into it.

3. Get a Stadia Maps API key

1. Go to Stadia Maps and sign up for an account
2. Create an API key in your dashboard
3. Replace YOUR_STADIA_API_KEY in the component with your actual API key

Usage Examples

Basic Map

<Map lat={51.505} lng={-0.09} client:load />

Custom Shape and Style

<Map lat={40.7128} lng={-74.006} zoom={14} shape="long" style="stamen_watercolor" client:load />

Single Marker

<Map
  lat={48.8566}
  lng={2.3522}
  markers={[
    {
      lat: 48.8566,
      lng: 2.3522,
      color: 'red',
      animate: true
    }
  ]}
  client:load
/>

Multiple Markers

<Map
  lat={37.7749}
  lng={-122.4194}
  zoom={12}
  style="stamen_terrain"
  markers={[
    { lat: 37.7749, lng: -122.4194, color: 'blue', animate: false },
    { lat: 37.7694, lng: -122.4862, color: 'green', animate: true },
    { lat: 37.8087, lng: -122.4098, color: 'red', animate: false }
  ]}
  client:load
/>

Props Reference

Prop	Type	Default	Description
lat	Number	51.505	Latitude for the center of the map
lng	Number	-0.09	Longitude for the center of the map
zoom	Number	13	Initial zoom level
width	String	’100%‘	Width of the map container
height	String	’400px’	Height of the map container
shape	String	’square’	Preset shape (‘square’, ‘long’)
style	String	’stamen_toner’	Map style (‘stamen_toner’, ‘stamen_terrain’, ‘stamen_watercolor’, ‘stamen_outdoors’)
markers	Array	[]	Array of marker objects
locked	Boolean	false	Whether the map is interactive or not
showAttribution	Boolean	true	Whether to show the attribution credits

Marker Object Properties

Property	Type	Default	Description
lat	Number	Map center lat	Latitude for the marker
lng	Number	Map center lng	Longitude for the marker
color	String	’blue’	Marker color - supports named colors (‘red’, ‘blue’, ‘green’, ‘yellow’, ‘black’, ‘white’, ‘orange’, ‘purple’, ‘teal’, ‘pink’, ‘gray’) or hex values
animate	Boolean	false	Whether the marker should have a pulsing animation
name	String	null	Optional name to display when hovering over the marker

Important Notes

1. Remember to add client:load to the component when using it in Astro
2. The component will dynamically load Leaflet from CDN if it’s not already loaded
3. Set proper dimensions based on your blog layout
4. Consider adding popups or tooltips to markers if needed for additional information