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.
Related
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.
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.
I've had a request form a client to have the following chart replicated in HighCharts cloud, but I'm having difficulty figuring out how to make the first series show as a "floating gray bar" - or whatever it's called. Any suggestions on how I could achieve to this?
You can use columnrange series type to add the 'floating bar':
series: [{
type: 'column',
data: [...]
}, {
type: 'columnrange',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/ys1x79uk/
API Reference: https://api.highcharts.com/highcharts/series.columnrange.data
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.
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.