Skip to content

Add GeoJSON-based templated popups to your Leaflet maps -

Notifications You must be signed in to change notification settings

nfreear/popup-geojson-map

Repository files navigation

Node.js CI 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.4.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-2021 Nick Freear, | License: MIT.