Today’s Links

 Uncategorized  Add comments
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:
Close Bitnami banner
Bitnami