Skip to content

Getting Started

Prerequisites

  • Bun (latest)
  • Flow (provided via flow-bin in devDependencies)

Installation

bun install

Development Server

Start a local dev server with file watching on port 8082:

bun start

This sets WOOSMAP_ENV=local, watches for source changes, recompiles CSS, and serves at http://localhost:8082.

Build Commands

Command Description
bun run build-dev Development build (dist/*-dev.js)
bun run build-prod Production unminified build (dist/*-unminified.js)
bun run build-prod-min Production minified build (dist/*.js)
bun run watch-prod Watch mode for production build
bun run build-css Compile PostCSS (src/css/map.css to dist/map.css)
bun run build-icons Generate sprite sheets from PNGs

Running Tests

bun run test

Tests run via Karma with Jasmine specs in ChromeHeadless, bundled by Webpack.

To run with Istanbul coverage instrumentation:

DEBUG=yes bun run test

Test files live in src/tests/**/*.spec.js. There is no single-test runner flag — use fdescribe/fit to focus specific tests.

Linting and Type Checking

bun run lint          # ESLint + Flow
bun run eslint src    # ESLint only
bun run flow check    # Flow type check only

CI runs these in order: flow check then eslint src then bun run test.

Using the SDK

Script Tag

<script src="https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&callback=initMap"></script>

Script tag parameters:

Parameter Description
key Your Woosmap API key (required)
callback Function name called when SDK is ready
language Language code for localized content
libraries Comma-separated list: drawing, indoor

Loading Libraries

The drawing library must be loaded via the libraries parameter:

<script src="https://sdk.woosmap.com/map/map.js?key=KEY&libraries=drawing&callback=initMap"></script>

Minimal Example

<!DOCTYPE html>
<html>
<head>
    <style>
        #map { width: 100%; height: 400px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        function initMap() {
            var map = new woosmap.map.Map(document.getElementById("map"), {
                center: {lat: 48.8566, lng: 2.3522},
                zoom: 13,
            });

            var marker = new woosmap.map.Marker({
                position: {lat: 48.8566, lng: 2.3522},
                map: map,
            });
        }
    </script>
    <script src="https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>