I'm currently using tilemaker https://github.com/systemed/tilemaker/blob/master/docs/CONFIGURATION.md to generate mbtiles from osm pbf files.
I'm setting, in the config file, the parameter include_ids to true to generate in each mbtiles object (node or way) the original osm ID.
"settings": {
"include_ids": true,
...
}
What I don't understand so far is that the ID which is generated by Tilemaker is actually not the original OSM ID, that I can fetch via obj:Id()
Is there any reason why tilemaker ID generated via the 'include_ids = true` is actually not the expected osm id from the initial source ?
I'm using queryRenderedFeatures from maplibre to verify the content of my mbtiles, and for instance I have
[
{
"type": "Feature",
"properties": {
"osm_id": "4349756002",
"name:latin": "Gilgamesch",
},
"id": 1103861383778,
"layer": {
"id": "poi",
"type": "symbol",
"source": "openmaptiles",
"source-layer": "poi",
"metadata": {},
"minzoom": 15.5,
"layout": {
"text-font": [
where "osm_id": "4349756002" is the real node id from OSM (that I'm manually getting from obj:Id() from the pbf) and "id": 1103861383778 is the one generated by tilemaker. I can confirm that the expected osm id is https://nominatim.openstreetmap.org/ui/details.html?osmtype=N&osmid=4349756002
Anyone able to shed a light on what I'm doing wrong? Curious if there is mask to apply to go from 1103861383778 to `4349756002``
The task I need is:
input: geolocation coordinates from gps, radius
ouput: list of pois (just names) to user can choose
just need analogue for google nearby search (since their cost is too high for a production)
questions:
1) what API is more preferable for this? examples are appreciated
2) do I need own data for pois or there is build in date in mapbox for these purposes?
The Mapbox Tilequery API lets you do exactly this. Here is a step-by-step tutorial explaining how to work with this API, and this API playground lets you experiment with the API. The data queried by the API is determined by the tileset passed as a parameter to your API request. As noted in the linked documentation, tutorial, and playground, you can either use existing Mapbox tilesets are create your own tileset with custom data, depending on your use case.
Note that, depending on the structure of the underlying data in the tileset you use, you might need to do a little extra work to convert a feature returned by the Tilequery API into a name of a POI. For example, consider the response body for below API request which makes use of the default mapbox.mapbox-streets-v8 tileset:
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/tilequery/-93.1204,44.9472.json?radius=25&limit=5&dedupe&access_token=YOUR_MAPBOX_ACCESS_TOKEN
One particular feature returned by the response body is:
{
"type": "Feature",
"id": 4,
"geometry": {
"type": "Point",
"coordinates": [
-93.12041537130386,
44.947199821761615
]
},
"properties": {
"extrude": "true",
"height": 3,
"min_height": 0,
"type": "house",
"underground": "false",
"tilequery": {
"distance": 1.2132887872688276,
"geometry": "polygon",
"layer": "building"
}
}
}
Although there is no POI name here, you could use the returned coordinates in conjunction with the Mapbox reverse geocoding API endpoint to retrieve names and other relevant POI properties for the POI located at said coordinate.
conversation with Mapbox support
Hi Artemii,
It's Alex from Mapbox Support, happy to help!
You will want to use the Mapbox Tilequery API. The option you will want to utilize is radius. Please be advised that queries will use tiles from the maximum zoom of the tileset, and will only include the intersecting tile plus eight surrounding tiles when searching for nearby features. That means that if your tileset has a maximum extent of z20, the maximum radius that you can search is only a few meters. Here is an API playground that you can test the API out with.
I hope this was helpful!
Hi Alex,
thanks for the quick reply, one more question:
request:
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/tilequery/55.9414,54.7295.json?radius=25&limit=50&dedupe&geometry=point&access_token=YOUR_MAPBOX_ACCESS_TOKEN
response:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 8,
"geometry": {
"type": "Point",
"coordinates": [
55.94845533370972,
54.72732387401962
]
},
"properties": {
"house_num": "32",
"tilequery": {
"distance": 8.949637333832088,
"geometry": "point",
"layer": "housenum_label"
}
}
},
{
"type": "Feature",
"id": 23629792230,
"geometry": {
"type": "Point",
"coordinates": [
55.948566645383835,
54.72761119224691
]
},
"properties": {
"class": "general",
"filterrank": 4,
"maki": "marker",
"name": "Башинформсвязь",
"name_script": "Cyrillic",
"sizerank": 16,
"type": "Telecommunication",
"tilequery": {
"distance": 23.898768437893523,
"geometry": "point",
"layer": "poi_label"
}
}
}
]
}
question: I understand that I can find info about places I got in the response using reverse geocoding API, but is there another approach to do this? Ideally, I would like to get poi's names from one tilquery request, because in case of using two API's (tilquery + geocoding) I will have to query 4-5 queries instead of only 1 (just worrying because it impacts on cost).
Hi Artemii,
There is a parameter in the Tilequery API called layers that you can use to target a specific layer of your style.
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/tilequery/55.9414,54.7295.json?radius=25&limit=50&dedupe&geometry=point&layers=poi_label&access_token=
Which gets this response:
{ "type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 32316157590,
"geometry": {
"type": "Point",
"coordinates": [
55.94142526388168,
54.7295828683082
]
},
"properties": {
"category_en": "Supermarket",
"category_zh-Hans": "超市",
"class": "food_and_drink_stores",
"filterrank": 1,
"maki": "grocery",
"name": "Магнит",
"name_script": "Cyrillic",
"sizerank": 16,
"type": "Supermarket",
"tilequery": {
"distance": 9.367370433680872,
"geometry": "point",
"layer": "poi_label"
}
}
}
]
}
You can take this response object and return all the information from the POI. The "name" property is the name of the POI. Was there other properties that you were looking for from the reverse geocoding that are not being returned by the tilequery? It would be helpful for you to share a full example of a workflow using both tilequery and reverse geocoding, and to hear more about your exact use case, and how this tilequery/reverse geocoding operation fits into your larger application workflow.
Hi Alex,
request (without poi label since it doesn't find few bars I know. But if you add this label you only see one result) : https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/tilequery/55.9485,54.7275.json?radius=14&limit=50&dedupe&access_token=YOUR_MAPBOX_ACCESS_TOKEN request
response:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 5,
"geometry": {
"type": "Point",
"coordinates": [
55.9485,
54.7275
]
},
"properties": {
"extrude": "true",
"height": 15,
"min_height": 0,
"type": "building",
"underground": "false",
"tilequery": {
"distance": 0,
"geometry": "polygon",
"layer": "building"
}
}
},
{
"type": "Feature",
"id": 1297495121,
"geometry": {
"type": "Point",
"coordinates": [
55.94833781213748,
54.727526546045794
]
},
"properties": {
"class": "path",
"iso_3166_1": "RU",
"iso_3166_2": "RU-BA",
"len": 4450,
"oneway": "false",
"structure": "none",
"surface": "paved",
"type": "footway",
"tilequery": {
"distance": 10.859473551200084,
"geometry": "linestring",
"layer": "road"
}
}
},
{
"type": "Feature",
"id": 23629792230,
"geometry": {
"type": "Point",
"coordinates": [
55.948566645383835,
54.72761119224691
]
},
"properties": {
"class": "general",
"filterrank": 4,
"maki": "marker",
"name": "Башинформсвязь",
"name_script": "Cyrillic",
"sizerank": 16,
"type": "Telecommunication",
"tilequery": {
"distance": 13.10152056398561,
"geometry": "point",
"layer": "poi_label"
}
}
},
{
"type": "Feature",
"id": 7,
"geometry": {
"type": "Point",
"coordinates": [
55.94869895433047,
54.7274698331467
]
},
"properties": {
"extrude": "true",
"height": 3,
"min_height": 0,
"type": "building",
"underground": "false",
"tilequery": {
"distance": 13.251093067012334,
"geometry": "polygon",
"layer": "building"
}
}
}
]
}
If we decode the first pair of coordinates(55.9485, 54.7275) using reverse geocoding (https://docs.mapbox.com/search-playground), we get Smoky People, ул. Ленина, 32, Уфа, Республика Башкирия 450077, Russia and if we decode all pairs, we will be able to find more cafes and bars (poi's).
Hey Artemii,
The reason for the varied results are the sources of the queries.
The Tilequery API searches for things that are on our Mapbox Streets v8 tileset (which our Mapbox Streets v11 style uses). The data in this tileset majorly comes from OpenStreetMap. If there are missing or outdated places on the map, this is the perfect opportunity to help us improve our map! If you do want to add or edit anything, head to openstreetmap.org, create an account, and make improvements directly. You'll have the option to go through an interactive tutorial to get you started. There are more details for advanced editing here as well: https://labs.mapbox.com/mapping. The Mapbox Streets tileset is updated regularly as features are edited or added to the map, which means that if you edit OpenStreetMap, you will eventually see your changes reflected on your Mapbox map.
The Geocoding API contains data sources from governments, open data projects, and private companies. In some cases, results from the Geocoding API may differ from Mapbox Streets or OpenStreetMap data. Check out this documentation on how geocoding works at Mapbox.
I think the best way to reduce the amount of API calls you make would be to pick one API, either reverse geocoding or Tilequery, and stick with it. With OpenStreetMaps, as tedious as it sounds, you do have the ability to add any POIs you know are missing, or cross reference other sources to add POIs to the map, which will make the place visible on the map as well as appear in your tilequery. With the Geocoding API, due to the nature of some sources and licensing, not all the places that you can search are visible on the map.
Is it possible?
This tells me it is, but dont know why it defines and API key.
but I cannot get it to work with react-map-gl StaticMap class. The property I can see from that class is just mapStyle which would take a standard Mapbox vector tiles path/name. Does it take an object? My code does not give me an error or show the tiles I request.
<DeckGL>
<StaticMap
mapStyle= {{
"version": 7,
"sources": {
"simple-tiles": {
"type": "raster",
"tiles":["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png"],
"tileSize": 256
},
"power": {
"type": "vector",
"tiles": ["http://gpstrails.info/ex/leaflet/power/osm/{z}/{x}/{y}.json"]
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "simple-tiles",
"minzoom": 0,
"maxzoom": 22
},
{
"id": "road",
"source": "power",
"source-layer": "power",
"type": "line",
"layout": {
"line-join": "round",
"line-cap": "round",
},
"paint": {
"line-color": "red",
"line-width": 4,
}
}]
}}/>
</DeckGL>
Thank you
Edit: from the correct answer, and to keep things in SO, this is the json living on the S3:
{
"version": 8,
"name": "OSM",
"metadata": {
},
"sources": {
"openmaptiles": {
"type": "vector",
"url": "https://free.tilehosting.com/data/v3.json?key={key}"
},
"osm": {
"type": "raster",
"tiles": [
"http://tile.openstreetmap.org/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 14
},
"91y5159eg": {
"type": "vector",
"url": "http://localhost:3000/tilejson.json"
}
},
"sprite": "https://openmaptiles.github.io/klokantech-basic-gl-style/sprite",
"glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=undefined",
"layers": [
{
"id": "osm",
"type": "raster",
"source": "osm"
}
],
"id": "klokantech-basic"
}
UPDATE: Mapbox changed their license in 2.0 so the accepted answer is correct for versions < 2.0. Mapbox > 2.0 will complain if no access_token is provided.
The trick is in the style that's used. A style is a JSON object, whose specification you can read more about here. You can generate custom styles using tools such as Maputnik, a visual editor that generates style-compliant files for use in MapboxGL maps. Once you have an appropriate style generated, you can use it in React Map GL.
Here's what the basic component would look like, as altered from the example in the Github repo:
<ReactMapGL
mapStyle="https://s3.amazonaws.com/cdn.brianbancroft.io/assets/osmstyle.json"
{...this.state.viewport}
onViewportChange={viewport => this.setState({ viewport })}
/>
Note that this is just an abstract example. The tile loads from OSM here are a bit too slow to be useful in production. But it should illustrate how to make maps without relying on the services side of Mapbox.
I have a map with a vector tile source containing thousands of geojson points.
I can display the points on a map, showing a circle for each one of them, using a circle type layer.
I would like to do the same, but using different shapes, such as square and triangle. Isn't there a built-in way to do this ? What are my options ?
In case it is of any use, this is what I did :
I created a set of svg images in different colors, by editing the maki shape icons provided at https://www.mapbox.com/maki-icons/editor/
I converted them to a jpg sprite file and a json descriptor using https://github.com/mapbox/spritezero-cli
I created a style derived from the mapbox-provided styles, in order to use my custom sprite, and served this style using https://github.com/klokantech/tileserver-gl
In my layer configuration, I used a "symbol" type layer and selected the relevant icon by passing its name in the layout properties "icon-image" : "green-triangle-11"
I'll admit it's quite a lot of work to display a green triangle on a map !
Edit (18-07-2017) : I found out you can load any image and display it on the map, it doesn't have to be part of the style. I'm not sure if Mapbox added this recently or if I had missed it until now. Here goes :
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => {
if (error) throw error;
map.addImage('cat', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}]
}
},
"layout": {
"icon-image": "cat",
"icon-size": 0.25
}
});
});
Taken from https://www.mapbox.com/mapbox-gl-js/example/add-image/
In Mapbox studio classic, you just click where you want a new "marker" and it creates one. I want to do the same thing in the new mapbox studio but that feature doesn't seem to exist. Please note, I do not have a dataset to upload, I need to create a dataset through Mapbox Studio.
If anybody has any insight for me that would be super!
You can add your data to Mapbox Studio along with this custom svg marker. I styled it similar to the old Leaflet L.marker: https://github.com/Ccantey/icons/blob/master/svgs/placeMarker-Blue-Shadow.svg
Then in the layout properties you can set "marker-symbol"/"icon-image" to "myMarker-Blue-Shadow":
map.addSource("pointclick", {
"type": "geojson",
"data": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [e.lngLat.lng, e.lngLat.lat]
},
"properties": {
"title": "mouseclick",
"marker-symbol": "myMarker-Blue-Shadow"
}
}
});
map.addLayer({
"id": "pointclick",
type: 'symbol',
source: 'pointclick',
"layout": {
"icon-image": "{marker-symbol}",
"icon-size":1,
"icon-offset": [0, -13]
},
"paint": {}
});