One SDK. Three map platforms.
Write your code once and deploy on any map provider. Switch between platforms without rewriting your application logic.
MapLibre GL JS
Open-source & freeMapbox GL JS
Premium mappingGoogle Maps
Industry standardEverything you need to build
location-based apps
From smart search to custom markers, MapFirst SDK handles the hard parts so you can focus on building great user experiences.
Multi-Platform Maps
One SDK, three map providers. Works seamlessly with MapLibre GL JS, Mapbox GL JS, and Google Maps — switch with a single line of code.
AI-Powered Search
Search properties using natural language. Just type "romantic hotels near the Eiffel Tower with a pool" and let AI do the rest.
React & Vanilla JS
Use the useMapFirst hook in React apps, or drop in a <script> tag for vanilla JavaScript. Full flexibility, zero lock-in.
Smart Filters
Dynamic, interactive filter chips generated from AI search results. Users can toggle, remove, and refine with instant updates.
Rich Property Data
Access ratings, reviews, pricing, images, and awards from TripAdvisor. Everything you need to build compelling property cards.
Responsive & Accessible
Mobile-first design with full keyboard navigation and ARIA support. Beautiful on every screen size, usable by everyone.
Up and running
in minutes
Initialize a map, attach the SDK, and start searching for properties — all with a few lines of code. The useMapFirst hook handles state management, marker rendering, and API calls automatically.
import { useMapFirst } from "@mapfirst.ai/react";
import maplibregl from "maplibre-gl";
function MyMap() {
const { attachMapLibre, state } = useMapFirst({
apiKey: "your-api-key",
initialLocationData: {
city: "Paris",
country: "France",
currency: "EUR",
},
});
useEffect(() => {
const map = new maplibregl.Map({
container: "map",
style: "https://api.mapfirst.ai/static/style.json",
center: [2.3522, 48.8566],
zoom: 12,
});
map.on("load", () => {
attachMapLibre(map, {
onMarkerClick: (property) => console.log(property),
});
});
return () => map.remove();
}, []);
return <div id="map" style={{ height: "100vh" }} />;
}
Three steps to your first map
Go from zero to a fully functional, searchable map in under five minutes.
Install the SDK
Add the packages to your project with npm, pnpm, or yarn.
npm install @mapfirst.ai/react maplibre-glInitialize & Attach
Create a map instance and connect it to MapFirst with one hook call.
const { attachMapLibre } = useMapFirst({ apiKey: "..." });Search & Display
Search properties by location, filters, or natural language — markers appear automatically.
await propertiesSearch({ body: { city: "Paris", ... } });Ready to build something amazing?
Start building intelligent, map-powered applications today. Free to use, open-source, and backed by a growing community.