mapbox.photon
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.
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.