CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3leaflet
ihatemash
ihatemash

Reputation: 1494

Map polygons and markers disappear using leaflet

For some reason my polygons are not showing once the map tiles are rendered. They are drawn on the map but disappear once the map tiles are rendered.

I have created a JSFiddle example of the issue. The polygon should be in the center of the map and your mouse pointer will change whenever you hover over the polygon area. Sometimes I see the red polygon display for a second just before the tiles are rendered. So, I know it is getting drawn on the map. This happens with my map pins as well. But, I didn't include a map pin in the JSFiddle example.

var tdata = '{"Latitude":79.07181,"Longitude":-100.63477,"Polygons":[[{"Item1":79,"Item2":-100},{"Item1":79,"Item2":-99},{"Item1":78.5,"Item2":-99},{"Item1":78.5,"Item2":-100}]]}';

dta = JSON.parse(tdata);

var map = new L.Map('map', { center: new L.LatLng(dta.Latitude, dta.Longitude), zoom: 6, maxZoom: 16, minZoom: 5 });
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var ggl = new L.Google();
var ggl2 = new L.Google('TERRAIN');
map.addLayer(ggl2);
map.addControl(new L.Control.Layers({ 'Street': osm }, {}));

for (var x = 0; x < dta.Polygons.length; x++) {
    var polygon = dta.Polygons[x];
    var coordinates = [[]];
    coordinates.pop();
    for (var j = 0; j < polygon.length; j++) {
        var point = polygon[j];
        coordinates.push(new Array(point.Item1, point.Item2));
    }

    var mapPolygon = L.polygon(coordinates,{fillColor: "#FF0000", fillOpacity: dta.Opacity, weight: '1px'});
    mapPolygon.addTo(map);
}

Upvotes: 0

Views: 2585

Answers (2)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

It occurs since rectangle is rendered on map pane but Goggle layer is displayed on top of map pane.

One solution would be to change order of map pane and Google layer by setting z-index via CSS:

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}

Example 

$(function () {

    var tdata = '{"Latitude":79.07181,"Longitude":-100.63477,"Polygons":[[{"Item1":79,"Item2":-100},{"Item1":79,"Item2":-99},{"Item1":78.5,"Item2":-99},{"Item1":78.5,"Item2":-100}]]}';

    var dta = JSON.parse(tdata);

    var map = new L.Map('map', { center: new L.LatLng(dta.Latitude, dta.Longitude), zoom: 6, maxZoom: 16, minZoom: 5 });
    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
    var ggl = new L.Google('TERRAIN');
    var layer = map.addLayer(ggl);
    map.addControl(new L.Control.Layers({ 'Street': osm }, {}));

    for (var x = 0; x < dta.Polygons.length; x++) {
        var polygon = dta.Polygons[x];
        var coordinates = [[]];
        coordinates.pop();
        for (var j = 0; j < polygon.length; j++) {
            var point = polygon[j];
            coordinates.push(new Array(point.Item1, point.Item2));
        }

        var mapPolygon = L.polygon(coordinates, { fillColor: "#FF0000", fillOpacity: dta.Opacity, weight: 1 });
        mapPolygon.addTo(map);
    }

});
#map { 
    height: 600px; 
}



.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="map"></div>

Modified JSFiddle

Upvotes: 0

IvanSanchez
IvanSanchez

Reputation: 19069

The weight option must be a number, not a string containing CSS units.

Upvotes: 2

Related Questions