I'm using this quite nice guide to add markers from a Google sheet to a basic leaflet.js map:
https://rdrn.me/leaflet-maps-google-sheets/
The problem is, using these code snippets here i get all the data logged and returned in the console, but none of the points appear on the map itself.
This is probably some really basic JavaScript issue that i'm not able to see. Sorry, still learning.
Here's a jfiddle, linking to a demo sheets with one marker point
https://jsfiddle.net/xfs19cz7/1/
with the map part:
function init() {
Tabletop.init({
key: '*url to gsheets here*',
callback: myFunction,
simpleSheet: true
})
}
window.addEventListener('DOMContentLoaded', init)
function myFunction(data, tabletop) {
console.log(data);
}
var map = L.map('map-div').setView([64.6220498,25.5689638], 5);
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Basemap (c) OpenStreetMap',
minZoom: 5,
maxZoom: 18
});
basemap.addTo(map);
function addPoints(data, tabletop) {
for (var row in data) {
var marker = L.marker([
data[row].Latitude,
data[row].Longitude
]).addTo(map);
marker.bindPopup('<strong>' + data[row].Info + '</strong>');
}
}
This should add one point to a basic map. Now actually the map is not at all rendered, and no marker shows up. I can't find any issues in the code making the map show up blank, but there probably are some.
The marker from gsheets is however logged in the console, i suspect there is something missing in my code relating to really basic javascript functions / looping / sloppy syntax.
Also tried the init() and addPoints(data, tabletop) parts to a map i had where the map with the same basemap link, which rendereded OK. Adding this still left the map rendering, but no markers showed up. Again, the gsheets was loaded as an array of objects.
Could anyone point me to this, probably very basic, issue in the code?
edit:
callback: myFunction,
line above needs to be changed to
callback: addPoints,
also, init function needs to be called and position set to absolute. Thanks for the working fiddle in answer marked as correct below.
Fixes
Try setting map position absolute
calling the init() function
Working fiddle
Related
markerGroup: L.LayerGroup;
this.markerGroup.eachLayer(function (layer) {
this.markerGroup.removeLayer(layer);
});
this.markerGroup.clearLayers();
removeLayer() and clearLayers() are working as described in the leaflet documentation but I am wondering if there is a way to remove the layer/marker/instance from my markerGroup variable entirely. Even though the markers are cleared/removed, when my refresh button is called it still has the previous markers in the markerGroup variable and adds the same ones again thus duplicating them. This is a problem as I have shadows for these markers which duplicate over each other and eventually becoming 100% opaque. Has anybody got any suggestions or come across this problem before?
Edit: Thanks for the suggestion #Falke Design. map.removeLayer doesn't work for me unfortunately. Hopefully the information below is more helpful:
refreshButton() {
this.markerGroup = new L.LayerGroup;
clearInterval(this.refreshTimer);
this.dynamicLatLong = this.map.getCenter();
this.dynamicZoom = this.map.getZoom();
this.markerGroup.clearLayers();
this.polygonGroup.clearLayers();
this.map.removeLayer(this.markerGroup);
this.getCurrentAzure();
this.leafletMap();
}
getCurrentAzure() uses a for loop to get the data such as lat, lng, etc. of each instance and assigns it to a variable named marker. Each marker is added to markerGroup with this line:
marker.addTo(this.markerGroup);
leafletMap() creates the map and draws the markerGroup onto the map with this line:
this.markerGroup = L.layerGroup().addTo(this.map);
My scenario is that the user would click on a marker that is part of a cluster and be redirected somewhere else. Then when they come back they need to return the the same bounds on the map where they were before at that marker, but the cluster in which the marker is found is no longer expanded/spiderfy'd, which I need to get done.
At this point I know which marker I'm looking for, but need to expand its cluster. What I've done so far:
Iterate through the markers in the initially populated L.markerClusterGroup() object:
layers = L.markerClusterGroup();
. . . populate 'layers' ...
$.each(layers, function (idx, layer) {
if(layer._tooltip._content === 'known marker tooltip') {
layer.__parent.spiderfy();
}
});
Although the spiderfy() function sort of works, it doesn't seem to be intended to be used on its own and breaks the cluster pretty bad.
Alternatively, I've tried calling fire('clusterclick') on the above layer object, as well as on layer.__parent, which I presume would represent the cluster, but can't get anything working.
I would need a solution in which I can properly trigger the clusterclick event that would handle everything, as if I had actually clicked the cluster myself.
I'm working on an SPA project (ionic, so it's angular with ui-router) where I need to display two different maps on two different pages/controllers.
The first map is a general map (let's call it the main map)where a few locations are marked and the second one (let's call it the edit map)is a focus on a specific location where the user can edit the location by dragging the marker.
The general implementation scheme I'm using is that I'm calling a initMap method from mappingService that instanciates a google map from each controller.
$rootScope.markers = [];
this.initMap = function initMap(mapTarget, mapCenter) {
// the initMap function initialize the map it takes two arguments:
// + mapTaget which defines the html element the map is bound to.
// + mapCenter that defines the center of the map and whether to display the center
var markup = "<div id='" + mapTarget.mapId + "'></div>";
document.getElementById(mapTarget.containerId).innerHTML = markup;
var centerPos = new google.maps.LatLng(mapCenter.lat, mapCenter.lng);
$rootScope.map = new google.maps.Map(document.getElementById(mapTarget.mapId), {
center: centerPos,
zoom: 18,
disableDefaultUI: true
});
// eventually place a person marker for the user's position
if (mapCenter.display) {
console.log('placing the position marker');
$rootScope.markers[0] = new google.maps.Marker({
position: {lat: mapCenter.lat, lng: mapCenter.lng},
map: $rootScope.map,
title: 'userLocation',
icon: './img/person_icon.png'
});
}
};
The only difference is that on the main map I'm first calling a geolocate service the return a promise and I'm using the returned location coordinates to then call the mapping service:
geolocateService.getLocalPosition()
.then(function(coords) {
mappingService.initMap(
{containerId: $scope.mapContainer, mapId: $scope.mapId},
{lat: coords.lat, lng: coords.lng, display: true}
);
While on the edit map I'm calling directly the mapping service.
mappingService.initMap(
{containerId: $scope.mapContainer, mapId: $scope.mapId},
{lat: $scope.location.lat, lng: $scope.location.lng, display: false}
);
I am able to render both maps without problem and even to add markers and some event listeners.
However, I run into the problem that after some sequence of actions, for example going from the main map to the edit map two times, one of the map would suddenly become blank (white to be exactly, so it doesn't seems to be something that I could solve by resizing the map). I'm receiving the Ag object and the only difference is that I don't get the mapDataProviders property on the broken map.
When it works, I get:
Ag object when it works
While when it doesn't, I get:
Ag object when it doesn't work
The code snippet above is my last implementation attempt. I've been trying to implement those maps from a lot of different ways to no avail. Among those attempts, I tried:
totally separates both instanciation, dividing the initMap methods into an initMainMap and an initEditMap.
using one instance for both maps and replacing the DOM element> This is what you see above with the following additional method that is called when leaving the view:
this.removeMap = function removeMap(containerId) {
var container = document.getElementById(containerId);
$rootScope.markers = [];
container.innerHTML = '';
// important part:
var old_element = container;
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
delete $rootScope.map;
}
knowing that on both views I have either:
or
<div id="edit-map-container"></div>
I'm trying to understand what would make the google map API return a map without mapDataProvider (which I believe means that the map works and even starts to render except that it lacks the tiles to display).
P.S. it looks like there is a memory leak, which is apparently a well known issue.
If anyone has the answer to this, I'm a bit lost right here!
My objective here is to remove all the markers added to leaflet using layer group for a paginated listing page.When navigated to other page i am able to remove layer group of previous page, but on adding new layer group of markers(markers of next page) i am getting this error in browser and markers are not added to the map
error is - Uncaught TypeError: layer.onAdd is not a function;
code is
var leaflet_factory = {
//initializing map container
initialize: function() {
var map = L.map('mapresults');
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
},
//set view of mao
setview: function(lat, long, zoom) {
map.setView([lat, long], zoom);
},
//add list of markers to maps
addMarkersList: function(marker_array) {
var markerArray = [];
$.each(marker_array, function(key, data) {
var marker_pointer = L.marker([data.lat, data.long]).bindPopup('<strong>' + $(this).attr('data-vendor').capitalize() + '</strong><br>' + $(this).attr('data-location').capitalize());
markerArray.push(marker_pointer);
});
window.page_makers_layer = L.layerGroup(markerArray);
window.page_makers_layer.addTo(map);
},
//remove the current marker layer group
removeMarkerLayer: function() {
map.removeLayer(window.page_makers_layer);
}
}
The problem with the above code is when calling addMarkersList for first time after initializing the map container it works.
But when i call addMarkerList with new list of markers(lat long pair) after calling removeMarkerLayer to remove existing marker layer it gives me following error which i am trying to debug.
Uncaught TypeError: layer.onAdd is not a function
Please point where i am doing wrong.
You're doing a few things wrong. Not catastrophically wrong, just antipattern wrong, e.g.:
map.removeLayer(window.page_makers_layer);
Do NOT use window globals to store references to your data (unless you're really, really, really sure of what you're doing). If you're wrapping map creation in a factory or a module, store your data in that scope.
var leaflet_factory = {
Do not name something a factory if it doesn't follow the factory pattern. It's very confusing. Just name it differently, make it a CJS module instead, or skip it entirely.
Research into common programming patterns. Do you have something that appears only once in the webpage? Consider singletons.
gives me following error which I am trying to debug.
How are you trying to debug it? Learn to use your browser debugging capabilities, and provide a complete stack trace.
You should be able to easily keep track of the value of the problematic variable, and see if it is an instance of L.LayerGroup when the call is made.
I just started playing with MapBox and am running into a confusing issue. I'm creating a map with a geoJSON layer using this code:
var map = L.mapbox.map('map', '<MapBoxID>');
var zipLayer = L.mapbox.featureLayer('data/blah.json');
zipLayer.addTo(map);
zipLayer.setStyle({color: 'red'});
The map appears and shows the geoJSON, but it ignores the styling. When I copy that last line into the JS console in my browser, it works fine, though.
What am I missing here? Also, I've tried at least a dozen different ways of including the style in the options directly in the featureLayer() call, but nothing has worked. How do I specify the style when creating the feature layer?
I'm guessing a bit here, since I don't know the Mapbox JS very well, but it sounds a lot like an async error. Strangely, I don't see anything in the Mapbox or Leaflet APIs about a callback for this function. But, you can pass straight GeoJSON to featureLayer(), so I'd suggest using jQuery (or your XHR library of choice) to grab the data:
var map = L.mapbox.map('map', '<MapBoxID>');
var zipLayer;
$.getJSON('data/blah.json', function(data) {
zipLayer = L.mapbox.featureLayer(data);
zipLayer.addTo(map);
zipLayer.setStyle({color: 'red'});
});
Hopefully that'll do the trick.
I would go the route of using the built-in featureLayer function, then listening for it to be ready. This should help get you pointed in the right direction:
var featureLayer = L.mapbox.featureLayer()
.loadURL('/example-single.geojson')
.on('ready', function(layer) {
this.eachLayer(function(marker) {
// See the following for styling hints:
// https://help.github.com/articles/mapping-geojson-files-on-github#styling-features
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#CC0000'
}));
});
})
.addTo(map);
Have you tried adding the zipLayer after setting the style?