src/pages/index.mdx

---
title: Apache Baremaps
---

import Link from 'next/link';
import Image from 'next/image';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faListCheck,
  faVectorSquare,
  faEarthAmericas,
  faPeopleGroup,
  faFillDrip
} from '@fortawesome/free-solid-svg-icons';
import Map from '@/components/map';
import { Features, Feature } from '@/components/features';
import { IconTitle } from '@/components/titles/IconTitle';
import { Copyright } from '@/components/Copyright';

import styles from './index.module.css';

export function OSMCopyright() {
  return (
    <Copyright
      copyrights={[
        {
          name: 'OpenStreetMap',
          url: 'https://www.openstreetmap.org/'
        }
      ]}
    />
  );
}

<div className="home-content">
  <div className="content-container">
    <h1 className="headline">Apache Baremaps</h1>
    <h2 className="title">Mapping Infrastructure Made Easy</h2>
    <div className="subtitle">
      Apache Baremaps is a toolkit and a set of infrastructure components{' '}
      <br className="sm:block hidden" /> for creating, publishing, and operating
      online maps.
    </div>
    <div className="subtitle">
      <Link href="/documentation" className={styles.cta}>
        Get started <span>→</span>
      </Link>
    </div>
  </div>
  <div className="features-container">
    <div className="content-container">
      <Features>
        <Feature index={0} centered>
          <IconTitle icon={faVectorSquare}>
            <h3>Vector Tiles</h3>
          </IconTitle>
          <div>
            Baremaps allows you to easily serve and publish custom vector tiles
            from PostGIS. Whether you need to create maps for web or mobile
            applications, Baremaps makes it simple and efficient. Additionally,
            we are continuously working on developing a high-quality base map.
          </div>
        </Feature>
        <Feature index={1} squareLarge>
          <Link href="/map" className={styles['demo-link']}>
            <h3>Explore the map ↗</h3>
            <p>Click to view the map</p>
          </Link>
          <OSMCopyright />
          <Image
            src="/images/map_eu.png"
            alt="Baremaps Map"
            loading="eager"
            layout="fill"
            objectFit="cover"
          />
        </Feature>
        <Feature index={2} centered>
          <IconTitle icon={faListCheck}>
            <h3>Data Pipeline</h3>
          </IconTitle>
          <div>
            With Baremaps, you can easily create custom data pipelines to
            consolidate your spatial datasets in PostGIS. Baremaps supports
            several popular formats such as OsmPbf, ShapeFile, GeoPackage, and
            FlatGeoBuf, allowing you to seamlessly integrate with your existing
            workflows.
          </div>
        </Feature>
        <Feature
          index={3}
          large
          style={{ height: 450 }}
          href="/documentation/developer-manual/basemap"
        >
          <OSMCopyright />
          <Image
            src="/images/map_styles.png"
            alt="Baremaps Map Styles"
            loading="eager"
            layout="fill"
            objectFit="cover"
          />
        </Feature>
        <Feature index={4} centered>
          <IconTitle icon={faFillDrip}>
            <h3>Themes</h3>
          </IconTitle>
          <div>
            Baremaps provides a set of themes that can be used to style your
            maps. The themes are customizable and can be easily integrated into
            your existing applications. With hot reloading, you can quickly
            iterate on your design and see the results in real-time.
          </div>
        </Feature>
        <Feature index={5} centered>
          <IconTitle icon={faEarthAmericas}>
            <h3>Geocoder</h3>
          </IconTitle>
          <div>
            Baremaps provides a geocoder that allows you to search for places
            and addresses. The geocoder is based on the GeoNames database and
            can be easily integrated into your existing applications. We are
            working on adding more features and improving the quality of the
            results.
          </div>
        </Feature>
        <Feature
          index={6}
          large
          style={{ height: 450 }}
          href="/documentation/examples/geocoding"
        >
          <OSMCopyright />
          <Image
            src="/images/geocoder.gif"
            alt="Baremaps Geocoder Demo"
            loading="eager"
            layout="fill"
            objectFit="cover"
            objectPosition="0% 0%"
          />
        </Feature>
        <Feature
          index={7}
          large
          style={{ height: 450 }}
          href="https://github.com/apache/incubator-baremaps/blob/main/CONTRIBUTING.md"
        >
          <OSMCopyright />
          <Image
            src="/images/map_vector_view.png"
            alt="Baremaps Map Vector View"
            loading="eager"
            layout="fill"
            objectFit="cover"
          />
        </Feature>
        <Feature index={8} centered>
          <IconTitle icon={faPeopleGroup}>
            <h3>Contributing</h3>
          </IconTitle>
          <div>
            Whether you're an experienced or just getting started, there are
            many ways to get involved. We are experimenting with a range of new
            components, including IP to location, 3D Tiles Next, and geocoding,
            and would love your help. Let's create something amazing together!
          </div>
        </Feature>
      </Features>
    </div>
  </div>
</div>

<style jsx>{`
  .content-container {
    max-width: 90rem;
    padding-left: max(env(safe-area-inset-left), 1.5rem);
    padding-right: max(env(safe-area-inset-right), 1.5rem);
    margin: 0 auto;
  }
  .features-container {
    margin: 8rem 0 0;
    padding: 4rem 0;
    background-color: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
  }
  .features-container .content-container {
    margin-top: -8rem;
  }
  :global(.dark) .features-container {
    background-color: #000;
    border-bottom: 1px solid rgb(38, 38, 38);
  }
  .headline {
    display: block;
    font-size: 3.125rem;
    font-size: min(4.375rem, max(8vw, 2.5rem));
    font-weight: 3;
    font-feature-settings: initial;
    letter-spacing: -0.12rem;
    margin-left: -0.2rem;
    margin-top: 3.4rem;
    line-height: 1.1;
  }
  .title {
    display: block;
    font-size: 3.125rem;
    font-size: min(4.375rem, max(8vw, 2.5rem));
    font-weight: 700;
    font-feature-settings: initial;
    letter-spacing: -0.12rem;
    margin-top: 1rem;
    margin-left: -0.2rem;
    line-height: 1.1;
  }
  .subtitle {
    margin-top: 1.5rem;
    font-size: 1.3rem;
    font-size: min(1.3rem, max(3.5vw, 1.2rem));
    font-feature-settings: initial;
    line-height: 1.6;
  }
  .nextjs-link {
    color: currentColor;
    text-decoration: none;
    font-weight: 600;
  }
  @media screen and (max-width: 1200px) {
    .headline {
      letter-spacing: -0.08rem;
    }
  }
`}</style>