MapBox and TIFF - mapbox

I am trying to show my TIFF file at the MapBox's map. I am starting with this example: https://www.mapbox.com/mapbox-gl-js/example/vector-source/ by replacing
map.addSource('terrain-data', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
});
with
map.addSource('terrain-data', {
type: 'vector',
url: 'mapbox://xxx.yyy'
});
where xxx.yyy is my Map ID from Data section of the account (https://www.mapbox.com/studio/data/)
JavaScript initiates needed calls (to some jpg files), but all of them come with 404 error and the following message: {"message":"Tile does not exist"}

If xxx.yyy is a tileset resulting from a TIFF upload, it's a raster source, not a vector source. You will need to replace type: 'vector' with type: 'raster', specify tileSize: 256, and use it as the source for raster layers.

Related

Adding TileJSON layer hangs browser

Adding my custom TileJSON causes the browser to hang.
Custom TileJSON: https://data.madronus.com/landcraft/assessment-data/dNfg1lNQF1Zaz-0VpTYxq/20/tms/tilejson.json
Adding the source like this:
map.addSource(`tiles-source`, {
type: 'raster',
url: <URL>,
})
And the layer like this:
this.map.addLayer({
id: 'tiles',
type: 'raster',
source: 'tiles-source',
})
It turns out that MapboxGL (JS) will crash if any of your Lng/Lats are set as strings rather than floats. Updating the TileJSON to floats for center and bounds fixes this.

Nothing showing when plotting vector tile layer from Arcgis server on MapBox GL JS map

I'm trying to plot a supplied vector tile layer onto a map using MapBox GL JS. I've followed the documentation here but nothing apart from the basic map is being output and there are no console errors. In the browser's Network tab I can see lots of .pbf requests being returned with data so it would seem that the endpoint is passing data back, but I don't know how to determine what the problem is in plotting that data onto the map.
The code is as follows:
mapboxgl.accessToken = '[my access token]';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 6,
center: [-0.118092, 51.509865]
});
map.once("load", () => {
map.addSource("ncn", {
type: "vector",
tiles: [
"https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id: "ncn-lines",
type: "line",
source: "ncn",
"source-layer": "NCN_Vector_Tile_Package",
"layout": {
"visibility": "visible"
},
'paint': {
'line-color': 'rgb(255, 0, 0)'
}
});
});
I am fairly sure that the type should be line (rather than fill) as the data is supposed to contain route lines rather than vector shapes.
I don't have access to the Arcgis server so can't see how anything is configured at that side. Can anyone suggest what might be wrong here and/or how to debug?
It looks like the value for source-layer is not correct - it should be NCN_2020. Here's a demo showing it working: https://jsbin.com/xunuhibuki/1/edit?html,output
How do you get that value? I'm not quite sure the best way, but the way I found: add ?f=html to your vector tile layer like this: https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/?f=html then click "Styles" link at the bottom which gives you an example of how to construct your map.addLayer() commands in your mapboxgl code.

How can I zoomed to the cql_filter feature?

I am using geoserver. I write the following code;
const mywms = L.tileLayer.wms("http://localhost:8080/geoserver/taj/wms", {
layers: 'taj:country',
format: 'image/png',
CQL_FILTER: 'name=pana'
transparent: true,
opacity: 0.4,
version: '1.1.0',
attribution: "country layer"
});
All is good. The layer get filtered. But I need the selected feature to zoom full extend.
I tried to center the mywms layer using this code; map.fitBounds(mywms.GetBounds());. But it shows the error; mywms.getBOunds is not a function. Any help?
As is pointed out in the comments WMS requests contain the bounding box of the map in the request and so will always cover the whole of the map area.
To get the extent of a single feature you need to make a WFS request with the filter included and then zoom to the extent of that feature when it is returned.
Thank you very much for all of the helping hands. And special thanks to Mr. Ina Turton who helps me to find out the actual problem and get the solution. my url for the wfs server looks like this;
http://localhost:8080/geoserver/tajikistan/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=taj%3Acountry&maxFeatures=50&outputFormat=application%2Fjson
I write the following code to for zooming into my cql_filter area:
//Geoserver Web Feature Service
$.ajax('http://localhost:8080/geoserver/wfs',{
type: 'GET',
data: {
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typename: 'tajikistan:country',
CQL_FILTER: "name_rg='Centre'",
srsname: 'EPSG:4326',
outputFormat: 'text/javascript',
},
dataType: 'jsonp',
jsonpCallback:'callback:handleJson',
jsonp:'format_options'
});
function handleJson(data) {
var requiredArea = L.geoJson(data).addTo(map);
map.fitBounds(requiredArea.getBounds())
}
In this code the CQL_FILTER is used for to filter out the required area. In my case the data having column name name_rg which have the property as Centre. I query this region using this code. I fetch the data using ajax method. I write the code little tricky because the regular ajax call doesn't callback the handleJson function and return an parseJson error. And finally I added the variable named as requiredArea. Get bounds of this region and set bounds of the required region and added into the map.

How to use clusterProperties in mapbox-gl

I built a mapbox-gl js (v0.52) map where points are getting aggregated into clusters; much like in the clusters example from mapbox page.
The cluster color needs to be a function of an aggregation of individual points properties: For simplicity, say each point has a status property, which determine its color, and the color of a cluster should just be the color corresponding to the max of each of its points' status values.
Example geojson data would look like:
const geoData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
id: 'fakeid11',
status: 20,
},
geometry: {
type: 'Point',
coordinates: [-151.5129, 63.1016, 0]
}
},
{
type: 'Feature',
properties: {
id: 'fakeid22',
status: 10,
},
geometry: {
type: 'Point',
coordinates: [-150.4048, 63.1224, 105.5]
}
}
]
};
I am trying to use clusterProperties to compute the aggregation as described in the api docs, similar to this example from the source code, to create this layer:
map.addSource('earthquakes', {
type: 'geojson',
data: geoData,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50, // Radius of each cluster when clustering points (defaults to 50)
clusterProperties: {
status: ['max', ['get', 'status']]
}
});
This snippet is exactly like the clusters example from mapbox page, just replacing the data by my static 2-elements copy, and adding clusterProperties.
However this throws a validation error (a bit mangled from the minified mapbox-gl version):
Error: sources.earthquakes: unknown property "clusterProperties"
at Object.Jr [as emitValidationErrors] (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504146)
at De (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504150)
at i._validate (modules.js?hash=34588b9e7240c1a9b3fd2f8685e299d9dbbb40d9:504150)
What is wrong with this clusterProperties usage? It would seem it is simply refusing to validate this property. Note that the map works ok (without the status aggregated property of course) if I comment the last 3 lines that set it.
I found the answer days later: The version of react-map-gl we were using had dependency on mapbox-gl ~0.52.0, which did not yet support clusterProperties. Support for these aggregated properties comes in mapbox-gl 0.53. (And since the react wrapper uses undocumented features of mapbox-gl, they depend on exact versions at patch level). This was confirmed by the react library developers.
Now react-map-gl 4.0.14 is released and it works ok with clusterProperties, using internally mapbox-gl 0.53.0.

ui5: unable to highlight a region on map

my code:-
jQuery.sap.require( "sap.ui.vbm.AnalyticMap");
var oMap = new sap.ui.vbm.AnalyticMap({
width:"100%",
height: '100%',
plugin: false,
regions: {
template: new sap.ui.vbm.Region({
code: 'NA',
color: '#fff',
})
}
});
return new sap.m.Page({
title: "Maps",
content: [oMap]
});
I am trying to highlight a region on the map, but may be I am not following the API properly, any help is appreciated
You need to have the GeoJSON files for your region for them to be shown on the Map. The GeoJSON files are searched in the below places, in the given sequence as mentioned here.
server:port/sap/bc/vbi/geojson/L0.json
./media/analyticmap/L0.json
You will have to upload a GeoJSON file in the MIME repository on your gateway system. You can find many sources for GeoJSON on the Internet.
http://www.naturalearthdata.com/downloads/
http://www.gadm.org/country
However many of these sources will provide you with ShapeFiles. These contain geospatial vector data for defining regions on a map.
You will have to convert your shapefiles to geojson with GDAL or if you use QGIS(like me), GDAL will also installed alongside.
GDAL: http://www.gdal.org/
QGIS: http://www.qgis.org/en/site/forusers/download.html
You can run the below commands to converting a Shape File to GeoJSON
ogr2ogr -f "GeoJSON" target.json source.shp
Or if you would also like to define CRS
ogr2ogr -f "GeoJSON" -s_srs EPSG:3857 -t_srs EPSG:4326 target.json source.shp
You can create your own regions, using this geojson.io
Once you have your GeoJSON file, you can add them to the MIME repository or you can provide a path in your application to the target GeoJSON
sap.ui.vbm.AnalyticMap.GeoJSONURL = "/model/GeoJSON.json";
var oMap = new sap.ui.vbm.AnalyticMap({
width:"100%",
height: '100%',
plugin: false,
regions: {
template: new Region({
code: 'NA',
color: 'rgba(184,225,245,1.0)',
})
}
});
You can also refer to this article.