I'm creating a map using leaflet with the following code:
L.mapbox.accessToken = 'pk.##MY TOKEN HERE##';
var map = L.mapbox.map('map', 'mapbox.streets');
map.scrollWheelZoom.disable();
map.setView(new L.LatLng(32.75, -97.33), 10);
But when the page loads, I get a console error of
Cannot read property 'minZoom' of undefined
This error originates from the line that says:
var map = L.mapbox.map('map', 'mapbox.streets');
I've tried to set the minZoom value after the map variable is declared, but it doesn't work b/c by that point the error has already occurred. I've already tried to set the setView in the same map declaration line, but it didn't help either.
Has anybody ran across this error before?
try this:
var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 2);
source: Mapbox blog
Since it can't read the property, it looks like it's having problems finding a <div> with an id of map.
In your HTML page, try adding <div id="map"></div> in the body where you want your map to appear.
Related
I'm new to leaflet and am trying to implement a set of markers with different CSS-styles.
So, I am aware that after adding a marker to a map I can access different CSS-attributes by calling getElement() on my marker for example:
marker.addTo(map);
marker.getElement().style.borderColor = '#000';
This works just fine, but when adding a marker to a layer, this can no longer be used since a TypeError occurs (getElement() is undefined). Here is the example code where the error occurs:
myLayer.addLayer(marker);
marker.getElement().style.borderColor = '#000';
Am I overlooking a simpler way to set CSS-Attributes for markers and divicons that are added to layers or is there a similar way to access layer-added markers and divicons in JavaScript?
So I found a solution that is working for me.
The idea is to extend the function that is used to create the icon.
Last answer here github.com/Leaflet/Leaflet/issues/5231 helped a lot.
var borderSize = ...;
L.DivIcon.Custom = L.DivIcon.extend({
createIcon: function(oldIcon) {
var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
icon.style.borderSize = borderSize;
...
return icon;
}
})
var icon = new L.DivIcon.Custom({
...
});
var ll = L.latLng(entry.Longitude, entry.Latitude);
var marker = L.marker(ll, {
icon: icon
})
this.myLayer.addLayer(marker);
Welcome to SO!
When not added onto a map (since your parent myLayer may not be added to the map itself), a marker does not have any element.
If you do not need to change too many styles individually and dynamically, you might rather use the className option of your Icon / DivIcon.
I would like to extract coordinates in GeoJSON/WKT format from user drawn polygon. I found next code:
drawnItems = new L.FeatureGroup();
drawnItems.addLayer(layer);
myjson = drawnItems.toGeoJSON();
console.log(myjson)
But in console I see only Object {__ob__: Observer} like this
I used example from here
What I am doing wrong?
If you were expecting to get a string, then you just missed the JSON.stringify(myjson) on the next line of the example you refer to.
I'm trying to add a marker to the Leaflet directive but somehow it doesn't accept markers created with the default L.marker() method.
The directive is used as follows:
<leaflet markers="markers" center="center" layers="layers" defaults="defaults"></leaflet>
I'm extending my $scope in the controller as prescribed:
angular.extend($scope, {
markers: {},
//markers: { { someName: {lat:52.163815,lng:5.365131} } //this does work
});
Adding a marker afterwards doesn't work somehow. First the .markers object is not an array, so I can't just add any elements using push(). But even adding an element as associative array doesn't work:
var marker = L.marker(L.latLng(52.163815, 5.365131));
$scope.markers[0] = marker;
The error is:
[AngularJS - Leaflet] The marker definition is not valid.
[AngularJS - Leaflet] Received invalid data on the marker 0.
I'm overlooking something very simple but I've got no idea what... Any lead would be greatly appreciated.
$scope.markers is expecting to get an object with marker properties, not the marker itself. What would work in your example is just a LatLng object, before wrapping it as Marker.
$scope.markers[0] = L.latLng(52.163815, 5.365131);
Or, if you get Markers from the outside, you can get it back from the inside:
$scope.markers[0] = marker.getLatLng();
Obviously, that doesn't convey another markers' properties, just coordinates.
I'm trying to add a draw control to my leaflet map like this:
const drawnItems = L.featureGroup().addTo(map)
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
}))
But I always get this error in the _initModeHandler method of leaflet.draw.js
TypeError: Cannot set property 'polyline' of undefined
Seems like this._modes[type] = {}; fails because this._modes is undefined.
I tried to make this._modes an object if undefined but this just threw another error anbout how an addToolbar method is undefined, too.
The error came from another L.Toolbar class that did override the one supplied by Leaflet.draw.
The other L.Toolbar didn't set this._modes in initialize()
I am passing a latlng from a link on another page to my map. My map has the markers based on this latlng. So what I am passing is exactly what the map markers are using to show on the map.
var hash = window.location.hash;
var hashless = hash.replace("#", "");
var ll = hashless.split(",", 2);
map.setView(new L.LatLng(ll[0], ll[1]), 14);
This is working great, but I am struggling at getting the marker to show it's infowindow. I would like only the link clicked on to be the marker that is showing it's popup. I am able to zoom right to the marker, but not able to get the popup to work in a reasonable way.
I have tried a few things, but map.getBounds() seems to be the one I should be working with, unless you can ID a marker based on Lat/Lng. Can you?
I am using bounds in the map.on function.... but none of the events seems to really work well. Originally thought LOAD would do it, but no results... viewreset, mousemove, etc... all show the popup in this simple function, but it is not really any good as it flickers etc... when moving things around:
map.on('viewreset', function () {
// Construct an empty list to fill with onscreen markers.
console.log("YA");
var inBounds = [], bounds = map.getBounds();
datalayer.eachLayer(function (marker) {
if (bounds.contains(marker.getLatLng())) {
inBounds.push(marker.options.title);
marker.openPopup();
}
});
});
How can I set the marker.openPopup() from my link to the current marker at that lat/lng passed to it?