mvt vector tiles on showing on MapboxGL - mapbox-gl-js

I followed
https://medium.com/#mrgrantanderson/https-medium-com-serving-vector-tiles-from-django-38c705f6
to serve the mvt tiles to the mapbox from geoDjango.
With running query
cursor.execute("SELECT ST_AsMVT(tile) FROM (SELECT osm_id, building, ST_AsMVTGeom(geom, TileBBox(%s, %s, %s, 3857)) FROM nepal_khokanabuildings ) AS tile", [zoom, x, y])
as my model project is ESPG:3857
The Vectors don't seem to load up on the map, the api request is working fine.
I also tried serving vector files from Geoserver no luck either.
Here is my JS File
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 12,
center: [85.294688,27.634106],
});
var mapillarySource = {
type: 'vector',
tiles: [
'http://0.0.0.0:8000/nepal/api/v1/data/nepal/{z}/{x}/{y}.mvt'
],
minzoom: 0,
maxzoom: 14
};
map.on('load', function() {
map.addSource('mapillary', mapillarySource);
map.addLayer({
'id': 'mapillary',
'type': 'fill',
'source': 'mapillary',
'source-layer': 'water',
'paint': {
"fill-color": "#00ffff"
}
});
});
map.addControl(new mapboxgl.NavigationControl());
</script>

There are lots of problems that can manifest themselves as "my layers don't show".
You can check each of these things:
is the layer being created before the map is ready? (wait for "load" event)
are the correct tile requests being generated?
are those requests succeeding?
are they returning actual .pbf files?
do they contain data in the right location, and in the right projection?
do they contain a layer with the name you expect? ('water' in this case)
do they contain data of the type you expect? (polygons in this case)
I am curious about the 0.0.0.0 host, but also suspect that the layer name may not be right.
If your tile requests are succeeding, you can try using https://stevage.github.io/vector-inspector/ to inspect them, although you may have issues with that page being served on HTTPS and your local tiles being on HTTP.

Use Following ,
"id": "postgis-tiles-layer",
"source-layer": "default",

Related

How to access Mapbox layers and subsequent key-value, tags from leaflet

I am a confused about how to access layers in Mapbox from leaflet. I have this;
$( document ).ready(function() {
var map = L.map('map').setView([33.72890830547334, 133.4454345703125], 7);
var osmmapbox = L.tileLayer('https://api.mapbox.com/styles/v1/usernamexxx/cl6om2qj0003214odo9xx676f/tiles/256/{z}/{x}/{y}#2x?access_token=[snip]', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);;
console.log(osmmapbox);
});
My mapbox styled map has 2 layers, one of nodes and another of ways. I tried to look into osmmapbox but I cannot see anything. Any pointers appreciated.
If you are using Mapbox.js, then you can't. It only supports displaying raster tiles, not interacting with the data inside vector tiles.
Use Mapbox GL JS if you want to query map data.
I think my problem was more about conceptualization of how mapbox processes info. What I did was upload my data to a dataset. I then create a tileset from the dataset. I created a style but did not include the data in the style but used mapbox gl js to add a geojson with two type of geometries. This is the final mapbox gl js code;
myToken = '[snip];
mapboxgl.accessToken = myToken;
// add a styled map to the container id map
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://[some style link here]',
});
map.on('load', () => {
map.addSource('data-source', {
type: 'vector',
// Use any Mapbox-hosted tileset using its tileset id.
// Learn more about where to find a tileset id:
// https://docs.mapbox.com/help/glossary/tileset-id/
url: 'mapbox://[tileset link goes here]'
});
map.addLayer({
'id': 'area-polygon',
'type': 'line',
'source': 'data-source',
'source-layer': 'bicycle_data',
'filter': ['==', '$type', 'Polygon']
});
map.addLayer({
'id': 'bicycle-parking',
'type': 'circle',
'source': 'data-source',
'source-layer': 'bicycle_data',
'filter': ['==', '$type', 'Point']
});
});

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 add Mapbox vector tile layer from Geoserver to Mapbox?

I have published a shapefile as a vector tile on GeoServer according to this. Now, how can I add this layer to Mapbox?
I would be very pleased if you can help me.
I have been trying to get that to work and for a vector layer you must specify 'source-layer' attribute which is the name of a layer on your GeoServer (ie. 'states' if using topp workspace) here is a code example that eventually worked for me:
<script>
mapboxgl.accessToken =
'<YOUR MAPBOX TOKEN HERE>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-100, 40],
zoom: 12,
});
map.on('load', function () {
map.addSource('wms-test-source', {
type: 'vector',
// use the tiles option to specify a WMS tile source URL
// https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/
tiles: [
'http://<YOUR GEOSERVER ADDRESS>:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=topp:states&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}',
],
'minZoom': 0,
'maxZoom': 14,
});
map.addLayer(
{
'id': 'wms-test-layer',
'type': 'fill',
'source': 'wms-test-source',
'source-layer': 'states',
'paint': { 'fill-color': '#00ffff' },
}
//'aeroway-line'
);
});
</script>
For more info go to GeoServer documentation at GeoServer - Mapbox Style Specification
The code provided at the link actually shows how to add the GeoServer layer to your Mapbox map. Assuming that you want to add the layer to your map with Mapbox GL JS (since your post is tagged with mapbox-gl-js, your code would look something like this:
mapboxgl.accessToken = /* YOUR MAPBOX ACCESS TOKEN HERE */;;
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
// Add the GeoServer layers as a source to your map.
map.addSource(
"<source-name>": {
"type": "vector",
"tiles": [
"http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS
&VERSION=1.0.0&LAYER=<workspace>:<layer>&STYLE=&TILEMATRIX=EPSG:900913:{z}
&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile
&TILECOL={x}&TILEROW={y}"
],
"minZoom": 0,
"maxZoom": 14
}
);
// Style the GeoServer source in order to display it visually on your map
map.addLayer({
'id': 'geoserver-layer',
'type': /* fill in based on options here: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#type */,
'source': '<source-name>'
/* Add any additional properties, full details here: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#type */
});
In short, the GeoServer documentation link provides the code for adding a source to your map, and then you should add a layer to style the source visually on your map.
I'd recommend taking a look at the many Mapbox GL JS examples to get a sense of how sources and layers can be added, styled, modified, etc.

mapbox not displaying polygon

I am a beginner to GIS and PostGIS applications.
I am trying to display the polygon on mapbox map but unable to do so.
Following is the javascript code:
mapboxgl.accessToken = 'TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [115.813867, -31.932177],
zoom: 12
});
map.on('load', function () {
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': {
'type': 'geojson',
'data':threeHouses
},
'layout': {},
'paint': {
'fill-color': '#088',
'fill-opacity': 0.8
}
});
});
Here is my JSFiddle.
There are a couple issues with the JS Fiddle you've shared.
You haven't included mapbox-gl.js & mapbox-gl.css as resources, so they are not being properly referenced.
You are not declaring your data variable correctly (it should be let threeHouses = or var threeHouses =)
You're also initializing your map with a completely different lat/lon than those that are included in your polygon data
If you address all three of these, you'll have a better chance of understanding whether or not there's a problem.

I'm attempting to get zip codes to display within zip code borders

Several moments are happening correctly in this effort, the map is displaying as expected, the zip code boundaries are showing as expected, but I'm not able to figure how to get 5-digit zip codes to be the label within each zip code boundary. Any help (with example code if possible) would be greatly appreciated!
Here's some code:
<html>
<div id='mapdiv'></div>
...
mapboxgl.accessToken='<token>';
var mapobj = new mapboxgl.Map({
container: 'mapdiv',
style: 'mapbox://styles/mapbox/streets-v9',
minZoom: 3,
maxZoom: 20,
zoom: 10,
center: [-105.1613858,39.6791558]
});
<script src="https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css" rel="stylesheet" />
...
mapobj.on('load', function() {
// Add ZipCode source to map
mapobj.addSource('zipSource', {
type: 'vector',
url: 'mapbox://mapbox.enterprise-boundaries-p2-v1'
});
mapobj.showTileBoundaries = true;
// Add hot ZipCode layer to map
mapobj.addLayer({
id: 'hotZipLayer',
type: 'fill',
source: 'zipSource',
'source-layer': 'boundaries_postal_2',
paint: {
'fill-outline-color': 'rgba(0,0,0,1)',
'fill-color': 'rgba(0,0,0,0.01)'
}
});
// Add Zip numbers symbol layer to map
mapobj.addLayer({
id: 'zipCodeLabels',
type: 'symbol',
source: 'zipSource',
'source-layer': 'points_postal_2',
layout: {
'text-field': '{id}',
'text-justify': 'center',
'text-size' : 10
},
paint: {
'text-color': 'black',
'text-halo-color': 'white',
'text-halo-width': 25
}
});
});
And an example data entry:
[
{
"geometry":
{
"type":"Point","coordinates":[-105.0908374786377,39.707747919880916]
},
"type":"Feature",
"properties":
{
"id":"USP280226"
},
"id":2,
"layer":
{
"id":"zipCodeLabels",
"type":"symbol",
"source":"zipSource",
"source-layer":"points_postal_2",
"layout":
{
"text-field":"{id}",
"text-justify":"center",
"text-size":10
},
"paint":
{
"text-color":"black",
"text-halo-color":"white",
"text-halo-width":25
}
}
},...]
So in this case the value that would show up within the zip code boundary is "USP280226", what I would like to appear is "80226", so I would like to call substring(4) on that id value, but I don't see an easy way to do that for each displayed zip code on the map.
I would imagine MapBox has a way to do this properly, but I haven't been able to find it in the docs or examples.
Thanks in advance for any help.
The currently released version of Mapbox-GL-JS doesn't support any kind of functions on data. You will have to process the data offline so that it contains the labels you want to display.
(I think a forthcoming version may support this kind of function, but I'm not certain.)
EDIT The "expression" functionality is now released. Unfortunately I don't think it helps you. There's a concat function but no way to split strings that I can see.