# Leaflet quickstart
Show PinSharing raster map tiles in Leaflet and add address search, in one HTML file.
1. Start with this complete HTML page. Replace `YOUR_KEY` with a key from the dashboard.
```html
```
1. Change the style by replacing `light` with `dark`, `white` or `grayscale`. Each tile counts as 1 tile; a typical view loads about 16 tiles.
1. Add address search to the same page:
```
async function findAddress(text) {
const url = `https://api.pinsharing.com/v1/geocode?q=${encodeURIComponent(text)}&limit=1&key=${KEY}`;
const res = await fetch(url);
if (!res.ok) throw new Error((await res.json()).message);
const [hit] = (await res.json()).features;
if (!hit) return;
const [lon, lat] = hit.geometry.coordinates;
map.setView([lat, lon], 16);
L.marker([lat, lon]).addTo(map).bindPopup(hit.properties.name || text).openPopup();
}
findAddress("Oswego, Illinois");
```
Each lookup counts as 1 geocode. Results may be stored for 30 days on Free, or indefinitely on paid plans.
## Attribution
OpenStreetMap credit is required; the Leaflet snippet above includes it in the tile layer attribution.
## Keys in web pages
Keys used in web pages are visible to visitors. In the dashboard, limit such a key to your websites; keep an unrestricted key on your servers. See [Keys & websites](https://pinsharing.com/docs#keys).
## Next
- [MapLibre GL JS](https://pinsharing.com/docs/maplibre)
- [OpenLayers](https://pinsharing.com/docs/openlayers)
- [AI assistants (MCP)](https://pinsharing.com/docs/mcp)
---
Source: https://pinsharing.com/docs/leaflet · Map data © OpenStreetMap contributors · Index: https://pinsharing.com/llms.txt