Do Mapbox Supports, GeoJson source support in Runtime Styling.
I tried same Style (file with two Source 1. Vector, 2. GeoJson) file with mapbox-gl-native and mapbox-gl-js.
It was working as expected in Native SDK but it seems mapbox-gl-js is ignoring if source type is GeoJson.
I tried version 0.52
This is definitely possible. You just need to call .addSource on your map object before you use that source to generate the style layers. This example shows how the general flow for adding a GeoJson source: https://docs.mapbox.com/mapbox-gl-js/example/multiple-geometries/
If you're trying to reference a geojson file, you'll just need to specify that file's URL via the data field of your source object. If you're going that route, the GeoJson file needs to be on the same domain or accessible using CORS.
Here's a quick and dirty code snippet to illustrate what I mean:
map.on("load", function() {
map.addSource("my-geojson-source", {
"type": "geojson",
"data": "path/to/data.geojson"
});
map.addLayer({
"id": "styled-geojson-layer",
"type": "circle", // this depends on your data & goals
"source": "my-geojson-source",
... // add style things here
});
});
If you get stuck, the library documentation should have everything you need:
https://docs.mapbox.com/mapbox-gl-js/examples/
https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources
https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers
Related
I'm working on a map on whitch I want to draw the path I drove with my motorcycle. For this I want to use mapbox opengl because of the wonderful graphical features. I have dificulties to understand the different kind of sources that Mapbox offers (https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/). I collect the data with my self developed logger (lat, lng, speed, acc, gyro, leaning angle, alt) and can export them in any kind of file or format. But as far as I understood, geo.json files are not able to support metadata. So I looked up the "Tiled Sources" but here I getting into trouble. Do I need a mapper from Mapbox from my file and then consume the data to mapbox or do i have a direct options to import my CSV and define the data columns.
But as far as I understood, geo.json files are not able to support metadata.
Incorrect. You can store any metadata you like either on the properties attribute of a Feature, or at the top level of a FeatureCollection.
So I looked up the "Tiled Sources" but here I getting into trouble.
You don't want a tiled source.
Do I need a mapper from Mapbox from my file and then consume the data to mapbox or do i have a direct options to import my CSV and define the data columns.
Probably what you want is to convert the CSV to GeoJSON. You can even do it dynamically in your code front end.
After loading the CSV (using something like D3's csv method), you can do something like this:
const geojson = {
type: 'FeatureCollection',
features: rows.map((row, id) => ({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [+row.longitude], +row.latitude],
},
properties: {
id,
...row
}
}))
}
map.addSource('mysource', { type: 'geojson', data: geojson });
As far as I can tell, I have used the correct format for the URL, but on replacing the Mapbox style JSON file in Mapbox Studio, I get an 'Invalid source URL" error
I've looked at all the relevant Mapbox and Azure Maps examples, eg:
1) https://learn.microsoft.com/en-au/rest/api/maps/render/getmapimagerytile
2) https://learn.microsoft.com/en-au/rest/api/maps/render/getmaptile
...
"sources": {
"azure": {
"type": "raster",
"url": "https://atlas.microsoft.com/map/imagery/png",
"subscription-key" : "<my-key>",
"api-version" : "1.0",
"tileSize": 256
},
"composite": {
"url": "mapbox://mapbox.mapbox-streets-v8",
"type": "vector"
}
},...
When replacing a style in Mapbox Studio with one that contains the above source, I get an 'Invalid source URL' error. I expected Mapbox to be able to use that source.
Try maybe that way:
"Imagery tiles": {
"type": "raster",
"tiles": [
"https://atlas.microsoft.com/map/imagery/png?subscription-key=yourkey&api-version=1.0&style=satellite&zoom={z}&x={x}&y={y}"
],
"maxzoom": 18,
"tileSize": 256
}
You can use the Azure Maps vector tiles with Mapbox style JSON files. However, the data schema of the vector tiles is different for Azure Maps than the Mapbox street tiles, so you would need to adjust your style to use different source layers. TomTom is the primary data provider and the source layers of the vector tiles are documented here: https://developer.tomtom.com/maps-api/maps-api-documentation-vector/tile
Note, the Azure Maps Web SDK uses the same rendering engine as Mapbox GL JS and is able to render data just as well. It has an easier to use API interface that is also less error prone, so you might want to consider taking a look at that. It doesn't support custom styles yet, but this is planned. Here is a bunch of code samples using this SDK: https://azuremapscodesamples.azurewebsites.net
I have created a Mapbox style using Mapbox Studio and set it to be used over WMTS. The URL of the style is:
https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token
where styleId, username and token are variable fields.
When I try to create a WMTS layer in OpenLayers using the url above, the tileGrid is created successfully using createFromCapabilitiesMatrixSet but I get a response error Invalid query param layer from Mapbox.
After some investigation, I noticed that:
The response error persists for all query parameters that are appended from OpenLayers when creating the tile load function. It looks like that Mapbox does not recognise them properly.
OpenLayers website and Mapbox also give examples on using XYZ layers for integration between them.
So, is this some kind of unsupported feature of OpenLayers or do I need to configure anything additional when creating the WMTS OpenLayers?
It's much simpler to set up as a standard OpenLayers XYZ layer using
url: 'https://api.mapbox.com/styles/v1/username/styleId/tiles/{z}/{x}/{y}?access_token=token'
as in the examples.
Mapbox provides WMTS support for compatibility with some other systems. It can also be used in OpenLayers, the setup would be
var parser = new ol.format.WMTSCapabilities();
fetch('https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token').then(function(response) {
return response.text();
}).then(function(text) {
var layer = new ol.layer.Tile({
source: new ol.source.WMTS(
ol.source.WMTS.optionsFromCapabilities(parser.read(text), {
layer: 'styleId',
matrixSet: 'EPSG:3857'
})
)
});
....
....
....
....
});
Both methods will ultimately load the same tile urls, so there's no advantage in using WMTS where XYZ is supported.
Link to problem: https://khuts.org/webmap/osm-bright-style/mines.html
Neither the mapbox-street layer nor the tile layer show.
This map has an mbtiles file served using tileserver-php. The error refers to tile-coord.js, which does not seem to have any property 't' in it.
How do I resolve this?
Seeing your comment here, you need to change how you create your data source. vector sources don't accept a data option, you either need to supply tiles (an array of tile urls) or an url (an url pointing to a TileJSON file):
map.addSource('my-source', {
type: 'vector',
// either "tiles"
tiles: ['http://my-tile-server/{z}/{x}/{y}'],
// or "url"
url: 'http://my-tile-server/tiles.json'
});
If you are using tileserver-php, it supports both:
- tile urls (z/x/y)
- tile jsons
See its documentation of "Supported Protocols": https://github.com/klokantech/tileserver-php#supported-protocols
I have in the OpenLayers 2 project this construct:
var pois = new OpenLayers.Layer.Text( "Románské kostely", {
location:"./kostely.tsv",
projection: map.displayProjection
});
map.addLayer(pois);
Actually, the ease with which I can create a new layer from just TSV file was one of the reasons why I started to play OpenLayers in the first place.
I have now this as a port to OpenLayers 3:
new ol.layer.Vector({
title: "Románské kostely",
source: ol.source.Vector({
format: new ol.format.TextTSV(),
url: "kostely.tsv"
}),
style: new ol.style.Style({
image: new ol.style.Icon({
src: "Ol_icon_blue.png"
})
})
})
Except, obviously, there is no ol.format.TextTSV(). The best what I can find in API are a way more complicated constructs like GeoJSON etc.
Did anybody created an equivalent function for the OpenLayers 3 API? Or is there a convertor somewhere from the old TSV file to some supported format?
It should work by using csv2geojson library provided by MapBox (to convert CSV/TSV to GeoJSON), combined with a ol.source.Vector using ol.format.GeoJSON.
I produced an example to illustrate this use case (more complicated than the solution you expected). I didn't bother with the style for the demo and I also use only Vanilla JS (it means "pure JavaScript", no third party library) for Ajax calls.
If you really need a new ol.format.TextTSV(), you will need to make your own extension to the core library. You can also ask on the mailing list if it's on the project roadmap.
Have you tried it in WKT format
var format = new ol.format.WKT();
http://openlayers.org/en/v3.4.0/apidoc/ol.format.WKT.html