npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

leaflet.photon

v0.9.1

Published

Leaflet plugin to interact with Photon geocoder

Downloads

1,217

Readme

leaflet.photon

This is leaflet plugin for photon.

Sample Usage

Use the map options to create a Photon search control when the map is created:

function myHandler(geojson) {
    console.debug(geojson);
};

var map = L.map('map', {
  photonControl: true,
  photonControlOptions: {
      resultsHandler: myHandler,
      placeholder: 'Try me …',
      position: 'topleft'}
  }
);

Or create a control afterwards:

var searchControl = L.control.photon(photonControlOptions);
searchControl.addTo(map);

Options

  • url URL of the Photon API to use. Default: 'https://photon.komoot.de/api/?'
  • placeholder Placeholder of the search input. Default: "Start typing..."
  • noResultLabel Message to display when no result has been found. Default: "No result"
  • minChar Min char to be typed before actually searching (can be a function that takes the val as parameter and must return a boolean). Default: 3
  • limit Number of results max to return from API. Default: 5
  • submitDelay Min time buffer between to sent request, to avoid too much requests when typing fast (in milliseconds). Default: 300
  • includePosition Whether to include or not the map center as location bias for the search. Default: true
  • bbox Filter results on bounding box array. Default: null
  • feedbackEmail Email to use as feedback link. Set to null to disable the feedback box. Default: "[email protected]"
  • feedbackLabel Message for feedback link. Default: "Feedback"
  • lang land code (en, it, fr…) to send to Photon API. Default: null
  • onSelected Action to run when user select a search result. Default: center map on selected result's latlng
  • osm_tag osm_tag (e.g. 'boundary:administrative') to send to Photon API for filtering. Default: null
  • formatResult Optional function to control the way geojson features are displayed in the results box.
  • formatType Optional function to control the way features types (amenity, school, etc.) are displayed in the default formatResult function.
  • resultsHandler Optional function that will be called when a geojson is retrieved from the API. You way want to use this to display points in the map for instance.
  • location_bias_scale Optional option to control this parameter in the API search calls. From 0 to 1. Default: undefined.

Events

  • focus sent on input focus
  • blur sent on input blur
  • hide sent on result box hide
  • selected sent on result select. Event: {choice: }
  • ajax:send sent when an ajax call is made
  • ajax:return sent when an ajax call is returned