# geosearch maps

Free vector maps of the UK: Protomaps tiles in one PMTiles file, read with HTTP range requests. No API key is needed for the map itself. Ask Dan Hartropp (dan@danhartropp.com) to enable your website, localhost included.

Base: `https://maps.danhartropp.com`
- Tiles: `pmtiles://https://maps.danhartropp.com/UK.pmtiles`
- Fonts: `https://maps.danhartropp.com/fonts/{fontstack}/{range}.pbf` (Noto Sans Regular, Medium, Italic)
- Sprites: `https://maps.danhartropp.com/sprites/v4/{flavor}`, where the flavour is light, dark, white, grayscale or black
- Attribution: "© OpenStreetMap contributors, Protomaps"

## MapLibre GL JS

```html
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.12.0/dist/maplibre-gl.css">
<script src="https://unpkg.com/pmtiles@4.5.0/dist/pmtiles.js"></script>
<script src="https://unpkg.com/@protomaps/basemaps@5.7.2/dist/basemaps.js"></script>
<div id="map" style="height:400px"></div>
<script type="module">
import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.12.0/dist/maplibre-gl.mjs';
maplibregl.addProtocol('pmtiles', new pmtiles.Protocol().tile);
const T = 'https://maps.danhartropp.com';
new maplibregl.Map({
  container: 'map', center: [-1.55, 53.80], zoom: 12,
  style: {
    version: 8,
    glyphs: T + '/fonts/{fontstack}/{range}.pbf',
    sprite: T + '/sprites/v4/light',
    sources: { protomaps: { type: 'vector', url: 'pmtiles://' + T + '/UK.pmtiles',
      attribution: '© OpenStreetMap contributors, Protomaps' } },
    layers: basemaps.layers('protomaps', basemaps.namedFlavor('light'), { lang: 'en' }),
  },
});
</script>
```

## Styling

Change colours by overriding flavour keys: `{ ...basemaps.namedFlavor('light'), water: '#9ec5e0', earth: '#f4f1ea' }`. Useful keys: `earth`, `background`, `water`, `park_a`, `park_b`, `wood_a`, `buildings`, `highway`, `major`, `minor_a`, `railway`, `city_label`. Remove points of interest with `.filter(l => l.id !== 'pois')`, or all labels with `.filter(l => l.type !== 'symbol')`.