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',
}
});
});
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'm trying to figure out how to animate the update of this map layer so that points translate smoothly to new positions rather than simply appearing there. i have not found any useful starting points in the mpabox gl tutorials / examples and was wondering if there is a straightforward way to approach this. thanks
the code below fetches a geojson doc from an api once every 60 seconds and updates the map layer.
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', // style URL
center: [-73.93, 40.73], // centroid of NYC
zoom: 11 // starting zoom
});
var url = '/api/v1/nyc/livemap';
map.on('load', function () {
var request = new XMLHttpRequest();
window.setInterval(function () {
// make a GET request to parse the GeoJSON at the url
request.open('GET', url, true);
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
// retrieve the JSON from the response
var json = JSON.parse(this.response);
map.getSource('observations').setData(json);
map.flyTo({
center: json.geometry.coordinates,
speed: 0.5
});
}
};
request.send();
}, 60000); // refresh every n milliseconds
map.addSource('observations', { type: 'geojson', data: url });
map.addLayer({
'id': 'buses',
'type': 'circle',
'source': 'observations',
'paint': {
'circle-radius': 3,
//'circle-color': '#0039A6'
'circle-color': [
'match',
['get', 'occupancy'],
'full',
'#e55e5e',
'standingAvailable',
'#FFFF00',
'seatsAvailable',
'#00FF00',
/* null */ '#87CEFA'
]
},
});
});
Mapbox GL JS doesn't contain any mechanism for animating data points from one location to another.
You could use Turf's along function to interpolate each point some proportion along the way from its previous location to its new location.
I am importing data from a Google Spreadsheet with csv2geojson and it is drawing nice circles for each location with 'paint', I'd rather have wee pin markers though. What is the best way to achieve this?
function makeGeoJSON(csvData) {
csv2geojson.csv2geojson(csvData, {
latfield: 'Latitude',
lonfield: 'Longitude',
delimiter: ','
}, function (err, data) {
map.on('load', function () {
map.addLayer({
'id': 'csvData',
'type': 'circle',
'source': {
'type': 'geojson',
'data': data
},
'paint': {
'circle-radius': 10,
'circle-color': {
property: 'MarkerType',
type: 'categorical',
stops: [
['blue', '#fbb03b'],
['red', '#223b53'],
['pink', '#e55e5e']
]
}
}
});
If you would like to base the icons off of a category in your spreadsheet, you can do so one of two ways. One way to do so would be to make sure to add a column in your spreadsheet, define the name of the icon you'd like to use within the spreadsheet and upload the icons you would like to use in Mapbox Studio. Another way would be to set each category to a specific icon within your code. If you would like to add an image to your points, please take a look at this add an icon to the map example.
In addition, you will need to change your map.addLayer​ function to reference the appropriate icon. I have included my code below, as well as a screenshot of the final result for your reference. {Icon}references the icon property of my geojson (converted from the Google sheets CSV file), which came from the column in my spreadsheet.
My map.addLayer code:
map.addLayer({
'id': 'csvData',
'type': 'symbol',
'source': {
'type': 'geojson',
'data': data
},
'layout': {
'icon-image': '{Icon}',
'icon-size': 1.5,
'icon-padding': 0,
'icon-allow-overlap': true
}
});
Sorry of this is a simple question but I have a Mapbox map with 2 layers running on my website. Each layer can be toggled on or off using the example code on the MapBox support site.
However it uses the name of the layers directly for the text of the menu buttons. Is there a way to change this to a more aesthetically pleasing title?
Many thanks
Col
Code added below :
map.on('load', function() {
// add source and layer for 2020 Tour
map.addSource('pjuk-2020-tour', {
type: 'vector',
url: 'mapbox://styles/silentwitness/cka13nxh44g1v1iqd7xxr1nys'
});
map.addLayer({
'id': 'pjuk-2020-tour',
'type': 'circle',
'source': 'pjuk-2020-tour',
'layout': {
// make layer visible by default
'visibility': 'visible'
},
'source-layer': 'pjuk-2020-tour'
});
map.addSource('pjuk-previous-tours', {
type: 'vector',
url: 'mapbox://styles/silentwitness/cka13nxh44g1v1iqd7xxr1nys'
});
map.addLayer({
'id': 'pjuk-previous-tours',
'type': 'circle',
'source': 'pjuk-previous-tours',
'layout': {
// make layer visible by default
'visibility': 'visible'
},
'source-layer': 'pjuk-previous-tours'
});
});
// enumerate ids of the layers
var toggleableLayerIds = ['pjuk-2020-tour', 'pjuk-previous-tours'];
// set up the corresponding toggle button for each layer
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
Using this example as a model, there are many ways which you could go about doing this. One is to create a variable storing a mapping from the desired title to the name of the layer, so that clicking on the relevant button will use the textContent as a key in this mapping to retrieve a value representing the name of the layer. For example:
var titleToLayerName = {
'PJUK Previous Tours': 'pjuk_previous_tours',
'PJUK 2020 Tour': 'pjuk_2020_tour'
}
...
link.onclick = function(e) {
var clickedLayer = titleToLayerName[this.textContent];
...
};
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.