New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

geojson-popup

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

geojson-popup

Add GeoJSON-based templated popups to your Leaflet map. See the audio-player example.


Version published
Weekly downloads
8
increased by60%
Maintainers
1
Weekly downloads
 
Created

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.

FAQs

Package last updated on 26 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts