Skip to content

Latest commit

 

History

History
143 lines (108 loc) · 4.49 KB

readme.md

File metadata and controls

143 lines (108 loc) · 4.49 KB
Raw

Waymark JS

Create, share and edit meaningful Maps.

Waymark JS is a JavaScript library for sharing geographical information. It is designed to be easy to use, intuitive and suitable for a wide range of applications.

Originally developed for the Waymark WordPress plugin, Waymark JS is a standalone library that can be used to add interactive Maps to any website.

Powered by Leaflet JS with OpenStreetMap 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 and requires no API keys! ❤️

Documentation / Demo

Demo and and documentation waymark.dev/js

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>:

Important

The dist/ directory in the project root contains the assets ready for production use. The src/ directory contains the source files for development which can be modified and built using the instructions in the Development section below.

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

<!-- Waymark CSS & JavaScript -->
<link rel="stylesheet" href="dist/css/waymark-js.min.css" />
<script src="dist/js/waymark-js.min.js"></script>

Tip

Waymark JS requires the jQuery global to be available before creating a Map. If you are not already using jQuery, you can include it from a CDN as shown above.

Quick Start

Viewer

The following example will display a Map on the page with a single Marker. Once the Marker is clicked, a popup will display with the Marker's title, image and description.

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

    <!-- Stylesheet -->
    <link rel="stylesheet" href="dist/css/waymark-js.css" />

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

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

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

Editor

The following example will display an empty Map Editor on the page, set to an initial location. Any edits made to the Map are converted to GeoJSON and output into the <textarea id="waymark-data"> data container.

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

    <!-- Stylesheet -->
    <link rel="stylesheet" href="dist/css/waymark-js.min.css" />

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

    <!-- Map Data -->
    <textarea id="waymark-data"></textarea>

    <script>
      // Create the Editor
      window.Waymark_Map_Factory.editor().init({
        map_options: {
          // Initial location
          map_init_latlng: [50.6539, -128.0094],
          map_init_zoom: 14,
        },
      });
    </script>
  </body>
</html>

Tip

View the full documentation and examples at waymark.dev/js

Development

Important

To build Waymark JS from source, you will need Node and NPM installed.

# Install dependencies (or pnpm install)
npm install

# Build
grunt

This will run a watch task to rebuild the assets when changes are made to the source files.

Documentation and examples at waymark.dev/js