I've been wanting to simply move a marker or a feature using nativescript-community/ui-mapbox.
Problem is I can't figure out how to retrieve the source (using getSource) or the style to then be able to get my feature and update its coordinates.
Do you have an idea how moving things is supposed to be done in this library?
Note that I don't use Typescript and I can't use the marker.update().
Thank you!
Here's a bit of code to explain the problem:
var source = {
'type': 'geojson',
'data': {'type': 'Point',
'coordinates': [50.1, 3.4]}
}
mapbox.addSource('my-source', source).then(() => {
this.map_widget.mapbox.addLayer({
'id': 'layer-1',
'source': 'my-source',
'type': 'circle',
'paint': {
'circle-radius': 10,
'circle-color': '#eee'
}
});
})
Now, I'd like to update the coordinates of the source but I couldn't find a way to look it up back.
Related
If you simply add a marker, you get a standard marker:
https://docs.mapbox.com/mapbox-gl-js/example/add-a-marker/
If you use addLayer() there appears to be no description anywhere about how to use these standard markers:
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol
map.addLayer({
'id': 'POIs',
'type': 'symbol',
'source': 'POIs',
'layout': {
'icon-image': 'marker-15', // this is a custom image... I just want a default, normal marker
'icon-allow-overlap': true
}
});
It's really easy to add special symbols, but I just want default markers. How do I do this with addLayer()
Hugely disappointing news. Somehow it's just not possible:
https://github.com/mapbox/mapbox-gl-js/issues/656
I guess you just have to iterate over whatever your data is and use addMarker() for each.
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
}
});
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 am initializing mapbox map by adding sources and layers linked to them.
mapbox.addSource(MY_SOURCE, {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [],
},
});
mapbox.addLayer({
'id': MY_LAYER,
'type': 'circle',
'source': MY_SOURCE,
'paint': {
'circle-radius': 6,
'circle-color': '#d31467',
},
});
my goal being - I want to have those definitions done once and then - if I need to update the source I just:
mapbox.getSource(MY_SOURCE).setData(geojson);
Sometimes though I need to wipe out all polygons, all points, everything. How can I do that without losing all those definitions? I can only see .removeSource, .removeLayer - which tells me I will actually need to recreate those definitions.
Is there a less destructive way of doing it?
You have two options here:
Hide the layers
map.setLayoutProperty(<layer-id>, 'visibility', 'none');
Remove all features from you sources by setting an empty geojson
map.getSource(<source-id>).setData({
type: 'FeatureCollection',
features: [] // <--- no features
});
Also removing & re-adding the sources and layers might not be the worst option, depending on the frequency you want to do this.
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.