MapBoxGL - why does it flag my source as invalid geoJSON - mapbox
I am trying to dynamically add polygons to a MapboxGL map by passing the coordinates into a funciton. Should be simple enough, but I'm having a tough time with it. Why does this work...
map.addSource('zip_code', {
'type': 'geojson',
'data':
{
'type':'Feature',
'geometry':
{
'type': 'Polygon',
'coordinates': [[[-94.853056,38.956395],[-94.851164,38.956397],[-94.849007,38.955712],[-94.849826,38.954964],[-94.851949,38.954824],[-94.852459,38.953593],[-94.85233,38.94554],[-94.851999,38.944495],[-94.848298,38.941805],[-94.844247,38.941655],[-94.843825,38.942708],[-94.843982,38.950197],[-94.844067,38.959505],[-94.844526,38.960942],[-94.8436,38.96136],[-94.842219,38.963486],[-94.843687,38.963468],[-94.844052,38.964628],[-94.844389,38.972774],[-94.844171,38.974898],[-94.838256,38.974272],[-94.838265,38.976055],[-94.836484,38.976063],[-94.836478,38.978123],[-94.844112,38.978049],[-94.844088,38.981676],[-94.825422,38.981609],[-94.821139,38.981585],[-94.821069,38.985312],[-94.816327,38.985269],[-94.80934,38.985137],[-94.810772,38.981613],[-94.809256,38.979913],[-94.807271,38.975244],[-94.804835,38.975174],[-94.803266,38.976119],[-94.801335,38.974898],[-94.7977,38.975117],[-94.797298,38.974488],[-94.797313,38.970997],[-94.797375,38.955914],[-94.795936,38.955915],[-94.797378,38.954629],[-94.797477,38.94162],[-94.807256,38.941881],[-94.812495,38.942072],[-94.816146,38.942039],[-94.830418,38.941388],[-94.852979,38.941395],[-94.853353,38.956395],[-94.853056,38.956395]]]
}
}
});
...but this doesn't with an error of: "Input data given to 'xyz' is not a valid GeoJSON object."
var data = "[[[-94.853056,38.956395],[-94.851164,38.956397],[-94.849007,38.955712],[-94.849826,38.954964],[-94.851949,38.954824],[-94.852459,38.953593],[-94.85233,38.94554],[-94.851999,38.944495],[-94.848298,38.941805],[-94.844247,38.941655],[-94.843825,38.942708],[-94.843982,38.950197],[-94.844067,38.959505],[-94.844526,38.960942],[-94.8436,38.96136],[-94.842219,38.963486],[-94.843687,38.963468],[-94.844052,38.964628],[-94.844389,38.972774],[-94.844171,38.974898],[-94.838256,38.974272],[-94.838265,38.976055],[-94.836484,38.976063],[-94.836478,38.978123],[-94.844112,38.978049],[-94.844088,38.981676],[-94.825422,38.981609],[-94.821139,38.981585],[-94.821069,38.985312],[-94.816327,38.985269],[-94.80934,38.985137],[-94.810772,38.981613],[-94.809256,38.979913],[-94.807271,38.975244],[-94.804835,38.975174],[-94.803266,38.976119],[-94.801335,38.974898],[-94.7977,38.975117],[-94.797298,38.974488],[-94.797313,38.970997],[-94.797375,38.955914],[-94.795936,38.955915],[-94.797378,38.954629],[-94.797477,38.94162],[-94.807256,38.941881],[-94.812495,38.942072],[-94.816146,38.942039],[-94.830418,38.941388],[-94.852979,38.941395],[-94.853353,38.956395],[-94.853056,38.956395]]]";
map.addSource('zip_code', {
'type': 'geojson',
'data':
{
'type':'Feature',
'geometry':
{
'type': 'Polygon',
'coordinates': data
}
}
});
I have tried about everything to dynamically set that source for a variable with no luck.
Related
mapbox - querySourceFeatures returns several arrays and the first ones are sometime blank with filter
I load my mapbox map as follows;
map.on('load', (e) => {
map.addSource('aa_winter_spoorts_points', {
type: 'vector',
url: 'mapbox://username.3t9kz8q5'
});
map.addLayer({
'id': 'aa_winter_spoorts_points',
'type': 'symbol',
'source': 'aa_winter_spoorts_points',
'source-layer': 'aa_winter_sports_points-6lir92',
'layout': {
'visibility': 'visible',
'icon-image': 'mountain-11',
'icon-allow-overlap': true
},
});
map.on("sourcedata", function(e) {
if (map.getSource('aa_winter_spoorts_points') && map.isSourceLoaded('aa_winter_spoorts_points')) {
//console.log('source loaded!');
// Find all features in one source layer in a vector source
let features = map.querySourceFeatures('aa_winter_spoorts_points', {
sourceLayer: 'aa_winter_sports_points-6lir92',
filter: ["==", "id", "way/771665618"]
});
console.log(features);
}
});
});
The above results in several lines of output. The first lines are array(0) and then a bunch of lines of [rd]/array but when I open them up they are all 0 (meaning only one array in this case) and then the data of way/771665618 but several lines. I was expecting only one record, 0, and it to hold data of way/771665618.
Any help appreciated.
Is there a way that I can connect a polygon format (JS) to a map (HTML)
I'm trying to put a polygon format from Mapbox into the Mapbox map itself (via a Github copy for a project), and I haven't yielded any results.
I did the formatting, using different files, combining them into 1 via a combiner, etc.
Polygon (JS):
map.on('load', () => {
// Add a data source containing GeoJSON data.
map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
// These coordinates outline Maine.
'coordinates': [
[
[-125.15625000000001, 48.04870994288686],
[-124.71679687499999, 43.32517767999296],
[-125.15625000000001, 39.639537564366684],
[-121.11328124999999, 34.59704151614417],
[-121.11328124999999, 34.59704151614417],
[-117.158203125, 32.47269502206151],
[-105.732421875, 31.27855085894653],
[-97.20703125, 25.64152637306577],
[-84.287109375, 29.84064389983441],
[-80.947265625, 24.84656534821976],
[-74.970703125, 35.38904996691167],
[-66.62109375, 45.02695045318546],
[-68.73046875, 47.39834920035926],
[-71.455078125, 44.84029065139799],
[-82.880859375, 41.96765920367816],
[-88.154296875, 48.22467264956519],
[-109.072265625, 49.03786794532644],
[-123.134765625, 49.15296965617042],
[-125.15625000000001, 48.04870994288686],
]
]
}
}
});
// Add a new layer to visualize the polygon.
map.addLayer({
'id': ' ',
'type': 'fill',
'source': 'maine', // reference the data source
'layout': {},
'paint': {
'fill-color': '#0080ff', // blue color fill
'fill-opacity': 0.2
}
});
// Add a black outline around the polygon.
map.addLayer({
'id': 'outline',
'type': 'line',
'source': 'maine',
'layout': {},
'paint': {
'line-color': '#000',
'line-width': 0
}
});
});
Said remaining copies of code are located in https://github.com/AliCodes-Beep/Google-Map-Clone
Mapbox GeoJSON or Plain Lat and Long for Database Storage
I am new to working with maps. My issue is I don't understand if I need to store data in my database as geoJSON or just store the coordinates and create custom markers with popups which is what I need to do. My database is MongoDB, although it shouldn't really matter for this. In geoJSON Mapbox parses the data like so:
const geojson = {
'type': 'FeatureCollection',
'features': [
{
// feature for Mapbox DC
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
-77.03238901390978, 38.913188059745586
]
},
'properties': {
'title': 'Mapbox DC'
}
},
{
// feature for Mapbox SF
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-122.414, 37.776]
},
'properties': {
'title': 'Mapbox SF'
}
}
]
}
The example data
map.current.addSource('points', {
'type': 'geojson',
'data': geojson
});
The data being parsed (part of the code, it's in load image for the custom markers thing I was talking about it.)
mapbox GL JS - pass source data to custom layer
I've added some quads with custom shaders to map (Examples are here and here). I need to pass data from my source to shader. Tutorials says that I can just pass 'source': 'point', to layer class constructor. Is it possible to pass source data to custom layer?
Here is source example:
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}
]
}
});
Cusotm markers in mapbox gl js does not work?
I'm trying to add custom markers to a mapbox map using the example from their site https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/ but everytime I replace their link with mine (same photo format) or any link, it does not matter, the photo does not render, if anyone is able to show me a working example with a custom photo/marker. I need it to work using this example, I was able to add custom markers in another way but I need this specific way with .addSource and .addLayer
mapboxgl.accessToken = 'pk.eyJ1IjoibWFya2V0aW5nYnNvIiwiYSI6ImNrYnYwZmk3YjAxZjgyem1wY2Zmc3F4Y2EifQ.gMF-eCCaAHHgWIUoRcnfkg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
map.on('load', function() {
// Add an image to use as a custom marker
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', //here is the problem if i try to replace the image
function(error, image) {
if (error) throw error;
map.addImage('custom-marker', image);
// Add a GeoJSON source with 2 points
map.addSource('points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
// feature for Mapbox DC
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
-77.03238901390978,
38.913188059745586
]
},
'properties': {
'title': 'Mapbox DC'
}
},
{
// feature for Mapbox SF
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-122.414, 37.776]
},
'properties': {
'title': 'Mapbox SF'
}
}
]
}
});
// Add a symbol layer
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout': {
'icon-image': 'custom-marker',
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
});
Based on the documentation of map.loadImage, if you are loading that image from an External domain, that domain must support CORS (Cross-Origin Resource Sharing). As you are not including what's the image your are trying to load, I cannot verify it, but it seems it's related to that. EDITED: if you need a CORS-enabled server to upload your image, you can try to use any of the available image uploader servers such as https://postimg.cc/. but I wouldn't recommend this approach beyond a simple PoC. I have tried your code with this image and I have created a fiddle with it on how to add a custom image for a marker... and it works, so as said the code is right but the issue you are experiencing is because the image you are trying to use is not hosted in a CORS enabled domain. If this solution solves your issue, please mark it as 'answer accepted', this way will also help other users to know it was the right solution.