I based my map on the mapbox example. Markers there are set to 'circles'. How to add a custom marker by url, in case of the following code?
function makeGeoJSON(csvData) {
csv2geojson.csv2geojson(
csvData,
{
latfield: "Latitude",
lonfield: "Longitude",
delimiter: ","
},
function(err, data) {
data.features.forEach(function(data, i) {
data.properties.id = i;
});
geojsonData = data;
// Add the the layer to the map
map.addLayer({
id: "locationData",
type: "circle",
source: {
type: "geojson",
data: geojsonData
},
paint: {
"circle-radius": 5, // size of circles
"circle-color": "green", // color of circles
"circle-stroke-color": "white",
"circle-stroke-width": 1,
"circle-opacity": 0.7
}
});
}
);
You need to use map.loadImage and map.addImage to add the custom icon, as in this Mapbox example:
map.loadImage('http://placekitten.com/50/50', function(error, image) {
if (error) throw error;
// Add the loaded image to the style's sprite with the ID 'kitten'.
map.addImage('kitten', image);
});
Then you need to use a symbol layer referencing that icon (kitten in this case).
Related
Im using Mapbox GL API, and I run into the issue that if I add 2 tile layers, that the opacity of the second layer in the paint object is ignored. Does anyone have any idea why this is? In the browser both tile layers have opacity 1.
let style1 = {
id: "source1-tile",
type: "raster",
source: "source1",
paint: {
"raster-opacity": 1.0
},
}
this.map.addLayer(style1);
let style2 = {
id: "source2-tile",
type: "raster",
source: "source2",
paint: {
"raster-opacity": 0.5
},
}
this.map.addLayer(style2);
// print result
console.log(this.map.getStyle().layers)
// this shows the following:
/*
[
{
id: "source1-tile"
paint: Object { "raster-opacity": 1 }
source: "source1"
type: "raster"
},
{
id: "source2-tile"
source: "source2"
type: "raster"
}
]
*/
Pay attention to add layers in map.load event. I've made this example based on mapbox-gl examples. Easily You could add more raster layers with different opacity.
mapboxgl.accessToken = 'pk.eyJ1IjoibHN0aXoiLCJhIjoiY2s5dGtnNTZ2MWVybzNobjEyam0yd2E3MyJ9.6dCvGbS93SKGMbOqZA4Qag';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [-87.62, 41.86],
zoom: 9
});
map.on('load', () => {
map.addSource('chicago', {
'type': 'raster',
'url': 'mapbox://mapbox.u8yyzaor'
});
map.addLayer({
'id': 'chicago',
'source': 'chicago',
'type': 'raster'
});
map.setPaintProperty(
'chicago',
'raster-opacity',
0.5
);
});
I want to highlight fill-extrusion features when hovered over them.
The styling related to this is straight-forward using expressions and feature state, but I am having trouble retrieving the correct features.
There is code available online to change the feature state when hovered over, and it seems straight-forward enough, so I adapted it:
var hover_id = null;
const feature_state = { hover: true }
map.on('mousemove', '3d-buildings', (e) => {
// Get features under cursor, following render order
const features = map.queryRenderedFeatures(e.point);
// Check that features are not empty
if (features.length > 0) {
// Clean up previously hovered feature
if (hover_id) {
map.removeFeatureState({source: "composite", sourceLayer: 'building', id: hover_id});
}
// Set feature state of the new hovered feature
hover_id = features[0].id;
map.setFeatureState({source: 'composite', sourceLayer: 'building', id: hover_id}, feature_state);
console.log(hover_id)
}
});
While this works well initially, it stops working as soon as I tilt the camera using the right mouse button. After tilting, the foremost element no longer gets selected (something else seems to get selected and an ID gets printed out, but nothing shows up on the map and no error is thrown).
On a related note, the correct feature only gets selected after zooming in quite far - there is a large zoom range where the buildings already get rendered to the screen, but seem to not get picked up by queryRenderedFeatures. Is this expected behaviour?
Expected behaviour:
map.queryRenderedFeatures(...)[0] selects the foremost feature, independent of the camera tilt.
What could be a possible reason for the camera tilt influencing the feature selection? Is this a bug or am I misusing the API?
I think the issue you’re facing has nothing to do with tilt but with the fact that you’re adding and removing the state instead of changing the value of the state. The state must be declared in the layer definition, change the color with a expression, and then you only need to change the value of the state.
Here you have a fiddle I have created to show how to change color of fill extrusions on mouse over/out
Relevant code is this:
let mapConfig = {
NYC: {
origin: [-74.044514, 40.689259, 39],
center: [-74.0137, 40.70346, 0],
zoom: 16.2,
pitch: 60,
bearing: 35
}
}
mapboxgl.accessToken = 'PUT YOUR TOKEN HERE';
let point = mapConfig.NYC;
var map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/streets-v11',
center: point.center,
zoom: point.zoom,
pitch: point.pitch,
bearing: point.bearing,
container: 'map',
antialias: true,
hash: true
});
map.on('style.load', function() {
if (map.getSource('composite')) {
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'type': 'fill-extrusion',
'minzoom': 14,
'paint': {
'fill-extrusion-color': [
'case',
['boolean', ['feature-state', 'hover'], false],
'#ff0000',
'#ddd'
],
'fill-extrusion-height': ["number", ["get", "height"], 5],
'fill-extrusion-base': ["number", ["get", "min_height"], 0],
'fill-extrusion-opacity': 1
}
}, 'road-label');
}
let fHover;
map.on('mousemove', function(e) {
//157001066
var features = map.queryRenderedFeatures(e.point, {
layers: ['3d-buildings']
});
if (features[0]) {
mouseout();
mouseover(features[0]);
} else {
mouseout();
}
});
map.on('mouseout', function(e) {
mouseout();
});
function mouseout() {
if (!fHover) return;
map.getCanvasContainer().style.cursor = 'default';
map.setFeatureState({
source: fHover.source,
sourceLayer: fHover.sourceLayer,
id: fHover.id
}, {
hover: false
});
}
function mouseover(feature) {
fHover = feature;
map.getCanvasContainer().style.cursor = 'pointer';
map.setFeatureState({
source: fHover.source,
sourceLayer: fHover.sourceLayer,
id: fHover.id
}, {
hover: true
});
}
});
If this answer solves your question, please mark it as answer accepted in that way it will also help other users to know it was the right solution.
#jscastro This works fine: My requirement is I need to change the color of few buildings with lat and lng. I have achieved getting buildings id's from lat and lng by using below API
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2/tilequery/55.26365875255766,25.188400365955193.json?radius=30&limit=10&dedupe&access_token=.
I am facing one issue here, The colors are changing only after zoom level 17. I want to change the color on zoom level 15.
map.on("style.load", function () {
if (map.getSource("composite")) {
const layers = map.getStyle().layers;
const labelLayerId = layers.find(
(layer) => layer.type === "symbol" && layer.layout["text-field"]
).id;
map.addLayer(
{
id: "3d-buildings",
source: "composite",
"source-layer": "building",
filter: ["==", "extrude", "true"],
type: "fill-extrusion",
minzoom: 15,
zoom: 15,
pitch: 60,
bearing: -60,
layout: {
// Make the layer visible by default.
visibility: "visible",
},
paint: {
"fill-extrusion-color": [
"case",
["boolean", ["feature-state", "hover"], false],
"#00ff00",
"#AED0EC",
],
"fill-extrusion-height": [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.5,
["get", "height"],
],
"fill-extrusion-base": [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "min_height"],
],
"fill-extrusion-opacity": 1,
},
},
labelLayerId
);
}
map.getCanvasContainer().style.cursor = "pointer";
map.setFeatureState(
{
source: "composite",
sourceLayer: "building",
id: "4411722601841895",
},
{
hover: true,
}
);
map.getCanvasContainer().style.cursor = "pointer";
map.setFeatureState(
{
source: "composite",
sourceLayer: "building",
id: "1315660041727095",
},
{
hover: true,
}
);
map.getCanvasContainer().style.cursor = "pointer";
map.setFeatureState(
{
source: "composite",
minzoom: 15,
sourceLayer: "building",
id: "3957345234349675",
},
{
hover: true,
}
);
map.getCanvasContainer().style.cursor = "pointer";
map.setFeatureState(
{
source: "composite",
sourceLayer: "building",
id: "5328485811",
},
{
hover: true,
}
);
});
I have added layer in mapbox, and then add click on it to trigger popups. That works fine and looks like this:
map.addLayer({
"id": "circle",
"type": "circle",
"source": "companies",
"paint": {
"circle-radius": 20,
"circle-color": "#C6DB3E",
"circle-opacity": {
"stops": [[3, 0.1], [22, 0.8]]
}
}
});
And here I select that layer for triggering popup:
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ["circle"]
});
if (!features.length) {
return;
}
var feature = features[0];
console.log(feature);
// Populate the popup and set its coordinates and content
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML('...')
.addTo(map);
});
But problem appears when I changed layer to use dynamic circle-radius, and layer now looks like this:
map.addLayer({
"id": "circle",
"type": "circle",
"source": "companies",
"paint": {
"circle-radius": {
property: 'Size',
type: 'identity'
},
"circle-color": "#C6DB3E",
"circle-opacity": {
"stops": [[3, 0.1], [22, 0.8]]
}
}
});
This layers is also printed properly to the map. But I cannot click on it to get a popup. So after changing circle-radius, ID is not clickable.
Funny is that if I consoleLog ID's with map.getStyle().layers, ID appears in console, with all other layers.
No errors.
The style syntax for circle-radius is not valid. See Mapbox Style Spec for expressions or this other answer.
Also: You can simplify the click handler by providing the id of the layer as the second parameter:
map.on('click', 'circle', function (e) {
var features = e.features;
if (!features.length) {
return;
}
var feature = e.features[0];
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(feature.properties.someProperty)
.addTo(map);
});
Mapbox has an example of this on their site: https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/
I updated mapbox and it worked fine, with code I posted in question. I also tried what u suggested and it works too. Thanks #Eczajk! At the end I ended up with this code for circle radius:
"circle-radius": {
property: 'Size',
type: 'exponential',
stops: [
[4, 4],
[170, 170]
]
}
And here is explained example: https://www.mapbox.com/help/gl-dds-map-tutorial/
This is what my dataset looks like:
Seattle Crime Dataset
What I want to do is change the extrusion height based on the frequency column. I can successfully display these as points but I'm struggling with it whenever I use fill-extrusion. Can you help point me in the right direction?
map.addLayer({
'id': 'total',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://askakdagr8.9tklrr8g'
},
'source-layer': 'GroupedOutput-9i6ink',
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [
[12, 2],
[22, 180]
]
},
'circle-color': '#ff7770'
}
});
Since the mapbox-gl-js does not currently have functionality for extruding a circle, you need to replace the points with a polygon, and interpolating the circle, for example, by a function turf.circle:
map.on('sourcedata', function(e) {
if (e.sourceId !== 'total') return
if (e.isSourceLoaded !== true) return
var data = {
"type": "FeatureCollection",
"features": []
}
e.source.data.features.forEach(function(f) {
var object = turf.centerOfMass(f)
var center = object.geometry.coordinates
var radius = 10;
var options = {
steps: 16,
units: 'meters',
properties: object.properties
};
data.features.push(turf.circle(center, radius, options))
})
map.getSource('extrusion').setData(data);
})
[ http://jsfiddle.net/zjLek40n/ ]
I am having some problems with setting an icon for a feature layer. I keep getting layer.setIcon is not a function and similar errors. How can I change the icon style for this layer?
var layer = L.mapbox.featureLayer()
.loadURL(attrs.geoJsonSource)
.addTo(map);
layer.on('ready', function() {
this.eachLayer(function(layer){
layer.setIcon(L.mapbox.marker.icon({
'marker-color': '#8834bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}))
});
map.fitBounds(featureLayer.getBounds());
});
You can take a look at https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/ and http://leafletjs.com/examples/custom-icons/ to get more information, but apparently you may fit your need:
using your own icon style. (FIRST)
and/or
using geoJSON file icon style. (SECOND)
The code:
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 9);
var layer = L.mapbox.featureLayer().addTo(map);
layer.on('layeradd', function(e) {
var marker = e.layer,feature = marker.feature;
// TWO POSSIBILITIES
// FIRST // your own method to define how icon will be rendered
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#8834bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}));
// SECOND // use json directly to define how icon will be rendered
//marker.setIcon(L.mapbox.marker.icon(feature.properties.icon));
});
layer.setGeoJSON(geoJson);
assuming the geoJSON file look like this:
var geoJson = [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-75.00, 40]
},
"properties": {
"title": "Small astronaut",
"icon": {
'marker-color': '#0034bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.00, 40]
},
"properties": {
"title": "Big astronaut",
"icon": {
'marker-color': '#8834bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}
}
}];
I am not sure why, but none of the proposed solutions work for me. Instead I have to iterate through the layers of the layer.
layer.on('layeradd', function(e) {
var marker = e.layer, feature = marker.feature;
e.layer.getLayers().forEach(function(marker) {
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#8834bb',
'marker-size': 'large',
'marker-symbol': 'restaurant'
}));
})
});
You can use the simple style spec to style the geojson. Looks like this needs to happen before you add it to the feature layer. You could try running eachLayer instead of the for loop, then adding that layer to another feature layer, once the geojson has the style/icons you want. This is modified from the original example. Or you could just use the Leaflet pointToLayer function as shown below.
var key = 'your key here'
L.mapbox.accessToken = key;
var map = L.mapbox.map('map')
.setView([37.8, -96], 3);
var geojson = [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-77.031952, 38.913184]
},
properties: {
title: 'Title'
}
}
];
//Option A - set the properties of the geojson using the simple style spec supported in mapbox.js for mapbox feature layers
/*for(i = 0; i < geojson.length; i++) {
geojson[i].properties['marker-color'] = '#63b6e5';
geojson[i].properties['marker-size'] = 'large';
geojson[i].properties['marker-symbol'] = 'rocket';
}*/
//Option B - use the native leaflet function for points - very simple and extendable to other icon plugins
var features = L.geoJson(geojson, {
pointToLayer: function(feature, latlng){
return new L.marker(latlng, {
icon: L.mapbox.marker.icon({
'marker-color': '#00f',
'marker-symbol': 'star'
})
})
}
}).addTo(map);
body { margin:0; padding:0; }
.map { position:absolute; top:0; bottom:0; width:100%; }
<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<div id='map' class='map'></div>