Add GeoJSON-based templated popups to your Leaflet maps -
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
data
dist
example
npm-deprecate
src
.env-example.js
.gitignore
.travis.yml
README.md
index.js
package-lock.json
package.json

README.md

Build status — Travis-CI geojson-popup on Npmjs js-semistandard-style License Total downloads - NPMJS.com

nfreear / geojson-popup

Add GeoJSON-based templated popups to a Leaflet map. See the audio-player example(s).

Easily create interactive maps, with popups containing structured data, for example, audio players.

Read the introductory blog post.

Changelog

Build & test

git clone https://github.com/nfreear/popup-geojson-map geojson-popup
cd geojson-popup
npm install && npm run build && npm test
npm start

Usage

HTML containing a template, with placeholders, title and audio_url

<p id="mapid"></p>

<script type="text/html" id="popup-template">
  <div class="audio-popup">
    <h2><%= title %></h2>
    <audio src="<%= audio_url %>" controls ></audio>
  </div>
</script>

<script> MAP_CFG = { geoJson: '{cdn}/data/world-audio-geo.json' } </script>

<script src="https://unpkg.com/geojson-popup@2.2.0#._.js"></script>

GeoJSON, with properties corresponding to the template placeholders, title and audio_url:

"features": [
  {
    "type": "Feature",
    "properties": {
      "title": "raining on the roof of Jennie Lee Building.wav",
      "audio_url": "https://freesound.org/data/previews/92/92744_1315834-lq.mp3"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [ -0.7110, 52.0241 ]
    }
  }
]

marker-symbol

GeoJSON with marker-symbol, and built in support for Maki icons:

<script>
MAP_CFG = {
  geoJson: 'https://example.org/...charging-map.geo.json',
  icon: 'maki' // 'default', 'maki' or 'div'.
}
</script>
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "fuel",
        "marker-class": "custom",
        "marker-html": "<span>HTML</span>",
        "title": "Estates charging point (7 kW)"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -0.71138, 52.02565 ]
      }
    }
  ]
}

Software & specs:

Map tiles:

Sources for example data & audio files:

Rename

I'm renaming the NPM package from popup-geojson-map to the clearer geojson-popup. (I'll probably re-name the GitHub repo. too.) Sorry for any hassle!



© 2016-2018 Nick Freear, | License: MIT.