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! ❤️
Demo and and documentation waymark.dev/js
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.
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>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
Important
To build Waymark JS from source, you will need Node and NPM installed.
# Install dependencies (or pnpm install)
npm install
# Build
gruntThis will run a watch task to rebuild the assets when changes are made to the source files.
Issues / pull requests are welcome, however please view the Roadmap below to see where the project is heading.
Documentation and examples at waymark.dev/js
- Improve file/image upload integration & examples
- Assign default Type key if none provided
- Better handling of no/one Type provided
- jQuery check(/auto include?)
- Use Vite for bundling
- Use ES6 modules
- Remove Factory
- Create NPM package
- Tests
- Rewrite using MapLibre, (Vue/Nuxt?) & TypeScript :)
- Vector Tile support
- Integrate Leaflet too through an adapter?
- Modular (plugins? Nuxt layers?)