Rana Maps developers

Beta

Maps on the web

Today: @ranamaps/maps-js 0.1.0-beta.1 is built and tested, not published to npm yet. Ask hello@ranamaps.com for early access.

Coverage: roads cover all of Nigeria once the Nigeria release is deployed (built, not live yet; production is Lagos only today). Lagos has the most street names, places, stops and gates.

Install

One package. There is nothing else to install.

npm i @ranamaps/maps-js

Needs a browser with ES2020 (every current browser).

A page with a map

import { Rana } from "@ranamaps/maps-js";
import "@ranamaps/maps-js/style.css";

const map = new Rana.Map({
  key: "pk_live_...",          // a public key limited to your site's origin
  container: "map",
  style: "day",                // "day", "night" or a style code from Rana Studio
  center: { lat: 6.5244, lng: 3.3792 },
  zoom: 12,
});
// The map shows "© Rana Maps © OpenStreetMap"; it cannot be switched off.

Without a bundler, load it as a module:

<link rel="stylesheet" href="https://unpkg.com/@ranamaps/maps-js@0.1.0-beta.1/dist/style.css">
<div id="map" style="height:400px"></div>
<script type="module">
  import { Rana } from "https://unpkg.com/@ranamaps/maps-js@0.1.0-beta.1/dist/index.js";
  new Rana.Map({ key: "pk_live_...", container: "map" });
  // "© Rana Maps © OpenStreetMap" stays on the map.
</script>

Markers, routes and the camera

const from = { lat: 6.5095, lng: 3.3711 };
const to = { lat: 6.6018, lng: 3.3515 };

map.on("load", async () => {
  map.addMarker(from, { label: "A" });
  map.addMarker(to, { label: "B", color: "#1c7ed6" });
  map.fitPoints([from, to], 60);

  const client = new Rana.RanaClient("pk_live_...");
  const { routes } = await client.directions({ origin: from, destination: to, mode: "okada" });
  if (routes[0]) map.showRoute(routes[0].geometry);
});

map.on("click", (point) => console.log(point.lat, point.lng));
// Directions answers carry "© Rana Maps © OpenStreetMap" too.
Method What it does
setCenter(point), setZoom(z), flyTo({ center, zoom }) Move the camera
getCenter(), getZoom() Read the camera
fitPoints(points, padding) Show every point
setStyle("night") Change the style
addMarker(point, { color, label, title }) A marker; returns one with setPosition and remove
showRoute(geometry or points, { color, width }) A route line; returns one with remove
on("load" | "click" | "moveend" | "error", handler) Events
remove() Remove the map

Notes