I am trying to build a custom polygon and extrude it to the desired height using a geojson format for the data of the layer. I cannot, however, get the layer to appear on the map.
Here is what my code currently looks like:
map.on('load', function() {
map.addLayer({
"id": "points",
"type": "fill-extrusion",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"height": 20
},
"geometry": {
"type": "Polygon",
"coordinates": [[-77.95156674578604,43.21028611031018],[-77.9515685764367,43.21023621803456],[-77.95164127121708,43.21023640149863],[-77.95163950226289,43.20994159756599],[-77.95156746849948,43.20994229766657],[-77.95156608216422,43.20984647340193],[-77.95163884784701,43.2098471878642],[-77.95163818870492,43.20974779426955],[-77.95156665824665,43.20974844351096],[-77.95156615562892,43.2096483942845],[-77.95163707195606,43.20964807835471],[-77.95163793551596,43.20955241242493],[-77.95156647756606,43.20955241987652],[-77.9515664774183,43.2094545892833],[-77.95163793511105,43.20945458922404],[-77.95163696894726,43.20935746267753],[-77.95156551159552,43.20935675861833],[-77.95156647716871,43.20929763788168],[-77.95105728862093,43.20929848258431],[-77.95105728634326,43.20935651174059],[-77.95094326166087,43.20935664235909],[-77.9509445324407,43.2094533024724],[-77.95105528277132,43.20945365396392], [-77.95105519319713,43.20955170962569],[-77.9509434596672,43.20955220425741],[-77.95094421091157,43.20964816606944],[-77.95105501443713,43.20964756032618],[-77.95105491497931,43.20974624410085], [-77.95094329958742,43.20974576773256],[-77.95094365714365,43.20984690983914],[-77.95105721793563,43.20984632462195],[-77.95105737381726,43.20994209364298], [-77.95094302334114,43.2099429224098], [-77.95094306509297,43.21003748562214],[-77.95105440575118,43.21003746846881],[-77.95105570050066,43.21013103703177],[-77.95094276571092,43.21013059432006],[-77.95094112502309,43.21023730976442],[-77.95105416431622,43.21023720143463],[-77.95105549775089,43.21028580291442],[-77.95156674578604,43.21028611031018]]
}
}]
}
},
"paint": {
"fill-extrusion-color": "#aaa",
"fill-extrusion-height": ['get', 'height']
}
});
});
Polygon is an array of LineStrings in GeoJSON (see https://en.wikipedia.org/wiki/GeoJSON#Geometries, for instance). So in your case the coordinates should look like this:
"coordinates": [[[-77.95156674578604,43.21028611031018],[-77.9515685764367,43.21023621803456],[-77.95164127121708,43.21023640149863],[-77.95163950226289,43.20994159756599],[-77.95156746849948,43.20994229766657],[-77.95156608216422,43.20984647340193],[-77.95163884784701,43.2098471878642],[-77.95163818870492,43.20974779426955],[-77.95156665824665,43.20974844351096],[-77.95156615562892,43.2096483942845],[-77.95163707195606,43.20964807835471],[-77.95163793551596,43.20955241242493],[-77.95156647756606,43.20955241987652],[-77.9515664774183,43.2094545892833],[-77.95163793511105,43.20945458922404],[-77.95163696894726,43.20935746267753],[-77.95156551159552,43.20935675861833],[-77.95156647716871,43.20929763788168],[-77.95105728862093,43.20929848258431],[-77.95105728634326,43.20935651174059],[-77.95094326166087,43.20935664235909],[-77.9509445324407,43.2094533024724],[-77.95105528277132,43.20945365396392], [-77.95105519319713,43.20955170962569],[-77.9509434596672,43.20955220425741],[-77.95094421091157,43.20964816606944],[-77.95105501443713,43.20964756032618],[-77.95105491497931,43.20974624410085], [-77.95094329958742,43.20974576773256],[-77.95094365714365,43.20984690983914],[-77.95105721793563,43.20984632462195],[-77.95105737381726,43.20994209364298], [-77.95094302334114,43.2099429224098], [-77.95094306509297,43.21003748562214],[-77.95105440575118,43.21003746846881],[-77.95105570050066,43.21013103703177],[-77.95094276571092,43.21013059432006],[-77.95094112502309,43.21023730976442],[-77.95105416431622,43.21023720143463],[-77.95105549775089,43.21028580291442],[-77.95156674578604,43.21028611031018]]]
Related
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"
},
}
}
});
map.addSource('source', {
"type": "geojson",
"data": "folder/sample.json"
});
See https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson
I'm loading an image with the following code:
map.on('load', function () {
map.loadImage('....png', function(error, image) {
if (error) throw error;
map.addImage('b7', image);
map.addLayer({
"id": "b7",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}]
}
},
"layout": {
"icon-image": "b7",
"icon-size": 0.2
}
});
});
How can i set the visibility to none, at a certain zoom level?
It looks like that you cant use map.setLayoutProperty on an loadImage. In the console, it says: Error: The layer 'b7' does not exist in the map's style and cannot be styled.
Whey i try something like:
map.setLayoutProperty( 'b7', 'visibility', 'none' );
Any ideas?
Two suggestions on how to solve this:
First, make sure your image name and layer name are different. It could be that the function is looking for b7 layer but it finds an image named b7 first (or vice versa). Either way this should be changed as it creates conflicting variables.
Second, if that doesn't work try adding your source separately instead of inside the layer.
map.addSource("mySource", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.981906, 41.742503]
},
"properties": {
"title": "title ",
"icon": "myImage",
}
}]
}
});
And then add the layer with the source.
map.addLayer({
"id": "b7",
"type": "symbol",
"source": "mySource",
"layout": {
"icon-image": "myImage",
"icon-size": 0.2
}
});
You can now call the setLayoutProperty on a zoomstart listener. Add a conditional if you want it only at a specific zoom level using map.getZoom(); You need to be setting the visibility for the layer here, not the image.
map.on('zoomstart', 'b7', function(e) {
if (map.getZoom() > 12) {
map.setLayoutProperty('b7', 'visibility', 'none');
}
})
Snippet is below, let me know if you encounter any problems.
map.on('load', function() {
map.loadImage('myImage.png', function(error, image) {
if (error) throw error;
map.addImage('myImage', image);
map.addSource("mySource", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.981906, 40.742503]
},
"properties": {
"title": "title ",
"icon": "myImage",
}
}]
}
});
map.addLayer({
"id": "b7",
"type": "symbol",
"source": "mySource",
"layout": {
"icon-image": "myImage",
"icon-size": 0.2
}
});
});
});
map.on('zoomstart', 'b7', function(e) {
if (map.getZoom() > 12) {
map.setLayoutProperty('b7', 'visibility', 'none');
}
})
Is there a way to extrude the height of mapbox Point on the map?
Having the following example:
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [14.422063225409431,50.08273361716846]
},
"properties": {
"height": 12,
"base_height": 10,
"title": "Mapbox DC",
"marker-symbol": "spaceti-maintenance"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [14.421896271941648,50.08259946060207]
},
"properties": {
"height": 12,
"base_height": 10,
"title": "Mapbox SF",
"marker-symbol": "spaceti-maintenance"
}
}]
}
});
map.addLayer({
"id": "markers",
"source": "markers",
//"type": "symbol",
"type":"fill-extrusion",
// "layout": {
// "icon-image": "{marker-symbol}",
// "text-field": "{title}",
// "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
// "text-offset": [0, 0.6],
// "text-anchor": "top"
// },
"paint": {
// See the Mapbox Style Spec for details on property functions
// https://www.mapbox.com/mapbox-gl-style-spec/#types-function
"fill-extrusion-color": "#424242",
"fill-extrusion-height": {
// Get fill-extrusion-height from the source "height" property.
"property": "height",
"type": "identity"
},
"fill-extrusion-base": {
// Get fill-extrusion-base from the source "base_height" property.
"property": "base_height",
"type": "identity"
},
// Make extrusions slightly opaque for see through indoor walls.
"fill-extrusion-opacity": 0.90
}
});
am I able to use both layout and paint properties of the layer assuming that I want to have marker with custom icon + extrusion height? I am building indoor navigation with multiple floor, that is the reason.
It's not possible at this time to extrude points, however, you can convert these to (small) circles and extrude them based on your values. Looks like some similar requests for point cloud support is here:
https://github.com/mapbox/mapbox-gl-js/issues/3450 so you may be able to follow the progress should it makes its way into new releases.
I've followed both the example at Mapbox site and this instruction on GitHub but can't get markers to show on my map:
http://codepen.io/znak/pen/waPPRj (using Mapbox style and sprites)
http://codepen.io/znak/pen/PqOEyV (using custom style and sprites)
var center = [51.5, -0.1];
var map = new mapboxgl.Map({
container: 'map',
center: center,
zoom: 8,
style: 'https://www.mapbox.com/mapbox-gl-styles/styles/mapbox-streets-v7.json'
});
// Markers
map.on('style.load', function() {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.48, -0.08]
},
"properties": {
"title": "Lorem",
"marker-symbol": "default_marker"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.52, -0.12]
},
"properties": {
"title": "Ipsum",
"marker-symbol": "secondary_marker"
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}",
"text-field": "{title}",
"text-font": "Open Sans Semibold, Arial Unicode MS Bold",
"text-offset": [0, 0.6],
"text-anchor": "top"
},
"paint": {
"text-size": 14
}
});
});
All styles, JSON and PNG files with markers seem to load properly.
Any ideas?
The GeoJSON layer type of Mapbox GL JS follows the GeoJSON specification, which requires that coordinates be in longitude, latitude order. Your examples have them reversed. Flipping them shows the markers, which have the correct icons.
"geometry": {
"type": "Point",
"coordinates": [-0.12, 51.52]
}
I have a GeoJSON file containing POIs that I'd like to be able to display within a separate GraphHopper layer. After several tries and search over internet, I just can't manage to get a way to do it.
This is a sample of the GeoJSON file (I checked the whole file with JSON validator and it was OK).
{"type": "Feature",
"properties": {
"fee": "no",
"bicycle_parking": "anchors",
"ref": "PVNAN23",
"address": "Rue Gabriel Goudy 44200 Nantes",
"name": "Pirmil P+R",
"capacity": "24",
"park_ride": "yes",
"amenity": "bicycle_parking",
"covered": "yes"
},
"geometry": {"type": "Point", "coordinates": [-1.5406709, 47.1960031]}},
{"type": "Feature",
"properties": {
"bicycle_parking": "stands",
"addr:postcode": "44000",
"addr:country": "FR",
"name": "Madeleine",
"capacity": "6",
"amenity": "bicycle_parking",
"addr:street": "chaussée de la Madeleine",
"note": "vérifié",
"addr:city": "Nantes",
"covered": "no",
"addr:housenumber": "35"
},
"geometry": {"type": "Point", "coordinates": [-1.55076671448, 47.21000114109]}}
]}
I tried what is explained in How to load external geojson file into leaflet map but I cannot get it working.
If your JSON is valid that doesn't mean you're working with a valid GeoJSON object. For instance: {"foo": "bar"} is perfectly valid JSON but in no way a valid GeoJSON object. L.GeoJSON, leaflet's GeoJSON layer expects a FeatureCollection or an array containing Features.
A valid FeatureCollection:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": 1
},
"geometry": {
"type": "Point",
"coordinates": [0,0]
}
},{
"type": "Feature",
"properties": {
"id": 2
},
"geometry": {
"type": "Point",
"coordinates": [1,1]
}
}]
}
Or just the array with features:
[{
"type": "Feature",
"properties": {
"id": 1
},
"geometry": {
"type": "Point",
"coordinates": [0,0]
}
},{
"type": "Feature",
"properties": {
"id": 2
},
"geometry": {
"type": "Point",
"coordinates": [1,1]
}
}]
(Note that just an array of features isn't a valid GeoJSON object but Leaflet will handle it without problems)
To load these into a L.GeoJson layer you'll need to make them available in your script. You could simple declare the object before you create the layer. For example:
// Declare GeoJSON object
var geojson = {
type: "FeatureCollection",
features: [
// Features here
]
}
// Create a new GeoJSON layer with geojson object
// And add to map (assuming your map instance is assigned to "map")
var layer = new L.GeoJSON(geojson).addTo(map);
But that will become quite a mess when you've got lots of features and it's always better to keep your logic and data separated so you should put your data object in a separate file. So let's say you've got the object stored in a file called "geo.json", then you can load the file with XHR/AJAX solution of your choice. I'm using jQuery in the following example:
// Fetch geo.json file and assign the data to geojson variable
$.getJSON('geo.json', function (geojson) {
// Create a new GeoJSON layer with GeoJSON object
// And add to map (assuming your map instance is assigned to "map")
var layer = new L.GeoJSON(geojson).addTo(map);
});
Here a working example on Plunker: http://plnkr.co/edit/Mh8p4F?p=preview