# BeMap JS API

BeNomad's maps, routes and electric-mobility services in the browser, on MapLibre, Leaflet or OpenLayers.

One SDK · three map engines · maps, routing, geocoding & EV, by [BeNomad](https://www.benomad.com) · release 2.0.4

## What's inside

- **Maps**: MapLibre GL vector tiles, Leaflet & OpenLayers raster; 3D buildings, terrain, globe projection
- **Geometry**: markers (icons, labels, clustering, drag), polylines, polygons, circles, popups
- **Routing**: multi-stop, alternatives, route sheets, trace-route
- **EV**: smart routing, charging stations, reachable area, charging-time, vehicle catalogue
- **Geocoding**: forward, reverse, address autocomplete, isochrones / reachable zones
- **BeNomad Tiles**: JWT-secured PMTiles with configurable auth (cookie / header / query); 200-slice reads the browser HTTP-caches natively (Service Worker optional, only for classic 206-range); self-healing cache + timeout/retry gate; survives tileset rebuilds automatically (per-map `?v=` version tokens + ETag guard, no blank maps, no cache clears)
- **One API, three engines**: same `Context`, same calls, just change the map class
- **Credential-less production mode**: the `proxy` option keeps your BeMap login/password on **your** server; the browser holds nothing to steal

## Add a map

The map pages' samples, one per engine: BeNomad Tiles on MapLibre, WMS on Leaflet and OpenLayers, each run against production as published.

### MapLibre · BeNomad Tiles

```html
<!-- The BeMap JS API and the engine it drives -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/maplibre-gl.css" integrity="sha256-qx5w1Z7EBGW65+cDDaLzzPKBM/1QLmK9WY7vut/XpzI=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/bemap-js-api.css" integrity="sha256-6JTuf+5yR2uKDbRMVCKVkicMghqX/fopHJUUH0a9IwE=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/maplibre-gl.js" integrity="sha256-RamwepGJzlYFTGIKlHzPQeKR5YyV6bYVM7dAqqZe5cs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/pmtiles.js" integrity="sha256-9c3A9bJWe6KCmo4QL39UNh8Ig9oxFaFuxcqQlz8sz2c=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/bemap-js-api.min.js" integrity="sha256-9nw1Dpfl6zDEakYlPDODJHrz9RvsqjZ+HttOFJNJMss=" crossorigin="anonymous"></script>

<div id="map" style="height: 480px"></div>
<script>
  var ctx = new bemap.Context({
    host: 'bemap.benomad.com', secure: true,
    login: 'YOUR_ACCOUNT', password: 'YOUR_API_KEY', // for evaluation: in production, use the proxy option
    tilesHost: 'mptiles-api.benomad.net'
  });
  var map = new bemap.MapLibreMap(ctx, 'map');
  map.move(2.35, 48.85, 12); // longitude, latitude, zoom
</script>
```

### Leaflet · WMS

```html
<!-- The BeMap JS API and the engine it drives -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/leaflet.css" integrity="sha256-M3v8pcq9A7OYFbJwD+vis7ft9VkhxZzUn4jssyghIwM=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/bemap-js-api.css" integrity="sha256-6JTuf+5yR2uKDbRMVCKVkicMghqX/fopHJUUH0a9IwE=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/bemap-js-api.min.js" integrity="sha256-9nw1Dpfl6zDEakYlPDODJHrz9RvsqjZ+HttOFJNJMss=" crossorigin="anonymous"></script>

<div id="map" style="height: 480px"></div>
<script>
  var ctx = new bemap.Context({
    host: 'bemap.benomad.com', secure: true,
    login: 'YOUR_ACCOUNT', password: 'YOUR_API_KEY', // for evaluation: in production, use the proxy option
    // Leaflet needs the geoserver named: one of your account's that draws maps
    // (new bemap.AclService(ctx).getCurrentUserDetails() lists your account's).
    geoserver: 'YOUR_GEOSERVER'
  });
  new bemap.LeafletMap(ctx, 'map').defaultLayers().move(2.35, 48.85, 12);
</script>
```

### OpenLayers · WMS

```html
<!-- The BeMap JS API and the engine it drives -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/ol.css" integrity="sha256-q8iv1yzBC9KcwUP0Q7rkpoBL08s/smLmtqa8bJJOo08=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/bemap-js-api.css" integrity="sha256-6JTuf+5yR2uKDbRMVCKVkicMghqX/fopHJUUH0a9IwE=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/ol.js" integrity="sha256-Dcmd21j13KXnaK0AJdTIZCvP9hb46nhNtYAdlq3f63o=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist/bemap-js-api.min.js" integrity="sha256-9nw1Dpfl6zDEakYlPDODJHrz9RvsqjZ+HttOFJNJMss=" crossorigin="anonymous"></script>

<div id="map" style="height: 480px"></div>
<script>
  var ctx = new bemap.Context({
    host: 'bemap.benomad.com', secure: true,
    login: 'YOUR_ACCOUNT', password: 'YOUR_API_KEY' // for evaluation: in production, use the proxy option
  });
  new bemap.OlMap(ctx, 'map').defaultLayers().move(2.35, 48.85, 12);
</script>
```

Each loads the release from `https://cdn.jsdelivr.net/gh/BeNomadSAS/bemap-js-api@2.0.4/dist`, pinned by this site. You can also copy the release's `dist/` folder into your application.

## Across the products

- **Routing**: [Route calculation](https://benomad.com/dev/doc/bemap-api/routing/route-calculation.md): [Routing](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/routing.html), [Isochrone](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/routing-isochrone.html) · [Trace route](https://benomad.com/dev/doc/bemap-api/routing/traceroute.md): [TraceRoute](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/traceroute.html)
- **Electric mobility**: [EV smart routing](https://benomad.com/dev/doc/bemap-api/electric-mobility/ev-smart-routing.md): [EV Smart Routing](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/ev-smart-routing.html) · [EV reachable area](https://benomad.com/dev/doc/bemap-api/electric-mobility/ev-reachable-area.md): [EV Reachable Area](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/ev-reachable-area.html) · [Charging stations](https://benomad.com/dev/doc/bemap-api/electric-mobility/charging-stations.md): [Charging Stations](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/charging-stations.html) · [Charging time and cost](https://benomad.com/dev/doc/bemap-api/electric-mobility/charging-time-cost.md): [Charging Time](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/charging-time.html) · [Electric vehicle database](https://benomad.com/dev/doc/bemap-api/electric-mobility/ev-vehicles.md): [EV Vehicles](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/ev-vehicles.html)
- **Search**: [Geocoding](https://benomad.com/dev/doc/bemap-api/search/geocoding.md): [Geocoder](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/geocoder.html), [Autocomplete](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/autocomplete.html), [GeoAutocomplete](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/geo-autocomplete.html) · [Reverse geocoding](https://benomad.com/dev/doc/bemap-api/search/reverse-geocoding.md): [Reverse Geocoder](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/reverse-geocoder.html) · [Near POI](https://benomad.com/dev/doc/bemap-api/search/near-poi.md): [Near POI](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/near-poi.html)
- **Maps**: [BeNomad Tiles](https://benomad.com/dev/doc/bemap-api/maps/tiles.md): [BeNomad Tiles (live demo)](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-example-bemap-tiles.html), [3D & Globe](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-example-maplibre-3d.html), [Style: custom JSON](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-example-maplibre-custom-style.html), [Style picker (server styles)](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-services-v2/style-picker.html) · [WMS](https://benomad.com/dev/doc/bemap-api/maps/wms.md): [Basic map](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-example-00.html), [Clustering (Leaflet, with shapes)](https://benomadsas.github.io/bemap-js-api/examples/index.html#nav-example-leaflet-00.html)

## Examples and reference

- [Live demo dashboard](https://benomadsas.github.io/bemap-js-api/): every feature, runnable, with the code to copy
- [Examples gallery](https://benomadsas.github.io/bemap-js-api/examples/index.html): one page per feature, on each engine
- [API reference](https://benomadsas.github.io/bemap-js-api/dist/doc/index.html): every class and method, generated from the library
- [The source on GitHub](https://github.com/BeNomadSAS/bemap-js-api): the library, its changelog and its install guide

## Flutter

The same services from a Dart and Flutter application: ask your BeNomad contact.

## Third-party software

The BeMap JS API 2.0.4 draws its maps with these libraries, which this site serves with it, each under its own licence:

- [MapLibre GL JS 5.24.0](https://benomad.com/dev/doc/bemap-api/assets/bemap-js-api/licenses/maplibre-gl.txt)
- [Leaflet 1.9.4](https://benomad.com/dev/doc/bemap-api/assets/bemap-js-api/licenses/leaflet.txt)
- [OpenLayers 10.8.0](https://benomad.com/dev/doc/bemap-api/assets/bemap-js-api/licenses/ol.txt)
- [PMTiles 4.3.2](https://benomad.com/dev/doc/bemap-api/assets/bemap-js-api/licenses/pmtiles.txt)