Help with leaflet.fgdb.js

Luca Moiana

unread,

Feb 20, 2015, 7:54:07 AM2/20/15

to leafl...@googlegroups.com

Hi, for a work task I have to create a leaflet frome esri GDB.

I found out about leaflet.fgdb.js, (https://github.com/calvinmetcalf/leaflet.filegdb), but I can't get it to work with my GDB (I tested the GDB uploading it on http://calvinmetcalf.github.io/fileGDB.js.

So, what is wrong with my code?

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>A simple map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<style type="text/css" media="screen">
		body { margin:0; padding:0; }
    	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
</head>
<body>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<div id='map'></div>
		<script src="src/leaflet.js"></script>
        <script src="src/catiline.js"></script>
        <script src="leaflet.fgdb.js"></script>
        <script src="src/colorbrewer.js"></script>
        <script src="src/spin.js"></script>
<script >

    //creo una mappa con relativa posizione e zoom iniziali
     var map = L.map('map').setView([42.4110, 12.8868], 6);

    //aggiungo un layer di sfondo, o Base Layer
    var baseLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http:// mapbox.com">Mapbox</a>',
            maxZoom: 18
        }).addTo(map);
		var options = {
			onEachFeature: function(feature, layer) {
				if (feature.properties) {
					layer.bindPopup(Object.keys(feature.properties).map(function(k) {
						return k + ": " + feature.properties[k];
					}).join("<br />"), {
						maxHeight: 200
					});
				}
			},
			style:function(f){
				return  {
                opacity: 1,
                fillOpacity: 0.7,
                radius: 6,
                color: color(f)
            };
			}, pointToLayer: function(feature, latlng) {
            return L.circleMarker(latlng, {
                opacity: 1,
                fillOpacity: 0.7,
                color: color(feature)
            });
        }
		};
    	 L.fileGDB('site/NIDI.gdb',options).addTo(m);

</script>
	
</body>
</html>

Mathilde Le Goff

unread,

Feb 21, 2015, 12:56:57 PM2/21/15

to leafl...@googlegroups.com

Hi,

What are the errors on your Javascript console (on your browser) ?

I think in your gdb file URL, you need the zip extension to be load.

Luca Moiana

unread,

Feb 21, 2015, 3:20:02 PM2/21/15

to leafl...@googlegroups.com

Hi,

thank you for your reply, considera I am a noob. So, I don’t quite get the errors, in firebug;
But, If I open I have three red thing: $, JSZip, and JQuery

I can guess more, I even loaded JSZip.js with no luck.
here is my files structure:

index.html
    |-JS
    |-map.js
    |-DATA
    |-nidi.gdb
    |-nidi.gdb.zip

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/EAELTM3TXwA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

If we helped convince you not to print this email, go to www.printgreener.com/saveatree.php.

Mathilde Le Goff

unread,

Feb 23, 2015, 10:05:56 AM2/23/15

to leafl...@googlegroups.com

Your GDB files is on the DATA folder ?

You need to download the plugin and put it on the same folder than your index.html.

You don't have a "site" folder but your URL mentioned it ( "site/nidi.gdb")

Luca Moiana

unread,

Feb 23, 2015, 4:29:10 PM2/23/15

to leafl...@googlegroups.com

sorry, that was a copy&paste error.

My GDB is in DATA, the plugin is in src:

here is the code:
//(function(){
function color(s){
      return colorbrewer.Spectral[11][Math.abs(JSON.stringify(s).split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)) % 11];
    }
var map = L.map('map').setView([42.744388161339, 12.0809380292276], 6);
L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 18,
attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


// Icona Marker
var batbox = L.icon({
    iconUrl: 'src/images/opendot-marker.png',
    shadowUrl: 'src/images/opendot-marker-shadow.png',
    iconSize:     [80, 80], // size of the icon
    shadowSize:   [80, 80], // size of the shadow
    iconAnchor:   [0, 0], // point of the icon which will correspond to marker's location
    shadowAnchor: [0, 0], // the same for the shadow
    popupAnchor: [60, 15] // point from which the popup should open relative to the iconAnchor
});

var ghiandaia = L.icon({
    iconUrl: 'src/images/opendot-marker.png',
    shadowUrl: 'src/images/opendot-marker-shadow.png',
    iconSize:     [80, 80], // size of the icon
    shadowSize:   [80, 80], // size of the shadow
    iconAnchor:   [0, 0], // point of the icon which will correspond to marker's location
    shadowAnchor: [0, 0], // the same for the shadow
    popupAnchor: [60, 15] // point from which the popup should open relative to the iconAnchor
});

var pellegrino = L.icon({
    iconUrl: 'src/images/opendot-marker.png',
    shadowUrl: 'src/images/opendot-marker-shadow.png',
    iconSize:     [80, 80], // size of the icon
    shadowSize:   [80, 80], // size of the shadow
    iconAnchor:   [0, 0], // point of the icon which will correspond to marker's location
    shadowAnchor: [0, 0], // the same for the shadow
    popupAnchor: [60, 15] // point from which the popup should open relative to the iconAnchor
});

var cicogna = L.icon({
    iconUrl: 'src/images/opendot-marker.png',
    shadowUrl: 'src/images/opendot-marker-shadow.png',
    iconSize:     [80, 80], // size of the icon
    shadowSize:   [80, 80], // size of the shadow
    iconAnchor:   [0, 0], // point of the icon which will correspond to marker's location
    shadowAnchor: [0, 0], // the same for the shadow
    popupAnchor: [60, 15] // point from which the popup should open relative to the iconAnchor
});

L.fileGDB('DATA/GDB.gdb.zip',options).addTo(map);

//})();

Reply all

Reply to author

Forward