Narcissistic, Perfectly Modest

    @watergis/mapbox.photon
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    mapbox.photon

    badge badge badge badge GitHub

    This module adds control for Photon geocoder.

    This plugin was inspired from leaflet.photon repository.

    Installation

    npm i @watergis/mapbox.photon --save

    Demo

    Try codesandbox.

    See demo.

    demo

    Usage

    • note

    This plugin uses komoot's photon API (https://photon.komoot.io/api) as default. However, please consider to have your own photon API if you want to use geocoding heavily in order to avoid many traffics for komoot server.

    • for geocoding
    import MapboxPhotonGeocoder from "@watergis/mapbox.photon";
    import '@watergis/mapbox.photon/css/styles.css';
    import mapboxgl from 'mapbox-gl';
    
    const map = new mapboxgl.Map();
    map.addControl(new MapboxPhotonGeocoder({
        placeholder: 'Start typing...',
        minChar: 3,
        limit: 5,
        submitDelay: 300,
        noResultLabel: 'No result',
        feedbackUrl: 'https://github.com/komoot/photon/issues',
        feedbackLabel: 'Feedback',
        // default adds a popup, but you may change the behaviour when the POI was selected.
        onSelected: function(choice) {
          console.log(choice);
        },
        // if you want to customise geocoding function
        doSearch: function(query, callback) {
          console.log(query);
        }
      },
      {
        url: 'https://photon.komoot.io/api?',
        limit: 5,
        // if you want to filter by osm_tag parameter
        osm_tag: 'tourism',
        lang: 'ja',
        bbox: [], //specify minx, miny. maxx, maxy if you want to filter by particular area
        includePosition: true,
        location_bias_scale: 0.2
      },
      {
        // after creating a popup, it will zoom to this default zoom level
        popupZoomLevel: 14,
        // if you want to custmize popup content's html
        createContent: function(feature) {
          return feature.properties.name
        },
      }
    }), 'top-left');
    • for reverse geocoding
    import { PhotonReverse } from "@watergis/mapbox.photon";
    
    const recverse = new PhotonReverse();
    const result = await recverse.reverse(35.8664039, -1.0861514);
    console.log(result);

    Development

    npm run lint # check styling of source code
    npm run lint:fix # fix styling by eslint
    npm run serve

    open http://localhost:8080.

    If there are any changes on source code, it will be reflected automatically.

    Build package

    npm run build

    The modules will be generated under dist folder.

    Deploy to Github pages

    npm run deploy

    It will deploy files under example folder to gh-pages.

    How to release

    vi package.json
    # update version in package.json
    git add package.json
    git commit -m "v1.X.X"
    git push origin main
    git tag v1.X.X main
    git push --tag
    # release CI will create draft release in Github pages, then publish it if it is ready.
    # publish CI will deploy npmjs and Github Packages.

    Contribution

    This Mapbox GL Photon Control is still under development. so most welcome any feedbacks and pull request to this repository.

    Install

    npm i @watergis/mapbox.photon

    DownloadsWeekly Downloads

    8

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    60.1 kB

    Total Files

    28

    Last publish

    Collaborators

    • j_igarashi