Feb 242015
 
  • Information for court [on hold]

    Do your company plot coordinates for court hearings? I have pulled the information myself. However I am looking for a expert for court

  • Leaflet is behaving unexpectedly when trying to load more than one layer

    I had a hard time trying to create a good title for my issue since it is a little hard to explain. But I will do my best.
    Basically what I’m trying to create a web map to show three distinct layers, each from a different time period. The user choose a year and then the layer is loaded. For this to happen Geoserver is serving three layers using WFS. Now what follows is weird.

    • Sometimes when the web map is loaded, or refreshed, some layers are not encoded.
    • Sometimes layers end-up in the wrong year option.
    • But sometimes everything works, but requires that I refresh the page several times.

    Basically my code is not behaving as it should all the time. At first I thought that this should be something related to Geoserver (I posted this question a while ago following this line of though). But now I suspect that the issue is in my Javascript code, I friend of mine mentioned something relate to syncronous and asycrounouns code but I have not idea how to start debugging it.

    This is my code:

    <html>
    
    <head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="Plugins/Leaflet.label-master/dist/leaflet.label.css" />
    <title>Mapping Past Denver</title>
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="Plugins/Leaflet.label-master/dist/leaflet.label.js"></script>
    </head>
    
    <body>
    <div id="map">
        <script>
            var map = L.map('map').setView([39.752171, -104.998817], 17);
    
            //the base map
            L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
                maxZoom: 20,
                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>',
                id: 'examples.map-20v6611k'
            }).addTo(map);
    
            //create the datasets that will hold the layers      
            var dataset1 = new L.layerGroup();
            var dataset2 = new L.layerGroup();
            var dataset3 = new L.layerGroup();
    
    
            //JSON request   
            var WFSLayer1 = null;
            var ajax = $.ajax({
                url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset3&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
                dataType: 'jsonp',
                jsonpCallback: 'getJson',
                success: function (response) {
                    WFSLayer1 = L.geoJson(response, {
                        style: function (feature) {
                            return {
                                weight: 5,
                                color: '#6e7ce8',
                                weight: 2,
                                opacity: 1,
                                dashArray: '3',
                                fillOpacity: 0.7,
                            };
                        },
                        onEachFeature: function (feature, layer) {
                            popupOptions = {
                                maxWidth: 200
                            };
                            if (feature.properties.name !== null) {
                                layer.bindLabel(feature.properties.name, popupOptions, {
                                    noHide: true
                                });
                            };
                            layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
                            layer.on({
                                click: zoomToFeature
                            })
                        }
                    }).addTo(dataset1);
                }
            });
    
            var WFSLayer2 = null;
            var ajax = $.ajax({
                url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset1&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
                dataType: 'jsonp',
                jsonpCallback: 'getJson',
                success: function (response) {
                    WFSLayer1 = L.geoJson(response, {
                        style: function (feature) {
                            return {
                                weight: 5,
                                color: '#e31424',
                                weight: 2,
                                opacity: 1,
                                dashArray: '3',
                                fillOpacity: 0.7,
                            };
                        },
                        onEachFeature: function (feature, layer) {
                            popupOptions = {
                                maxWidth: 200
                            };
                            if (feature.properties.name !== null) {
                                layer.bindLabel(feature.properties.name, popupOptions, {
                                    noHide: true
                                });
                            };
                            layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
                            layer.on({
                                click: zoomToFeature
                            })
                        }
                    }).addTo(dataset2);
                }
            });
    
            var WFSLayer3 = null;
            var ajax = $.ajax({
                url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset2&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
                dataType: 'jsonp',
                jsonpCallback: 'getJson',
                success: function (response) {
                    WFSLayer3 = L.geoJson(response, {
                        style: function (feature) {
                            return {
                                weight: 5,
                                color: '#14e324',
                                weight: 2,
                                opacity: 1,
                                dashArray: '3',
                                fillOpacity: 0.7,
                            };
                        },
                        onEachFeature: function (feature, layer) {
                            popupOptions = {
                                maxWidth: 200
                            };
                            if (feature.properties.name !== null) {
                                layer.bindLabel(feature.properties.name, popupOptions, {
                                    noHide: true
                                });
                            };
                            layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
                            layer.on({
                                click: zoomToFeature
                            })
                        }
                    }).addTo(dataset3);
                }
            });
    
    
            //zoom to feature
            function zoomToFeature(e) {
                map.fitBounds(e.target.getBounds());
            }
    
            //group the datasets
            var overlayData = {
                "1887": dataset1,
                "1925": dataset2,
                "1961": dataset3
            };
    
    
            //create the layer control
            L.control.layers(overlayData, null, {
                collapsed: false
            }).addTo(map);
        </script>
    </div>
    

    Any type of help or idea is very appreciated, since now I have no idea where to start. Also, I’m very open to rebuild the code following better practices =).

    Best,

  • Add wmts layer from Geoserver to ArcGIS viewer for Flex

    Is there anyone out there who has set wmts layer from Geoserver to ArcGIS viewer for flex?

    I am trying to do that but without any luck.

    <layer label="Sample WMTS layer" type="wmts" visible="true" useproxy="false" imageformat="gif" url="http://v2.suite.opengeo.org/geoserver/gwc/service/wmts" style="_null" servicemode="KVP" layerid="world" tilematrixsetid="EPSG:4326"/>
    

    If I change the type to “wms” it works like a charm.

    Anyone?

Digest powered by RSS Digest

 Posted by at 13:38
%d bloggers like this: