Press "Enter" to skip to content

jQuery Plugin To Create Your Own Text Tracking Map | storymap

Storymap is a jQuery plugin for creating your own text tracking map. Annotate each paragraph and place a map next to it. Then you can zoom in / pan / add marker etc to the map while the reader reads the text.

jquery mapael examples, js map plugin, create map in jquery, javascript clickable map

Storymap expects some (fairly common) js libs to be available:

  • jQuery (because it’s a jQuery plugin)
  • undercore.js (because it makes js easier to work with)
  • brochure (because we need a map)

Additionally, the tags are based on Bootstrap 3.

How to make use of it:

1. Add the jQuery library and other resources to the document.

<link rel="stylesheet" href="//">

<script src="//"></script>
<script src="//"></script>
<script src="//"></script>

2. Add the jQuery Story Map plugin after the jQuery library.

<script src="storymap.js"></script>

3. Explains paragraphs using the data place attribute.

<div class="main">

<section data-place="overview">



<section data-place="oslo">



<section data-place="kristiansand">





4. Call the plugin on the parent element to initialize the plugin and set the tag information using the markers object.

<script type="text/javascript">
(function () {
'use strict';

var markers = {
oslo: {lat: 59.92173, lon: 10.75719, zoom: 7},
trondheim: {lat: 63.4319, lon: 10.3988, zoom: 7},
bergen: {lat: 60.3992, lon: 5.3227, zoom: 7},
tromso: {lat: 69.632, lon: 18.9197, zoom: 7},
kristiansand: {lat: 58.17993, lon: 8.12952, zoom: 7},
stavanger: {lat: 58.9694, lon: 5.73, zoom: 7},
bodo: {lat: 67.28319, lon: 14.38565, zoom: 7}

$('.main').storymap({markers: markers});

5. Default settings.

selector: '[data-place]', // jquery for selectors to trigger an event
breakpointPos: '33.333%', // position of the breakpoint
createMap: function () {
    // create a map in the "map" div, set the view to a given place and zoom
    var map ='map').setView([65, 18], 5);

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'

    return map;

create a map that follows the text using jquery, storymap js Plugin/Github

See Demo And Download

Official Website(atlefren): Click Here

This superior jQuery/javascript plugin is developed by atlefren. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.