0
votes

I'm trying to show a point on a map, using Mapbox v2.2.1, loading GeoJSON from an external URL.

This is my (valid) GeoJSON at the external URL:

{"type": "FeatureCollection", "crs": {"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [{"geometry": {"type": "Point", "coordinates": [-1.837797, 51.5630612]}, "type": "Feature", "properties": {"name": "XXX"}}]}

This is my Mapbox code:

var map = L.map(_this.el.mapPanel).setView([52.905, -1.79], 6);
var layer = L.mapbox.featureLayer().addTo(map);
layer.loadURL('index.geojson');

It produces this error in the console:

Uncaught Error: An API access token is required to use Mapbox.js. See https://www.mapbox.com/mapbox.js/api/v2.2.1/api-access-tokens/

But if I replace the GeoJSON with this Polygon, and change absolutely nothing else, I see the map fine and have no such error:

{"type": "FeatureCollection", "crs": {"type": "name", "properties": {"name": "EPSG:4326"}}, "features": [{"geometry": {"type": "Polygon", "coordinates": [[[-1.717287, 53.892282], [-1.718389, 53.892932], [-1.731335, 53.895751], [-1.731208, 53.902458], [-1.727238, 53.909509], [-1.72721, 53.910182], [-1.739058, 53.912993], [-1.740431, 53.913565], [-1.74562, 53.922989], [-1.755501, 53.921026], [-1.76542, 53.924708], [-1.77286, 53.920875], [-1.777832, 53.923318], [-1.782372, 53.929402], [-1.792652, 53.929282], [-1.794881, 53.929259], [-1.79823, 53.93019], [-1.797494, 53.936473], [-1.812528, 53.938633], [-1.812768, 53.938616], [-1.847686, 53.940759], [-1.848653, 53.936013], [-1.837059, 53.931356], [-1.859205, 53.932452], [-1.862104, 53.940555], [-1.874148, 53.945074], [-1.878879, 53.954261], [-1.865205, 53.955949], [-1.863159, 53.961939], [-1.816728, 53.978126], [-1.826754, 53.98565], [-1.81876, 53.992513], [-1.819522, 53.996404], [-1.83097, 54.003447], [-1.835934, 54.014217], [-1.848041, 54.013658], [-1.853466, 54.028761], [-1.872416, 54.035598], [-1.868666, 54.042038], [-1.873522, 54.046032], [-1.85372, 54.05311], [-1.840588, 54.07057], [-1.86172, 54.08053], [-1.867108, 54.09768], [-1.890997, 54.104408], [-1.903088, 54.119637], [-1.905613, 54.122465], [-1.922694, 54.120356], [-1.949603, 54.126413], [-1.95714, 54.132555], [-1.954226, 54.143099], [-1.963584, 54.152123], [-1.972489, 54.158078], [-1.992542, 54.155272], [-2.004506, 54.172878], [-2.014714, 54.172789], [-2.022833, 54.176767], [-2.034729, 54.175782], [-2.034175, 54.180431], [-2.045783, 54.181874], [-2.05426, 54.194893], [-2.059321, 54.196475], [-2.06087, 54.210319], [-2.087097, 54.220973], [-2.100032, 54.23196], [-2.113456, 54.232558], [-2.128931, 54.225635], [-2.140472, 54.225289], [-2.143837, 54.235031], [-2.150697, 54.232562], [-2.151603, 54.235586], [-2.171947, 54.228473], [-2.1978, 54.247374], [-2.2227, 54.251051], [-2.252139, 54.249343], [-2.263669, 54.245336], [-2.283323, 54.238556], [-2.28641, 54.240492], [-2.295274, 54.230598], [-2.322349, 54.227656], [-2.326568, 54.219405], [-2.346582, 54.207806], [-2.335903, 54.204281], [-2.331138, 54.196719], [-2.342435, 54.202591], [-2.371153, 54.184267], [-2.375355, 54.172772], [-2.396492, 54.166013], [-2.395143, 54.156874], [-2.413738, 54.148732], [-2.42256, 54.140421], [-2.423336, 54.13975], [-2.428328, 54.137193], [-2.427687, 54.131403], [-2.433346, 54.131512], [-2.435743, 54.127997], [-2.444209, 54.129181], [-2.44885, 54.124614], [-2.457026, 54.107992], [-2.450647, 54.103271], [-2.454909, 54.100905], [-2.446719, 54.096654], [-2.455035, 54.091975], [-2.466896, 54.075731], [-2.464, 54.061076], [-2.46956, 54.046204], [-2.458785, 54.040487], [-2.432743, 54.041585], [-2.425835, 54.038086], [-2.37408, 54.04908], [-2.370134, 54.046302], [-2.367106, 54.04421], [-2.362007, 54.040661], [-2.357331, 54.019108], [-2.343548, 54.017318], [-2.339508, 54.009245], [-2.340767, 54.007453], [-2.350296, 54.012191], [-2.352318, 54.010529], [-2.352365, 53.994664], [-2.339931, 53.989417], [-2.333356, 53.990583], [-2.332819, 53.990866], [-2.318822, 53.993711], [-2.29674, 53.980543], [-2.298861, 53.97655], [-2.294326, 53.974422], [-2.234583, 53.981773], [-2.221067, 53.977916], [-2.23202, 53.971218], [-2.225952, 53.967242], [-2.225741, 53.961088], [-2.214424, 53.965087], [-2.209643, 53.962887], [-2.200639, 53.970115], [-2.196023, 53.969564], [-2.193537, 53.961387], [-2.1929, 53.960546], [-2.184527, 53.952252], [-2.179472, 53.945973], [-2.185492, 53.941874], [-2.182285, 53.935377], [-2.175949, 53.934247], [-2.169791, 53.936998], [-2.162079, 53.932611], [-2.16288, 53.927257], [-2.151719, 53.929471], [-2.149436, 53.926015], [-2.141801, 53.925661], [-2.137791, 53.92803], [-2.124621, 53.921894], [-2.10747, 53.908029], [-2.113178, 53.904598], [-2.110456, 53.901096], [-2.10342, 53.891879], [-2.08246, 53.877541], [-2.089918, 53.868168], [-2.081194, 53.869957], [-2.074852, 53.862353], [-2.046133, 53.850127], [-2.045077, 53.838881], [-2.046927, 53.829495], [-2.061253, 53.82562], [-2.033197, 53.8107], [-2.032572, 53.810217], [-2.008762, 53.806589], [-2.001228, 53.80249], [-1.997883, 53.800679], [-1.985191, 53.793532], [-1.985062, 53.79331], [-1.98085, 53.786336], [-1.959717, 53.784254], [-1.950721, 53.785995], [-1.926979, 53.787472], [-1.928546, 53.789784], [-1.920378, 53.796047], [-1.928407, 53.808802], [-1.927052, 53.821297], [-1.937337, 53.823942], [-1.926847, 53.829447], [-1.927134, 53.835649], [-1.923152, 53.836698], [-1.914575, 53.840028], [-1.902122, 53.843975], [-1.90174, 53.843918], [-1.891963, 53.851798], [-1.881425, 53.852899], [-1.869057, 53.860364], [-1.85592, 53.858351], [-1.8571, 53.862202], [-1.85531, 53.862007], [-1.854537, 53.865523], [-1.848966, 53.868395], [-1.840654, 53.876394], [-1.835289, 53.875644], [-1.838583, 53.886102], [-1.817754, 53.899567], [-1.800358, 53.885899], [-1.794959, 53.894613], [-1.787461, 53.896885], [-1.776675, 53.893837], [-1.779522, 53.891176], [-1.776328, 53.890037], [-1.773881, 53.889164], [-1.767297, 53.890201], [-1.752216, 53.88495], [-1.747463, 53.885485], [-1.737736, 53.886634], [-1.729124, 53.885731], [-1.725582, 53.885675], [-1.726747, 53.888192], [-1.717287, 53.892282]]]}, "type": "Feature", "properties": {"ons_code": "E38000001", "name": "NHS Airedale, Wharfedale and Craven", "org_type": "CCG"}}]}

Why am I getting this error? Both versions are valid GeoJSON.

UPDATE: I also see the same error if I do this:

$.getJSON(url, function(data) {
  L.mapbox.featureLayer(data).addTo(map);
});

UPDATE 2: OK, I think I've figured out the problem. I never set my Mapbox access token, and for some reason if you supply a GeoJSON Polygon then Mapbox still renders OK without an access token, but if you supply a GeoJSON Point then it does not!

JS to reproduce the issue:

var map = L.map('map').setView([52.905, -1.79], 6);
var geoUrl = 'https://openprescribing.net/api/1.0/org_location/?org_type=ccg&q=03V';
L.mapbox.featureLayer(geoUrl).addTo(map);

This renders the polygon fine, but replace the URL with https://openprescribing.net/api/1.0/org_location/?org_type=practice&q=A81001 and you get the API token error above.

1
To clarify, "Mapbox" here means "Mapbox.js".Steve Bennett

1 Answers

0
votes

The Mapbox.js documentation is pretty clear: featureLayer.loadURL(url) takes an argument which is a map id. So, it interprets your string, index.geojson as being a Mapbox map ID, and fails because you haven't provided an API key.

It seems weird that it would ever work in the second case.

In any case, it seems you should first fetch the GeoJSON file using JQuery or similar, then call:

L.mapbox.featureLayer(geojson, options)