Web Maps
You want to add a map to your web app - let users search for an address, build a route and see it drawn on screen. PickPoint handles the hard parts: geocoding the typed address, calculating the optimal route, and returning the geometry ready to render. You choose the map library that fits your stack.
The most widely used JavaScript mapping library. No build step, loads from CDN in one line, excellent mobile touch support. Ideal when you need a working map quickly.
- Zero dependencies, 42 KB gzipped
- Familiar API, massive ecosystem of plugins
- OSM raster tiles - free, no account needed
- Works in every browser including IE 11
WebGL-powered vector map renderer - crisp at every zoom level, smooth 60fps animations. Open-source fork of Mapbox GL JS with an MIT licence and no proprietary dependency.
- Vector tiles - sharp on retina and 4K displays
- Data-driven styling, 3D terrain, smooth pitch/bearing
- GeoJSON sources update without layer rebuilds
- OpenFreeMap tiles - free, no API key required
What both tutorials build
Debounced search input calling GET /v2/address/search with the visible map bounds as bbox. Results appear in a dropdown; selecting one drops a destination marker.
POST /v2/route with origin (your geolocation) and destination. The response includes trip.legs[0].shape - an array of [lat, lon] pairs ready to draw.
Leaflet: L.polyline(shape). MapLibre: flip coordinates to [lon, lat] for GeoJSON and call source.setData() - the layer updates without recreation.
Subscribe to PickPoint's WebSocket tracking API with your API key to receive location:added events and move a vehicle marker in real time.
[latitude, longitude] - PickPoint's shape array is directly usable. MapLibre uses [longitude, latitude] (GeoJSON order), so you flip each point before passing to setData(). PickPoint's geocoding endpoints always return named lat / lon string fields - no coordinate-order ambiguity there.Geocoding guideRouting guideDevice TrackingNavigator App (mobile)