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

• Release notes on GitHub

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/[email protected]#._.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:

• GeoJSON
• Leaflet
• Lodash.template - bundled
• SuperAgent - bundled

Map tiles:

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

Sources for example data & audio files:

• Freesound
• Commons

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!

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

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