Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problem when using L.GeoJSON.AJAX() on google Chrome/Chromium #54

Open
gabrielschubert opened this issue May 8, 2018 · 2 comments
Open

Problem when using L.GeoJSON.AJAX() on google Chrome/Chromium #54

gabrielschubert opened this issue May 8, 2018 · 2 comments

Comments

@gabrielschubert
Copy link

gabrielschubert commented May 8, 2018 •
edited by calvinmetcalf
Loading

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: '&copy; <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>
@calvinmetcalf
Copy link
Owner

you have to open it as an actual http:// page not a file:// page if you're using python then running python -m SimpleHTTPServer 8000 in the directory should do the trick

@gabrielschubert
Copy link
Author

Hi Calvinmetcalf,

Thank you for your help. Your tip has solved partially my problem. When I open the html file (using the python local server) it works, but if I close the web browser and reopen the file (or click on reload), the map doesn't load anymore. Even if I restart the python server still not working more than one opening. I got this error:

js: Uncaught SyntaxError: Unexpected token 
js: Uncaught SyntaxError: Unexpected end of JSON input

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@calvinmetcalf @gabrielschubert