CODEWITHSUNDEEP
mapboxmapbox-gl-js
David
David

Reputation: 825

Mapbox GL-JS : Adding a pattern to a polygon

I am closely following the example at this link at Mapbox documentation to add a pattern to a polygon. I have simply taken their code and added it to my map using an onClick event. It is very simple and basic. I am unable to figure out how to use my own data, though. They use manually entered coordinates. I wish to use my own local JSON file. How do I do this? Here is my code that works : (it is literally copied/pasted from the Mapbox tutorial, but this is my actual code that is working)

function test() {


// Add GeoJSON data
map.addSource('source', {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-30, -25],
[-30, 35],
[30, 35],
[30, -25],
[-30, -25]
]]
}
}
});

// Load an image to use as the pattern
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png', function(err, image) {
// Throw an error if something went wrong
if (err) throw err;

// Declare the image
map.addImage('pattern', image);

// Use it
map.addLayer({
"id": "pattern-layer",
"type": "fill",
"source": "source",
"paint": {
"fill-pattern": "pattern"
}
});
});

}

So, how do I use my own data? I have tried the following below and many (10+) variations and I can't get this to work. Below is just an example of what I am trying to do. 

map.addSource('source', {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"data": "folder/sample.json"
 },

}
}
});

Upvotes: 0

Views: 1194

Answers (1)

AndrewHarvey
AndrewHarvey

Reputation: 3055

map.addSource('source', { "type": "geojson", "data": "folder/sample.json" });

See https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson

Upvotes: 2

Related Questions