jasonsanford / leaflet-vector-layers Goto Github PK

A click currently triggers a Popup if there is a popupTemplate set. There should be another click option that would get fired when a feature is clicked.

Not sure what to pass to the function. The click event, the vector (marker, Polyline, Polygon), feature properties?

/cc @bmcbride

When creating lvector.AGS with esriOptions: true, it starts an asynchronous AJAX query for layer options. If I call setMap() immediately after layer creation code, it causes _show() call on a partially initialized layer.
This doesn't occur if I pass the map as an option when creating a layer but such behavior seems to be unclear.

By default all points are converted to simple Makers, but a CircleMarker would be helpful too.

I think adding a circleMarker: true option in vectorOptions would be the best bet:

{
    circleMarker: true,
    radius: 4,
    fillColor: "#a9235e",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
}

/cc @bmcbride

In my use case i select a category of features and then another .. but i have to move the map to be able to see the features that are (correctly with every action) being fetched on the map as it only updates when the bounds are changed. In this case the features on the map change but the bounds do not.

There is an autoUpdate with an interval, but that is not what i have in mind for the use case described above.

I am fairly new to leaflet, so I cannot speak for past versions. However, leaflet 0.6.4 has a simple layer control. To use this control, a layer must implement Leaflet ILayer. There are a number of other plugins that require this behavior.

I would suggest the following changes to your code.

lvector.Layer = L.Class.extend({
   options: {
        //...
   },
   // Leaflet ILayer
   onAdd: function(map) {
    this.setMap(map); //done this way in demo code
   }

   onRemove: function(map){
    this.setMap(null); //done this way in demo code
   }

})

In the interim, it is simple to extend a lvector.Layer child class and add these two methods. But I have to do this for each layer child that I would like to use.

    lvector.AGS_ILayer.extend({
        // Leaflet ILayer
        onAdd: function(map) {
            this.setMap(map); //done this way in demo code
        }

        onRemove: function(map){
            this.setMap(null); //done this way in demo code
        }
    });

NOTE: As a side effect, implementing ILayer introduces a bug between the layer control and the lvector.Layer. The layer control calls onRemove to remove the display of the llvector.Layer on the map. This causes lvector.Layer to set the map to null using the "this.setMap(null)" call. When the map is zoomed, the function "_checkLayerVisibility" is called. This pokes options.map for its zoom level. At this point, options.map is null and throws an exception. Fortunately, the code is written in such a way that this exception is equivalent to a null predicate of true and exits the function without disrupting anything else. It does however log an annoying exception in the debug console.

    //Layer.js line 222

    //
    // Get the current map zoom and check to see if the layer should still be visible
    //
    _checkLayerVisibility: function() {
        if (  !this.options.map )  { 
            return; // The layer is not present on the map, so do nothing.
        }
        //
        // Store current visibility so we can see if it changed
        //
        var visibilityBefore = this.options.visibleAtScale;
     }

Finally,

Thank you for this awesome codebase! It has saved my bacon.

-Devon

When Popups are present, then you zoom out of range (removing the Popup as expected), then zoom back into range the Popup is gone.

Hi Jason,

I'd love to be able to use your plugin for a CartoDB layer in a Leaflet map I'm working on-- the main thing that's attracting me is the dynamic/autoupdate functionality. Unfortunately, it looks like your examples at http://geojason.info/leaflet-vector-layers/demos/cartodb/ aren't working and I couldn't get your plugin working with my site and CartoDB table. Can you let me know when you get it working again?

I was also wondering if you're planning on doing an update to support Leaflet 0.4 soon.

Thanks!

IE 7 is choking with an error when you try and use custom icons for a points on a AGS layer.

Clicking "Sewer Line On" returns a 200 with
GISCloud_91879._processFeatures({"type":"features","total":0,"page":1,"data":[]});
Same thing with Man Hole,Flood Zones, & Bus Stops.
I guess these were recently obsoleted or something?

Elementary Schools retrieves data and grabs the school.png, but never displays anything, unless I am missing something...

It would be nice if you support clustering for the features that are being displayed. Maybe use the existing leaflet cluster-marker plugin?

I can't get popups to work on GeoIQ point features using a {braces} type popupTemplate:

<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <title>Leaflet vector layers test</title>

        <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css">

        <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
        <script src="http://maps.stamen.com/js/tile.stamen.js?v1.2.0"></script>
        <script src="http://www.crimeinlondon.com/js/vendor/lvector.js"></script>
    </head>
    <body>
        <div id="mainboroughmap" style="height: 600px;"></div>
        <script>
            var railMarker = L.Icon.extend({options: {iconUrl: "http://www.crimeinlondon.com/img/atoc-logo-small.png",shadowUrl: null}});
            var stamen2 = new L.StamenTileLayer("toner-lite");
            var boroughmap = new L.Map("mainboroughmap", {
                    layers: [stamen2],
                    maxZoom: 16,
                    minZoom: 13
                }).setView([51.4863683774,-0.101332641196], 15);

            var railstns = new lvector.GeoIQ({dataset: 315350,map:boroughmap,uniqueField: "atcocode",scaleRange: [13,16],symbology: {type: "single",vectorOptions: {icon: new railMarker()}},popupTemplate:'<p>{commonname}</p>',singlePopup:true});
        </script>
    </body>
</html>

Is this a bug or have I got a mistake in my code?

Added popupOptions so wider Popups could be created. Needs docs.

Hey Jason,

PostGIS sets a default decimal precision of 15 for the ST_AsGeoJSON function: http://www.postgis.org/docs/ST_AsGeoJSON.html. Would it make sense to set a "geomPrecision" option for the providers that utilize PostGIS to reduce the file transfer size? I've tested with bumping it down to 6 without any noticeable difference in geometry and a smaller file size. This should improve performance. If you agree, I can put together a pull request.

BRYAN

If the L.LatLngBounds.equals method makes it into Leaflet core, remove the extension of L.LatLngBounds in leaflet lib code.

Leaflet issue is CloudMade/Leaflet#415

A2E has been checked.

The exact issue described in issue 29 occurs when using the latest version of leaflet-vector-layers (1.4.0).

In the file AGS.js

Add before the line 223:

var outSR = this.options.outSR || '4326';

Change the line 225:

"&outSR=4326" + // receive geometry in WGS 84 Lat/Lng.

For:

"&outSR=" + outSR + // receive geometry by default WGS 84 Lat/Lng.

In addition to marker and circleMarker, there should be a circle option.

The difference is that circle's radius is in meters while the circleMarker's radius is set in pixels.

I tried editing the source and adding this feature myself but I had some trouble.

I cannot get it to work on my computer.
Thanks!

Hello. Thank you for the great Plugin.

In src/layer/EsriJSONLayer.js:24 of the v1.4 release, the plugin invokes the "x" and "y" properties on the values of the geometry.points array. Although single point Geometries returned from the ArcGIS web service do have these two properties, MultiPoints do not and cause "undefined" to be passed to L.LatLng.

See the 9.3 ESRI documentation showing the structure of the "points" array. The structure is the same for 10.x too:

http://resources.esri.com/help/9.3/arcgisserver/apis/rest/geometry.html (scroll down to "Multipoint")

The fix is:

for (var i = 0, len = geometry.points.length; i < len; i++) {
     var point = geometry.points[i];
     vectors.push(new L.Marker(new L.LatLng(point[1], point[0]), opts));
}

Would be nice to also include support for json output from GeoServer. I just found this project, and will fork and work on it hopefully soon. If you think it's low hanging, please add it on the next release. Would be really useful for many.

Can there be (or is there already) a way to introduce a callback when JSON data has started/finished loading. I would like to add a 'loading' indicator each time a new dataset is waiting to load into the map.

I'd like to use the FEMA flood hazards ArcGIS Rest services: https://hazards.fema.gov/femaportal/wps/portal/NFHLWMS since their WMS service doesn't support web mercator projection (EPSG:900913 or EPSG:3857) but their ArcGis Rest service does.

Can leaflet-vector-layers utilize these services?

Thanks

Currently using leaflet-include.js for debugging and extending L.LatLngBounds with an equals method.

Currently using lvector-include.js for debugging.

Hi,
this plugin looks verry interesting to me because i have to add huge sets of features.
I get the features from a webservice by defining the bounding box in lat/long.
The result is in geojson.
Is there a way to use this plugin with my setup?

Thank you verry much for any help.

First of all, thanks for a great package, solved a real problem for me!

But: The ArcGIS Server layer (lvector.AGS) didn't seem to support adding it into a layer control i.e. letting the user check it visible and invisible in a list of contents. I experimented a bit and ti would seem to me that this functionality can easily be included by adding following methods the Layer.js:

onAdd: function(o){
    this._show();
},

onRemove: function(o){
    this._hide();
},

Worked for me at least. However, I couldn't figure out how to set the layer invisible by code (this would be the default state when adding the layer)...

Once features are added with processFeatures they are never removed. In my use case i can select a category of features and then those features are being added. Next i unselect that category and then it processes an empty list of features. However the map is not cleared.

It would be excellent if this would allow calls to TileStache GeoJSON vector tiles in the format:
http://DOMAIN.com/tiles/tiles.py/LAYERNAME/{z}/{x}/{y}.geojson

New references:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" />
<![endif]-->

<script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>

Seems like geojason.info doesn't have any content anymore.

When I use esriOptions = true in lvector.AGS, I get an error in _hideVectors function (in Layer.js) because this._vectors is undefined. I believe there should be a check for this in the start of the function.

"the link you have on this page http://geojason.info/leaflet-vector-layers/documentation/#docs-prwsf to the DRCOG Data Api is broken. The correct link is http://gis.drcog.org/datacatalog/cookbook."

Change to Leaflet Popups

Hello @JasonSanford ,
I am the member of the cdnjs project.
We want to host this library.
Which license do you use?
Thanks.

cdnjs/cdnjs#6746

This has already been added to Google Vector Layers. Need to port here.

Hi Jason,

Would it be possible to get a demo files without the HTML explaination?

It think it would be easier to follow.

For example for CartoDB should have 2 files (e.g. cartodb_demo1.html and carto_demo2.html).

I think this would supplement the index.html (current file now).

Thanks in advance.

Noli

Is it possible to request JSON instead of JSONP? I am using LVL as a front end to a geoserver that is on my own domain, so I don't need the added complexity and potential security risk of JSONP.

Is there currently, or could there be added, a function that expects straight-up JSON?

When properties changed for a feature (dynamic data) we are only using setOptions to change the vector's style. We'll need to use Leaflet's setStyle and some other method to change the marker icon.

Reference bug
Forum discussion

Workarounds include appending a random number to the request url (&tr=<#random#>)
I added "&ts=" + (new Date()).getTime() + to the url builder in AGS.js and rebuilt, which is working for my specific project.

ESRI claims bug fixed in 10.2, but folks may still see this if using 10.1.
I can submit a pull req if you'd like, but you may want to explore the issue more before you decide which path to take.
Cheers.