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
);
});
Related
I am trying to draw a line between two points using react-map-gl library. I can not find example from the official document, So I am trying to reproduce same behavior from following code snippet which use Mapbox library
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-122.486052, 37.830348],
zoom: 15
});
map.on('load', function() {
map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.483696, 37.833818],
[-122.493782, 37.833683]
]
}
}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});
});
Here is the sandbox, I do not see any errors on the console but the line is not displayed:
https://codesandbox.io/s/draw-line-between-two-point-v0mbc?file=/src/index.js:214-226
The code in the sandbox actually works (for me anyway), but is misleading because the line drawn is nowhere near the viewport.
A couple of things to note are that coordinates are an array given in [long, lat] which may not be what most people would assume. For example, if you cut and paste [lat,long] from google maps for San Fransisco, you get [37.77909036739809, -122.41510269913951]. Then you'll have to reverse those and put them in:
const dataOne = {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[-122.41510269913951, 37.77909036739809],
[39.5423, -77.0564]
]
}
};
Also, the sample code has some cruft in it. Edit the variable dataOne not the other unused place.
Now you'll see a line from San Fransisco to some random spot in the middle of Antarctica that was really easy to miss.
Just in case the link goes bad, the full code is:
import React, { Component } from "react";
import { render } from "react-dom";
import ReactMapGL, { Source, Layer } from "react-map-gl";
class App extends Component {
constructor(props) {
super(props);
this.state = {
viewport: {
latitude: 38.63738602787579,
longitude: -121.23576311149986,
zoom: 6.8,
bearing: 0,
pitch: 0,
dragPan: true,
width: 600,
height: 600
}
};
}
render() {
const { viewport } = this.state;
const MAPBOX_TOKEN =
"pk.eyJ1Ijoic21peWFrYXdhIiwiYSI6ImNqcGM0d3U4bTB6dWwzcW04ZHRsbHl0ZWoifQ.X9cvdajtPbs9JDMG-CMDsA";
const dataOne = {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[-122.41510269913951, 37.77909036739809],
[39.5423, -77.0564]
]
}
};
return (
<ReactMapGL
{...viewport}
mapboxApiAccessToken={MAPBOX_TOKEN}
onViewportChange={(newViewport) => {
this.setState({ viewport: newViewport });
}}
>
<Source id="polylineLayer" type="geojson" data={dataOne}>
<Layer
id="lineLayer"
type="line"
source="my-data"
layout={{
"line-join": "round",
"line-cap": "round"
}}
paint={{
"line-color": "rgba(3, 170, 238, 0.5)",
"line-width": 5
}}
/>
</Source>
</ReactMapGL>
);
}
}
render(<App />, document.getElementById("root"));
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).
I try to simplify my codebase for an ongoing project. I render different lines from different sources. Adding the source and layer one by one works as expected. But if I put this in an object it won't work. I even have no errors in the console. Now I am stuck at the following code
var trip_entries = {
t2: {
trip_id: 'trip-entry-2',
trip_geojson: '[[-0.15591514, 51.51830379],[-0.07571203, 51.51424049],[-0.08533793, 51.50438536],[-0.085793, 51.5036],[-0.084793, 51.503336],[-0.089793, 51.505336]]'
},
t3: {
trip_id: 'trip-entry-3',
trip_geojson: '[[-0.15514, 51.518],[-0.075703, 51.515],[-0.085793, 51.50],[-0.0793, 51.506],[-0.08473, 51.50336],[-0.0893, 51.536]]'
},
};
// Set route
$.each(trip_entries,function(key,value){
// Add sources
map.addSource(value.trip_id,{
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': value.trip_geojson
}
},
],
},
});
// Add layers
map.addLayer({
'id': value.trip_id,
'type': 'line',
'source': value.trip_id,
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': 'rgb(160,160,160)',
'line-width': 6,
}
});
});
You are passing the geoJSON as a string, rather than an array of coordinates. You should remove the ' ' on both of your geoJSONs to get the code to run. See below:
mapboxgl.accessToken =
"pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2s3MHkzZ3VnMDFlbDNmbzNiajN5dm9lOCJ9.nbbtDF54HIXo0mCiekVxng";
var map = new mapboxgl.Map({
container: "map", // container id
style: "mapbox://styles/mapbox/streets-v11", // stylesheet location
center: [-0.084793, 51.503336], // starting position [lng, lat]
zoom: 11 // starting zoom
});
var trip_entries = {
t2: {
trip_id: "trip-entry-2",
trip_geojson: [
[-0.15591514, 51.51830379],
[-0.07571203, 51.51424049],
[-0.08533793, 51.50438536],
[-0.085793, 51.5036],
[-0.084793, 51.503336],
[-0.089793, 51.505336]
]
},
t3: {
trip_id: "trip-entry-3",
trip_geojson: [
[-0.15514, 51.518],
[-0.075703, 51.515],
[-0.085793, 51.5],
[-0.0793, 51.506],
[-0.08473, 51.50336],
[-0.0893, 51.536]
]
}
};
map.on("load", function () {
// Set route
$.each(trip_entries, function (key, value) {
// Add sources
map.addSource(value.trip_id, {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: value.trip_geojson
}
}
]
}
});
// Add layers
map.addLayer({
id: value.trip_id,
type: "line",
source: value.trip_id,
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": "rgb(160,160,160)",
"line-width": 6
}
});
});
});
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />
<div id="map"></div>
I am trying to add an event listener to an image layer with mapbox gl, but it doesn't seem to work, is it even possible with this type of layer? Here is a codepen demonstrating the problem:
https://codepen.io/anon/pen/drBdLm
var mapStyle = {
'version': 8,
'sources': {},
'layers': []
}
var map = new mapboxgl.Map({
container: 'map',
maxZoom: 5,
minZoom: 1,
zoom: 5,
center: [-75.789, 41.874],
style: mapStyle
})
map.on('load', function() {
map.addSource('firstim', {
type: 'image',
url: 'https://small-systems.org/dev/093-hvb/cms/site/assets/files/1104/6_umspannwerk_sellerstrasse.700x0.jpg',
coordinates: [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
})
map.addLayer({
id: 'images',
type: 'raster',
source: 'firstim',
paint: { 'raster-opacity': 1 }
})
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['images'] });
var clusterId = features[0];
// console.log(clusterId)
});
map.on('click', 'images', function (e) {
console.log(e)
});
})
I've tried adding a an event on the layer with map.on('click', layerID, function), but it does't work. Neither does using queryRenderedFeatures.
Thanks for any help.
This is not implemented yet https://github.com/mapbox/mapbox-gl-js/issues/1404.
As a workaround you'll need to listen to all click events and then do your own test to see if the click is within the bounds of your image.
I have a layer full of state border "Features". When a user clicks on a State, I want to move that state's Feature to the top of the stack (z-index wise).
export function drawStateBorders() {
$.getJSON('https://www.mapbox.com/mapbox-gl-js/assets/us_states.geojson').then((data) => {
this.stateGeoJSON = data;
this.map
.addSource('states', {
type: 'geojson',
data,
})
.addLayer({
id: 'state-borders',
type: 'line',
source: 'states',
paint: {
'line-color': [
'case', ['boolean', ['feature-state', 'selected'], false],
'#8d8b76',
'#bfe2ab',
],
'line-width': [
'case', ['boolean', ['feature-state', 'selected'], false],
6,
3,
],
},
});
});
}
When I select the state
export function stateSelected(state) {
const stateFeatures = this.map.queryRenderedFeatures({
layers: ['state-borders'],
filter: [
'==', 'STATE_NAME', state,
],
});
const features = this.stateGeoJSON.features;
const currentFeature = stateFeatures[0];
if (!currentFeature) {
return;
}
// same state
if (currentFeature.id === this.selectedStateId) return;
// move to front HERE ?????
// old selected state
if (this.selectedStateId) {
this.map.setFeatureState({
source: 'states',
id: this.selectedStateId,
}, {
selected: false,
});
}
this.selectedStateId = currentFeature.id;
this.map.setFeatureState({
source: 'states',
id: this.selectedStateId,
}, {
selected: true,
});
}
So far I've tried
features.splice(features.indexOf(currentFeature), 1);
features.push(currentFeature);
this.map.getSource('states').setData(this.stateGeoJSON);
This seems to do some really crazy stuff to the array (duplicating some states, removing others). No idea what's happening
Adding the state to another layer worked (thanks #AndrewHarvey for the advice).
In case anyone is interested here is my code
export function stateSelected(state) {
const features = this.stateGeoJSON.features;
const currentFeature = features.find(s => s.properties.NAME === state);
if (!currentFeature) {
return;
}
// removes active layer
this.removeLayersContaining('state-borders-active');
this.drawActiveStateLayer(currentFeature);
}
export function drawActiveStateLayer(feature) {
this.map
.addLayer({
id: 'state-borders-active',
type: 'line',
source: {
type: 'geojson',
data: feature
},
paint: {
'line-color': '#8d8b76',
'line-width': 6,
},
});
}
export function drawStateBorders() {
$.getJSON('states.json').then((data) => {
this.stateGeoJSON = data;
this.map
.addSource('states', {
type: 'geojson',
data,
})
.addLayer({
id: 'state-borders',
type: 'line',
source: 'states',
paint: {
'line-color': '#bfe2ab',
'line-width': 3,
},
});
});
Also this is the shapefile I'm using: http://eric.clst.org/assets/wiki/uploads/Stuff/gz_2010_us_040_00_500k.json