---
title: Start Here
description: Create, Edit and Share Meaningful Maps
---

Create, Edit and Share Meaningful Maps

Waymark JS is a JavaScript library for creating and sharing geographical information. It is designed to be easy to use and intuitive, and is suitable for a wide range of applications due to its flexibility and customisation [options](map#map-options).

Powered by [Leaflet JS](https://leafletjs.com/) with [OpenStreetMap](https://www.openstreetmap.org/) as the default Basemap. Waymark JS stores data in GeoJSON format, with support for GPX and KML files.

> Waymark JS is completely free, [Open-Source](https://github.com/OpenGIS/Waymark-JS) and requires **no API key**! ❤️

## Quick Start

Display a Map with a custom Marker.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link
      rel="stylesheet"
      href="https://www.ogis.org/waymark-js/dist/latest/css/waymark-js.min.css"
    />

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://www.ogis.org/waymark-js/dist/latest/js/waymark-js.min.js"></script>
  </head>
  <body>
    <!-- Map Container -->
    <div id="waymark-map"></div>

    <script>
      // Create viewer Instance
      const viewer = window.Waymark_Map_Factory.viewer();

      // Initialise with our options
      viewer.init({
        map_options: {
          // Initial Map Zoom
          map_init_zoom: 16,

          // Our Pub Icon
          marker_types: [
            {
              // The Title is used to create the "pub" Type Key
              marker_title: "Pub",
              marker_icon: "ion-beer",
              marker_colour: "brown",
            },
          ],
        },
      });

      // Load GeoJSON
      viewer.load_json({
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {
              type: "pub",
              title: "The Scarlet Ibis",
              description:
                "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
              image_large_url:
                "https://www.ogis.org/waymark-js/assets/img/pub.jpeg",
            },
            geometry: {
              type: "Point",
              coordinates: [-128.0094, 50.6539],
            },
          },
        ],
      });
    </script>
  </body>
</html>
```

## Installation

To use Waymark JS, you will need to include the following assets in your page. Here we are adding them to the `<head>` of the document so they are immediately available to the `<body>`:

```html
<!-- jQuery (required) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Waymark CSS & JavaScript -->
<link
  rel="stylesheet"
  href="https://www.ogis.org/waymark-js/dist/latest/css/waymark-js.min.css"
/>
<script src="https://www.ogis.org/waymark-js/dist/latest/js/waymark-js.min.js"></script>
```

Alternatively, the `<script>` tags could be placed at the end of the `<body>` to defer loading.

> [!TIP]
> Waymark JS requires the `jQuery` global to be available before creating a Map. If you are not already using [jQuery](https://jquery.com/), you can include it from a CDN as shown above.

## Usage

To display a Map, place an empty `<div>` in the body of your document. If you plan to display just one Map on the page, you can use the default `id` of `waymark-map`.

```html
<!-- Map Container -->
<div id="waymark-map"></div>
```

To initialise the Map, we need to add a `<script>` tag to the document. This should be placed _after_ the Map Container and JS/CSS assets have been included.

Here we are creating a new Viewer Instance, setting some [options](map#map-options), and adding a Marker to the Map.

> [!TIP]
> For multiple Maps, provide the unique `id` for each using the `map_options.map_div_id` [option](map#map-options).

```html
<!-- Map Initialisation -->
<script>
  // Create a Viewer Instance
  const viewer = window.Waymark_Map_Factory.viewer();

  // Initialise with our options
  viewer.init({
    map_options: {
      // Initial Map Zoom
      map_init_zoom: 16,

      // Define a new Type
      marker_types: [
        {
          // The title is used to create the "pub" Type Key
          marker_title: "Pub",
          marker_icon: "ion-beer",
          marker_colour: "brown",
        },
      ],
    },
  });

  // Load a Marker from GeoJSON
  viewer.load_json({
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: {
          // The "pub" Type Key
          type: "pub",
          title: "The Scarlet Ibis",
          description:
            "Great pub, great food! Especially after a Long Ride 🚴🍔🍟🍺🍺💤",
          image_large_url:
            "https://www.ogis.org/waymark-js/assets/img/pub.jpeg",
        },
        geometry: {
          type: "Point",
          coordinates: [-128.0094, 50.6539],
        },
      },
    ],
  });
</script>
```

The above example creates a Viewer Instance and initialises it with a custom Marker Type, defined in the `map_options` [object](map#map-options). The Marker location is loaded from GeoJSON and because the feature has a `type` property of `pub`, it is displayed using the custom Type.

While the `load_json` method only accepts GeoJSON FeatureCollections, Waymark JS includes a GPX and KML parser to [load data](viewer#loading-data) from those formats.

> [!TIP]
> Each Type has a unique Key that is used to identify it (e.g. `pub` in the above example). This is created from the `marker_title` property, so Type Titles should be unique.
