geojson-popup

popup-geojson-map.js

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.

Software & specs:

• GeoJSON
• Leaflet.JS
• Lodash or Underscore.js
• SuperAgent

Map tiles:

• Leaflet providers — default / free.
• Mapbox
• National Library of Scotland - Historic Maps

Example data & audio files:

• Freesound
• Commons

Rename

popup-geojson-map geojson-popup json-map-popup

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!

Build & test

npm i popup-geojson-map
npm start
npm test

Usage

<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: 'data/world-audio-geo.json' } </script>

<script src="https://unpkg.com/popup-geojson-map@1.1.0-beta#..js"></script>

GeoJSON:

"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 ]
    }
  }
]

---

• NPM: popup-geojson-map
• GitHub: nfreear/popup-geojson-map
• Gist: nfreear/fd10..

---

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