A powerful mapping SDK that provides intelligent property search with AI-powered filters across multiple map platforms. Build sophisticated map-based applications with ease using MapLibre GL JS, Google Maps, or Mapbox GL JS.

• Multi-Platform Support: Seamlessly works with MapLibre GL JS, Google Maps, and Mapbox GL JS
• Smart Search: AI-powered search with natural language queries
• Interactive Filters: Dynamic filter chips with real-time updates
• React & Vanilla JS: Full support for React applications and plain HTML/JavaScript
• TypeScript: Full type safety with comprehensive TypeScript definitions
• Responsive Design: Mobile-first, adapts to any screen size
• Accessible: Full keyboard navigation and ARIA support
• i18n Ready: Built-in internationalization support

This monorepo contains the following packages:

• @mapfirst.ai/core - Core SDK with map adapters for MapLibre, Google Maps, and Mapbox
• @mapfirst.ai/react - React hooks and components including SmartFilter

npm install @mapfirst.ai/react @mapfirst.ai/core

import { useMapFirst, SmartFilter } from "@mapfirst.ai/react";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

function MapComponent() {
  const {
    instance: mapFirst,
    state,
    attachMapLibre,
  } = useMapFirst({
    initialLocationData: {
      city: "Paris",
      country: "France",
      currency: "EUR",
    },
  });

  // Initialize and attach your map
  // Display properties with state.properties
}

<script src="https://unpkg.com/@mapfirst.ai/core@latest/dist/index.global.js"></script>
<script>
  const mapFirst = new MapFirstCore.MapFirstCore({
    initialLocationData: {
      city: "Paris",
      country: "France",
      currency: "EUR",
    },
  });
</script>

Visit our comprehensive documentation at docs.mapfirst.ai

• Getting Started with React
• Getting Started with HTML
• SmartFilter Component
• API Reference
• Examples

This project uses pnpm for package management and is structured as a monorepo.

• Node.js >= 20.0
• pnpm >= 8.0

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run documentation site
cd mapfirst-sdk-docs
pnpm start

mapfirst-sdk/
├── packages/
│   ├── core/          # Core SDK
│   └── react/         # React components and hooks
├── mapfirst-sdk-docs/ # Documentation site (Docusaurus)
└── package.json       # Root workspace configuration

# Build all packages
pnpm build

# Build specific package
cd packages/core && pnpm build
cd packages/react && pnpm build

# Publish core package
pnpm publish:core

# Publish react package
pnpm publish:react

# Publish all packages
pnpm publish:all

Check out our example applications:

• mapfirst-sdk-example - Complete Next.js application with all features
• HTML Example - Vanilla JavaScript implementation

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Website
• Documentation
• NPM - @mapfirst.ai/core
• NPM - @mapfirst.ai/react
• GitHub Issues
• GitHub Discussions

• 📧 Email: support@mapfirst.ai
• 💬 GitHub Discussions
• 🐛 GitHub Issues

Built with:

• MapLibre GL JS
• Mapbox GL JS
• Google Maps Platform
• React
• TypeScript
• Docusaurus

Made with ❤️ by the MapFirst team