Problem when using L.GeoJSON.AJAX() on google Chrome/Chromium #54
Description
Hello,
I'm trying to open the attached html into chrome/chromium browser, but the geoJson added layers are not showing up. I've test on Firefox (Linux and Windows) and Microsoft Edge (Windows) and worked fine. Below you can see screenshots from Firefox and Chromium.
Chromium Version 65.0.3325.181: https://i.stack.imgur.com/TxAgU.png
Firefox 59.0.2: https://i.stack.imgur.com/O28I2.png
Can someone help me, please?
Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<title>FazMaraneyRGB_transparent_mosaic_group1</title>
<!-- Leaflet -->
<link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/leaflet.css />
<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/leaflet.js ></script>
<!-- Leaflet.draw -->
<link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/draw/leaflet.draw.css />
<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/draw/leaflet.draw.js ></script>
<!-- Leaflet Ajax -->
<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/ajax/dist/leaflet.ajax.js ></script>
<!-- Leaflet Measument -->
<link rel="stylesheet" href=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/measurement/leaflet-measure.css />
<script src=/home/gabrielschubert/Documents/hawkit_app/guis/pyqt_gui/leaflet/measurement/leaflet-measure.js ></script>
<style>
body { margin:0; padding:0; }
body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
#map { position:absolute; top:0; bottom:0; width:100%; } /* full size */
.ctl {
padding: 2px 10px 2px 10px;
background: white;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
text-align: right;
}
.title {
font-size: 18pt;
font-weight: bold;
}
.src {
font-size: 10pt;
}
#delete, #export {
position: absolute;
top:100px;
right:10px;
z-index:100;
background:white;
color:black;
padding:6px;
border-radius:4px;
font-family: 'Helvetica Neue';
cursor: pointer;
font-size:12px;
text-decoration:none;
}
#export {
top:130px;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='delete'>Delete Features</div>
<a href='#' id='export'>Export Features</a>
<script>
/* **** Leaflet **** */
// Base layers
// .. OpenStreetMap
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
// .. White background
var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==");
// Overlay layers (TMS)
var lyr1 = L.tileLayer('./tiles/{z}/{x}/{y}.png', {tms: true, maxZoom: 22, opacity: 0.9, attribution: ""});
// Map
var map = L.map('map', {
measureControl: true,
center: [-18.3604868606589, -52.694255477616245],
zoom: 22,
minZoom: 0,
maxZoom: 22,
layers: [osm]
});
lyr1.addTo(map);
function getColor(d) {
return d > 0.65 ? '#196619' :
d > 0.60 ? '#248f24' :
d > 0.55 ? '#2eb82e' :
d > 0.50 ? '#47d147' :
d > 0.45 ? '#85e085' :
d > 0.40 ? '#adebad' :
d > 0.35 ? '#d6f5d6' :
'#cc8033';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.area),
weight: 2,
opacity: 0.6,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
//Geojson Layers
var VECTOR_LAYERS_COUNT = 2500;
for (var i = 0; i < VECTOR_LAYERS_COUNT; i++) {
var geojsonLayer = new L.GeoJSON.AJAX("fields/data_divisions/vector"+ i.toString() +".geojson", {style: style});
geojsonLayer.addTo(map);}
var basemaps = {"OpenStreetMap": osm, "Without background": white}
var overlaymaps = {"Layer 1": lyr1}
// Title
var title = L.control();
title.onAdd = function(map) {
this._div = L.DomUtil.create('div', 'ctl title');
this.update();
return this._div;
};
title.update = function(props) {
this._div.innerHTML = "FazMaraneyRGB_transparent_mosaic_group1";
};
title.addTo(map);
// Note
var src = 'Generated by Hawkit';
var title = L.control({position: 'bottomleft'});
title.onAdd = function(map) {
this._div = L.DomUtil.create('div', 'ctl src');
this.update();
return this._div;
};
title.update = function(props) {
this._div.innerHTML = src;
};
title.addTo(map);
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
}
}).addTo(map);
map.on('draw:created', function(e) {
// Each time a feaute is created, it's added to the over arching feature group
featureGroup.addLayer(e.layer);
});
// on click, clear all layers
document.getElementById('delete').onclick = function(e) {
featureGroup.clearLayers();
}
document.getElementById('export').onclick = function(e) {
// Extract GeoJson from featureGroup
var data = featureGroup.toGeoJSON();
// Stringify the GeoJson
var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
// Create export
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download','data.geojson');
}
// Add base layers
L.control.layers(basemaps, overlaymaps, {collapsed: true}).addTo(map);
// Fit to overlay bounds (SW and NE points with (lat, lon))
map.fitBounds([[-18.36827062251916, -52.6871074784942], [-18.35270287637126, -52.7014028427423]]);
</script>
</body>
</html>