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.
Related
I have a web site to displaying historic maps. The maps have been tiled and are loaded as a tilelayer. Is there a way to getBound so I can set the map with fitBound. By default tilelayer does not have a getBounds method. I have tried making a featureGroup of the layer but that just raises an error. Am I missing something? Thanks.
// Initiate map
var map = new L.Map('map', {minZoom: 8, maxZoom: 18, zoom: 10});
// Display and set boundary
var layer = new L.TileLayer('../../maps/1866/{z}/{x}/{y}.png',{maxNativeZoom: 17});
//create featuregroup
var fgroup = new L.featureGroup([layer]);
fgroup.addTo(map);
map.fitBounds(fgroup.getBounds());
I've been working on creating a dynamically updated Mapbox GL integration inside Webflow's CMS. I've succeeded in creating an array of features that can be read by Mapbox's API, but these features won't show on the map because the coordinates are not being read by the function that creates the map markers.
I receive the following error Cannot read property 'coordinates' of undefined at map-test-page:139 which is where a longitude and latitude is assigned to the current marker via this line: .setLngLat(marker.geometry.coordinates)
Partial solution was found here, but the code I've integrated into my site doesn't have featuresIn or featuresAt functions which seem to be the only way to include a includeGeometry: true parameter.
I'm curious if I need to rethink how I've created markers and do something with a function like map.on('click', ...) reference here.
Here is a minimal version that reproduces my issue.
If you're familiar with the Webflow interface you can view a read-only version of the site.
Any help would be greatly appreciated!
Here is the Mapbox script I'm using on the page:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/strawpari/ckp2nu3dw6cwu17nt4kqwf1vv',
center: [-13.723969, 48.360542],
zoom: 2,
pitch: 0,
bearing: 0,
antialias: true,
interactive: true
});
var geojson = {
type: 'FeatureCollection',
features: farmerArray,
};
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<img src=\'' + marker.properties.image + '\' width=\'50\' height=\'50\' border-radius=\'50%\'>' + '<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
And here is the code embedded in each CMS item that adds a farmer's information to the farmerArray which is being read by Mapbox. Text in double-quotations "" is a placeholder for the dynamic information populated by the CMS.
var farmerArrayItem =
JSON.stringify({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: ["longitude", "latitude"]
},
properties: {
title: "name",
description: "text",
image: "imagepath"
}
});
farmerArray.push(farmerArrayItem);
It doesn't appear that you have tried using the Developer Tools to debug your code. That's definitely a skill you should pick up.
With the dev tools, you will quickly see that the value of marker at the critical point is a string:
So you just need to use JSON.parse:
geojson.features.forEach(function(markerString) {
const marker = JSON.parse(markerString);
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
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 have 2 different divs which using by leaflet as map object. I want to define my map objects into a function such as
html
<div id="mymap"></div>
<div id="mymap2"></div>
javascript
var map;
function define_map(map_id) {
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl, {
maxZoom: 7
}),
map = new L.Map(map_id, {
center: new L.LatLng(51.505, -0.04),
zoom: 7
}),
drawnItems = L.featureGroup().addTo(map);
});
define_map("mymap");
define_map("mymap2");
$(".btnmarker").on("click", function() {
console.log(map);
L.DomUtil.addClass(map._container, 'my_crosshair-cursor-enabled'); // ON THIS LINE GETTING ERROR CODE Cannot read property '_container' of undefined
selected_tool = $(this).attr("id");
});
There is no problem, my maps seems working good until accessing features of them from button click event (this button will add a marker class to a map which i clicked on it)
But i'm getting map is not defined error. map is a variable and defined on top line of page.
Thanks inadvance
I need high-res map images for my application (solar power system design). Bing Maps in OL is good for finding the right building, but too low-res for laying out solar panels. So, I want to use a small high-res static map for doing the layout. Here's what I have currently. First load the Bing Maps layer:
var layers = [];
var baseBingMapLayer = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'XXXXX',
imagerySet: 'AerialWithLabels',
})
});
layers.push(baseBingMapLayer);
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-13569845.9277,4485666.89612],
zoom: 5,
})
});
Then when I want to load the static map, the strategy is to remove the Bing Maps layer and then add the static image layer. I'm doing the following:
var extent = [0, 0, 1024, 768];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var staticURL =
"https://maps.googleapis.com/maps/api/staticmap"
+ "?center=37.7431569802915,-121.4451930197085&"
+ "zoom=20&size=1024x768&scale=2&zoom=3&"
+ "format=jpg&maptype=satellite"
+ "&key=XXX";
map.removeLayer(baseBingMapLayer);
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: staticURL,
imageSize: [1024,768],
projection: projection,
imageExtent: extent
})
});
var imageLayerView = new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2
});
map.addLayer(imageLayer);
map.addView(imageLayerView);
Needless to say, this isn't working. I just get a blank screen with no exceptions thrown.
I actually had some success using jQuery to just empty the entire map div and start over with a new map object. However this seems to cause other problems and didn't seem like the right approach to me.
I'm going to continue working on this problem, but thought I would post since I'm sure I won't be the last person to try this little stunt :-)
Gary