I am getting the following error:
Cannot set property 'map' of undefined
Can anyone help me with this?
My code is below:
map: mapboxgl.Map;
ionViewWillEnter()
{
mapboxgl.accesstoken=...
function loadMap(lng,lat) {
this.map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/light-v9',
center: [lng, lat],
zoom: 10,
pitch: 80,
minZoom: 3,
maxZoom: 17,
container: 'map'
});....}
I solved it by declaring first a variable that to this and referencing that then
Related
How to check cursor is moved outside the map in mapbox?
I want an event that will check cursor is moved outside the map.
Please take a look at the mouseleave event.
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
var mouseTarget = document.getElementById('map');
mouseTarget.addEventListener('mouseleave', e => {
console.log('mouseleave');
});
I am a beginner in mapbox JS GL. I am looking for a way to give the user the opportunity to change visibility of layer in mapbox on button click.
In MapBox studio I add to Basic style visible layer "regions". I tried to do so :
<script> ...
var mapp = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
center: [34.047, 63.779],
zoom: 5.41
});
mapp.setLayoutProperty('regions','visibility','none');
But the layer does not disappear.
And when I try get layers from style:
var v = mapp.getStyle().layers;
I can't. How to do it right?
Thanks in advance!
This is layer 'regions', added to Basic style :
layer 'regions' in mapbox studion
I tried like this:
var v = mapp.getLayoutProperty('regions', 'visibility');
alert('visibility '+ v );
mapp.setLayoutProperty('country-label','visibility','visible');
v = mapp.getLayoutProperty('regions', 'visibility');
alert('visibility '+ v );
On first alert I get "visibility undefined"
but there is no result on second alert at all
Try this:
var mapp = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
center: [34.047, 63.779],
zoom: 5.41
});
mapp.on('load', () => {
mapp.setLayoutProperty('regions','visibility','none');
})
It just looks like you're invoking setLayoutProperty before the map has properly loaded
I am working on a Nuxt, Leaflet, Mapboxgl project.
This is how I init my map:
let mapOptions = {
container: 'map',
style: 'http://linkToMapStyle.com',
attributionControl: false,
center: [13.404954, 52.520008],
zoom: 5,
minZoom: 1,
preserveDrawingBuffer: true
};
_this.map = new mapboxgl.Map(mapOptions);
I'll be loading marker data from my REST endpoint on every map moveend event. So I'll be loading and deleting markers quite a lot. That's why I wanted to use layerGroup to group all my markers so I can remove them easier.
On the map.load event I'm trying to add the layerGroup and the markers to my layerGroup:
var marker1 = L.marker([13.404954, 52.520008]);
var marker2 = L.marker([14.404954, 51.520008]);
var markers = L.layerGroup();
markers.addLayer(marker1);
markers.addLayer(marker2);
markers.addTo(_this.map)
And it's giving my errors:
Error: layers.undefined: either "type" or "ref" is required
...
Error: layers.undefined: missing required property "source"
...
Error: layers.undefined: missing required property "id"
..
All the examples I found where without specifying any type of layer options so I don't understand why this is not working for me.
I'd like to display a Mapbox GL JS map with a white background, rather than a map background.
This is my code right now:
mapboxgl.accessToken = 'mytoken';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
minZoom: 4,
maxZoom: 14,
center: [-2.0, 53.3],
});
How can I replace the light background with plain white? If I change style to white then I get an error.
You don't need to create the style in Mapbox Studio, you can create it in the browser:
var map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {
},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': 'white'
}
}
]
},
});
I figured this out. You need to make your own "style" in Mapbox Studio and set it to be plain white, then add this in the style property of the map.
this is a part of my leaflet code :
// Init
var map = L.map('map', {
center: [46.7, 2.5],
zoom: 6,
layers: [test, boutiques]
});
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// overlays
var overlays = {
"Test": test,
"Boutiques": boutiques
};
L.control.layers(overlays).addTo(map);
I want that a overlay can be displayed one by one (via radio button), the problem is that at loading the "boutiques" overlay is selected but "test" is also displayed.. How to put "test" hidden by default ?
Just initialize map without test:
var map = L.map('map', {
center: [46.7, 2.5],
zoom: 6,
layers: [boutiques]
});
JSFiddle example.