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.
Related
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']
});
});
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.
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",
I am new to this and trying to add a grid layer, using Mapbox GL. Would appreciate some help.
var bbox = [-95, 30 ,-85, 40];
var cellSide = 50;
var options = {units: 'miles'};
var squareGrid = turf.squareGrid(bbox, cellSide, options);
What you have so far gives you a GeoJSON object that you can add to your map. Assuming you have a created a map (follow the getting started example), you now need to add a GeoJSON source, then a layer that renders it.
Something like
map.on('load', function() {
map.addSource('grid', {
'type': "geojson",
'data': squareGrid
});
map.addLayer({
'id': 'grid',
'type': 'line',
'source': 'grid',
'paint': {
'line-color': 'red',
}
});
});
I'm using Mapbox GL JS, with a Mapbox Streets base layer. I have added a polygon layer with white borders and a transparent fill, but I'm finding it hard to read the basemap labels underneath the polygon layer. See how the labels are covered by the white borders:
Is there any way I can make sure the labels are on top of the polygon layer, or at least not obscured by it?
My code looks like this:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-2.839, 54.579],
zoom: 4
});
map.on('load', function () {
map.addSource('constituencies', {
'type': 'vector',
'url': 'mapbox://pcsu.xxx'
});
var constituencyLayer = map.addLayer({
'id': 'constituencies',
'source': 'constituencies',
'source-layer': 'constituencies',
'type': 'fill',
'paint': {
'fill-color': 'rgba(162,181,205,0.6)',
'fill-outline-color': 'white'
},
'layout': {
'visibility': 'visible'
}
});
Have a look at this Mapbox example and use the second argument of map.addLayer(layer, [before]). If this layer before exists, the new layer will be placed before/below it. I think the argument naming is a bit confusing here.
The name of the lowest label layer depends on the style. Most of the time you're looking for housenum-label. There's also a discussion in the Mapbox github issues how to ease this process, e.g by introducing placeholder layers.