I'm just getting started creating a Leaflet webapp and I'm failing to draw a rectangle. When I load the page it shows for a split second, barely before the map even loads, and then it disappears (That's in Chrome, in Firefox it doesn't show at all). What am I missing here?
Below is my code:
<script>
var bounds = [[52.42, 4.78], [52.46, 4.88]];
var map = L.map('map', {
maxBounds: bounds,
minZoom: 14
}).setView([52.44, 4.83], 14);
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
$(document).ready(function() {
L.rectangle(bounds, {color: "red", weight: 1}).addTo(map);
});
</script>
I tried drawing the rectangle at the $(document).ready() event but that didn't work.
The rectangle is hidden because the google layer gets drawn on top. Might be a bug, I would expect the layers to be in the z-order in which they get added. Quick fix (check for side effects) is to force the needed order using CSS styles such as these:
.leaflet-google-layer{
z-index: 0 !important;
}
.leaflet-map-pane{
z-index: 100;
}
Related
Few things with html2canvas are not predictable:
Below is a screenshot of pdf map.
I am using html2canvas to take a screenshot of google map, and then putting it on pdf by using php.
sometimes html2canvas will display a grayish faded rectangular shape close to the center (in the image below the shape is to the right of DV-2 marker). Sometimes it is there, sometimes it it is not, inconsistent on all modern browsers.
Most of the times one or more markers will not have label displayed. In image below the blue marker to the right does not have marker.
On the map, before taking the screenshot, the gray shape is not there and all markers have label visible.
Any thoughts / suggestions why it is happening? Like I mentioned earlier, it is unpredictable, sometimes that shape does not show up and sometimes all marker labels are visible.
I notice that the markers without label are put on the map first (when I console.log()). It is happening in html2canvas not after. Below is the vue.js method which grabs the screenshot.
genAndSubmit() {
let xCrop = (this.dimensions.vw - this.dimensions.pw) / 2
this.form.processing = true;
html2canvas(document.querySelector("#mapWrapper"),
{
useCORS: true,
logging: true,
width: this.dimensions.pw,
x: xCrop,
// allowTaint: true,
// foreignObjectRendering: true,
// imageTimeout: 30000,
// scale: 2,
})
.then(canvas => {
this.form.image = canvas.toDataURL('image/png');
this.submit();
});
},
After trying different things here are my solutions:
Rectangular shape close to center - I increased the scale in html2canvas settings html2canvas(document.querySelector("#mapWrapper"),{scale: 1.001,})
Some Marker labels not visible - I increased the zIndex:9 for the marker.
Google Maps Info Window not showing content
Remove shadow from Info Window #mapWrapper .gm-style .gm-style-iw-c {box-shadow: none !important;}
Use V1.0.0 of html2canvas. In my tests, newer version did not display Info Window content.
I found that with the latest (1.4.1) I had to set overflow value so that it exporte properly.
.gm-style-iw.gm-style-iw-c {
overflow: visible;
}
I have a leaflet map with a few layers on it.
Whenever layers are not in the viewport, they are hidden untill panning has completed:
Regular view with layers:
Panning right, to show layers outside viewport:
Panning stopped:
As illustrated above, the layers will first become visible once panning has stopped and mouse(finger) released.
I have tried the following, which didn't work
var map = L.map('map',{ bounceAtZoomLimits: false, removeOutsideVisibleBounds: false}).setView([40, 0], 2);
L.geoJson(mapData).addTo(map);
Seems the solution was right in front of me
Adding the following will render the entire map:
var map = new L.Map('map');
map.getRenderer(map).options.padding = 100;
Solution found here
I am trying to draw hundres of circleMarker in a Leaflet map, I am using flask and foundation.js, the same code work in different app built with bootstrap.js
This is my code:
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script>
var map = L.map('map').setView([40,-4], 6);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery CloudMade',
maxZoom: 18
}).addTo(map);
var geojsonMarkerOptions = {
radius: 100,
fillColor: "#FFF803",
color: "#DDFF03",
weight: 1,
opacity: 0.8,
fillOpacity: 0.8
};
{% for item in data['data'] %}
L.circleMarker([{{item[0]}},{{item[1]}}],geojsonMarkerOptions).addTo(map);
{% endfor %}
var marker = L.marker([41.5, -0.09]).addTo(map);
marker.bindPopup("I am a circle.");
var circle = L.circle([51.508, -0.11], 500, {color: 'red',
fillColor: '#f03',
fillOpacity: 1
}).addTo(map);
</script>
At the bottom I tried a fixed marker which appears and fixed circle which doesn´t, could it be a problem with foundation.js? Because in a previous project with other framework worked perfectly.
I tried your code, replacing 51.508 with 41.508 (so the red circle is near the marker) and adding just a single circleMarker. It works. So the problem is not in the code.
Please check that you have included leaflet.css from the same locations as leaflet.js. Also check there are no errors in a javascript console (Ctrl+Shift+J in Firefox). Check that coordinates from {{item[0/1]}} are properly formatted (decimal separator is a dot, no extra symbols). Try using more recent version of Leaflet library, 0.7.3.
Ilja, many thanks. You were right the circles were pushed behind the map by a css. In this case, I was also using d3.js for some chart, and as soon as I got rid of nvd3's css the circles showed up.
I've been having the same issue, and it turns out that it is the nv.d3.css file. I found that commenting out these lines will allow you to draw a circle:
display: block;
width: 100%;
height: 100%;'
I don't know what potential side effects this might have on your page, but I think the main issue is that d3 decides to hijack any svgs that you put on the page.
EDIT: my case was with circles, but I wouldn't be surprised if it is the same problem between circles and circle markers.
EDIT 2:
It's been a while, but someone just liked this, so I feel like I should inform you that in the end, these didn't play nice together. I didn't have the time to really tinker with it, so I was forced to remove the leaflet circles and pass on the project with a recommendation that it might just be easier to plug in Google Maps. Hope that's helpful.
That question was posted long ago.
But May my answer helps someone.
When we instanciate L.CircleMarker(...), the circle is created, but not showing.
In my case, i noticed that it wait for the window resize event in order to display.
So juste trigger that event after L.CircleMarker(...).addTo(map) and the circle will appear like a charm.
With JS
window.dispatchEvent(new Event('resize'));
With Jquery
$(window).trigger('resize');
Consider the following code:
heatmap = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, osm,
{visible: true, radius: radiusForScale[zoom], legend: {position: 'br',title: 'title'}},
{isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")}
);
Background: heatmap.js is great for displaying population densities and such... however, I do not want heatmap.js to control the radius of my points. Instead, I wish to dynamically updated the radius based on a custom zoom function I have created, without having to destroy the heatmap and recreate it every time the zoom changes. Now, this is possible if you add the heatmap to a div as follows:
var config = {
element: document.getElementById("heatmapArea"),
radius: 30,
opacity: 50
};
//creates and initializes the heatmap
var heatmap = h337.create(config);
In this example, it's as simple as updating the JSON object and updating the display. However, this in only a static display assigned to a div, and therefore renders the vector layer useless. Has anyone had any success with this in OpenLayers??
On a side note: I've browsed through all the keys in the heatmap JSON string and there doesn't seem to be a way to change the zoom variable.
Figured it out... this isn't advertised in the documentation or anywhere on the internet that I could find.. however, here's how you control the radius in OpenLayers for those of you who need it. Let's keep it simple..
// create our heatmap layer
var heatmap = new OpenLayers.Layer.Heatmap(
"Heatmap Layer", map, osm, {visible: true, radius:50},
{isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")}
);
map.addLayers([heatmap]);
Now add the data:
heatmap.setDataSet(data);
Here's the key. You can do pretty much anything with this list of commands:
this.set("radius",value); //****this one solved my problem
this.set("element",value);
this.set("visible",value); //deceiving! You have to access the canvas subclass to get it to work
this.set("max",value);
this.set("gradient",value);
this.set("opacity",value);
this.set("width",value);
this.set("height",value);
this.set("debug",value);
So, for example, create a zoom event so the radius changes based on your radius function. For me, it was as simple as scaling the radius based on the ratio screen width(pixels)/screen width(meters). So now in your click event:
on zoom change: //pseudocode
canvas = heatmap.heatmap.get('canvas'); //this is the subclass I spoke of above
if the zoom is above a certain value //pseudocode
then
canvas.style.display = 'block'; //show the heatmap... you can also use heatmap.toggle() but this gives you more control
heatmap.heatmap.set('radius',zoomfunction[map.zoom]); //this dynamically updates the radius!!
heatmap.updateLayer();
else
canvas.style.display = 'none';
heatmap.updateLayer();
I hope this helps someone 'cause it drove me crazy!
I'm trying to place a MapLabel on top of a Polygon in Google Maps V3. I've tried to set the MapLabel zIndex to 2 and the Polygon zIndex to 1 without any luck. Isn't this possible since the Polygon doesn't really follow zIndex?
I've created a jsFiddle for you guys to check out: http://jsfiddle.net/7wLWe/1/
Solution: In maplabel.js change:
mapPane.appendChild(canvas);
to:
floatPane.appendChild(canvas);
The reason is because floatPane is above all map layers (pane 6)
http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView
This is probably a late find.. but hope someone would find this useful.
If you don't want to use floatPane (John's Solution) as this will be always on top of everything, and want to give a custom zIndex.. Edit the maplabel.js. Add the following line just before the end of MapLabel.prototype.onAdd = function() {
if (canvas.parentNode != null) {
canvas.parentNode.style.zIndex = style.zIndex;
}
Now you can pass zIndex while creating a maplabel:
var mapLabel = new MapLabel({
text: "abc",
position: center,
map: map,
fontSize: 8,
align: 'left',
zIndex: 15
});
If you don't want to touch maplabel.js, you can add this function to change the z-index of the parent of the labels (although if you have other canvas elements, you may need to alter the function):
//change the z-index of the canvas elements parents to move them above polygon layer
google.maps.event.addListenerOnce(map, 'idle', function(){
//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elements
var canvasElements = jQuery('canvas'); //jquery for easy cross-browser support
for(var i=0; i<canvasElements.length; i++){
canvasElements[i].parentNode.style.zIndex = 9999;
}
});
Great to see that you're using the MapLabel utility library!
As you've found out, the MapLabel sits in a different map pane. zIndex is only respected within a certain pane.
var maplabel = new MapLabel....
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex);
jQuery made it pretty simple for me without changing maplabel.js
I also found an alternate solution
$(maplabel.getPanes().mapPane).addClass('map-pane');
and then defining the z-index in a stylesheet
I sketched up this CodePen example utilizing the gmaps-labels class. It is based on the fiddle in the Q above and adds the ose of a LabelOverlay class. The class requires a new google.maps.LatLng, dimensions (in LatLng units) of a box centered around the label's point (If the label would overflow this box, hide it, and some CSS. Heres a code stub, check out the demo in the CodePen.
var MIN_BOX_H = 0.0346,
MIN_BOX_W = 0.121,
MAX_BOX_H = 0.001,
MAX_BOX_W = 0.03;
var overlay1 = new LabelOverlay({
ll : myLatlng,
minBoxH : MIN_BOX_H,
minBoxW : MIN_BOX_W,
maxBoxH : MAX_BOX_H,
maxBoxW : MAX_BOX_W,
...
label : "I want on top",
map : map
});