Quantcast
Channel: maps for developers - Medium
Viewing all articles
Browse latest Browse all 2230

Mapbox.js v1.6.3: better geocoding integration, improved attribution, and fixes

$
0
0

Mapbox.js v1.6.3 is now available, with better support for geocoding, an updated attribution UI, and code changes that will make coders happy.

Check out the new API documentation and update your sites:

<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js'></script><linkhref='https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.css'rel='stylesheet'/>

Geocoding

Our geocoding web service has been improving fast, so we’re tuning the UI to match.

Mapbox.js’s low-level L.mapbox.geocoder interface now supports multiple placenames as an array and automatically uses the batch geocoding interface to process them in a single request.

varg=L.mapbox.geocoder('http://api.tiles.mapbox.com/v3/username.mapid/geocode/{query}.json');g.query(['austin','houston'],function(err,res){console.log(res);});

Querying ['austin', 'houston'] returns an array of results to use in your application.

[{"query":["austin"],"attribution":{"mapbox-places":"<a href='https:\/\/www.mapbox.com\/about\/maps\/' target='_blank'>&copy; Mapbox &copy; OpenStreetMap<\/a> <a class='mapbox-improve-map' href='https:\/\/www.mapbox.com\/map-feedback\/' target='_blank'>Improve this map<\/a>"},"results":[[{"id":"mapbox-places.78701","bounds":[-98.026183951405,30.067858231996,-97.541547050194,30.489398740398],"lon":-97.804206,"lat":30.278855,"name":"Austin","type":"city"},{"id":"province.1000418602","name":"Texas","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}],[{"id":"mapbox-places.89310","bounds":[-117.80679434924,38.622466995102,-116.59003701732,39.998716879109],"lon":-117.227194,"lat":39.313976,"name":"Austin","type":"city"},{"id":"province.2975076950","name":"Nevada","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}],[{"id":"mapbox-places.16720","bounds":[-78.368774898268,41.39832726178,-77.826147016892,41.736582702219],"lon":-77.988041,"lat":41.567676,"name":"Austin","type":"city"},{"id":"province.2184819983","name":"Pennsylvania","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}],[{"id":"mapbox-places.55912","bounds":[-93.169104983099,43.526714505771,-92.768108016847,43.82098238182],"lon":-92.929212,"lat":43.674029,"name":"Austin","type":"city"},{"id":"province.4222030107","name":"Minnesota","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}],[{"id":"mapbox-places.72007","bounds":[-92.120394979369,34.907955633164,-91.838942016876,35.076324303227],"lon":-92.004189,"lat":35.036604,"name":"Austin","type":"city"},{"id":"province.3855330187","name":"Arkansas","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}]]},{"query":["houston"],"attribution":{"mapbox-places":"<a href='https:\/\/www.mapbox.com\/about\/maps\/' target='_blank'>&copy; Mapbox &copy; OpenStreetMap<\/a> <a class='mapbox-improve-map' href='https:\/\/www.mapbox.com\/map-feedback\/' target='_blank'>Improve this map<\/a>"},"results":[[{"id":"mapbox-places.77002","bounds":[-95.720458982945,29.528915261206,-95.061201018565,30.040369645345],"lon":-95.436742,"lat":29.784969,"name":"Houston","type":"city"},{"id":"province.1000418602","name":"Texas","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}],[{"id":"mapbox-places.38851","bounds":[-89.138252983117,33.79659653948,-88.791614114357,34.045110442751],"lon":-88.976638,"lat":33.920944,"name":"Houston","type":"city"},{"id":"province.788686416","name":"Mississippi","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}],[{"id":"mapbox-places.55943","bounds":[-91.73075598294,43.630618500142,-91.392928018125,43.933747469141],"lon":-91.553669,"lat":43.782375,"name":"Houston","type":"city"},{"id":"province.4222030107","name":"Minnesota","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}],[{"id":"mapbox-places.65483","bounds":[-92.088466979783,37.205003976875,-91.841178018183,37.429956007523],"lon":-91.92426,"lat":37.317564,"name":"Houston","type":"city"},{"id":"province.3294535744","name":"Missouri","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}],[{"id":"mapbox-places.35572","bounds":[-87.399124897841,34.06685573423,-87.204290047982,34.300837420778],"lon":-87.264654,"lat":34.183928,"name":"Houston","type":"city"},{"id":"province.2667756795","name":"Alabama","type":"province"},{"id":"country.4150104525","name":"United States","type":"country"}]]}]

The control interface to geocoding is improved too: alternative positions, like topright or bottomleft now rearrange the UI to fit properly.

map.addControl(L.mapbox.geocoderControl('username.mapid',{position:'topright'}));

Attribution

In an effort to feature our map sources better, Mapbox.js now displays attribution information expanded by default instead of collapsed behind a button icon. This is the intended attribution for any map of regular to large screen size. This is particularly designed to feature one of our most important map sources, OpenStreetMap, better. The default content of the attribution control continues to feature an Improve This Map link designed to help map users quickly update map data where needed.

The L.mapbox.infoControl API is still available as an option for maps with long attribution or smaller viewports:

varmap=L.mapbox.map('map','examples.map-8ced9urs'{attributionControl:false,infoControl:true});

API Improvements and Bugfixes

This release also includes numerous documentation improvements and bugfixes: chief amongst them a fix for vector layers in IE8.

We’re now exposing traditional constructors from the Mapbox.js interface. Leaflet’s pattern is that each object can be initialized with new or without:

// traditional constructorvara=newL.LatLng(0,0);// 'magic' constructor'varb=L.latLng(0,0);

Previously, Mapbox.js only exposed the latter form: for instance, L.mapbox.tileLayer never requires new. In 1.6.3, we’re including both: L.mapbox.TileLayer is exposed in the API as well. Why would you want this change? With traditional constructors, you can use Leaflet’s L.Class function to add new functionality into existing code.


To read the full list of changes, check out the changelog on GitHub.


Viewing all articles
Browse latest Browse all 2230

Trending Articles