ember-leaflet-cartodb's Introduction

ember-leaflet-cartodb

Ember-Leaflet CartoDB.js layer component
{{cartodb-layer url='...'}}

Installation

This component only works when using ember-leaflet, so install that first.

ember install ember-leaflet-cartodb

Usage

{{#leaflet-map lat=lat lng=lng zoom=zoom as |layers|}}
  {{layers.tile url='http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'}}
  {{cartodb-layer url='http://nacis-workshop.cartodb.com/api/v2/viz/569d1940-336d-11e3-af98-5f54611e93d5/viz.json' zIndex=1}}
{{/leaflet-map}}

Note: Example is using Ember 2.3's Contextual Components feature.

API

`{{cartodb-layer}}`

A layer that takes a CartoDB viz url and renders it on the map.

`url`

Takes a string, in the following form:

http://documentation.cartodb.com/api/v2/viz/836e37ca-085a-11e4-8834-0edbca4b5057/viz.json

`onClick`

An action that is fired when clicking a layer that has interactivity. All arguments are the same as those of Carto's featureClick event. This only works if using a version of Leaflet less then 1.0, so update your bower.json accordingly.

{{cartodb-layer url='' onClick=(action 'mapClick')}}

`legends`

Disable the legend that comes from CartoDB. Defaults to true (enabled).

`infowindow`

Disable the infowindow that opens if interactivity is set on one of the sublayers.

`zIndex`

Set the ordering of the layer compared to other layers used.

`sql`

Change the SQL query used in the Carto Viz provided by url.

Contributing

CONTRIBUTING.md

ember-leaflet-cartodb's People

Contributors

Stargazers

Watchers

ember-leaflet-cartodb's Issues

CartoDB layer events don't propagate

CartoJS has a number of helpful events for getting information about map state:
https://carto.com/docs/carto-engine/carto-js/events/

I'm still thinking through how to approach this, but it starts with following ember-leaflet's structure and adding those events here:
https://github.com/knownasilya/ember-leaflet-cartodb/blob/master/addon/components/cartodb-layer.js#L15

For starters, the "load" event would be extremely useful, but so far using it on the component ({{cartodb-layer onLoad='controllerAction'}}) throws an error:
addEventListener is not a function. This is thrown because ember-leaflet first generates semantic names for events, then calls this method with the assumption that the layer is part of Leaflet's core:
this._layer.addEventListener(eventName, this._eventHandlers[eventName], this);

Maybe the layer needs to be wrapped in a custom Leaflet layer class? I've tried explicitly defining the missing method, but I'm not sure that's the right approach.

var MyCustomLayer = L.Class.extend({

    initialize: function (latlng) {
        // save position of the layer or any options from the constructor
        this._latlng = latlng;
    },

    onAdd: function (map) {
        this._map = map;

        // create a DOM element and put it into one of the map panes
        this._el = L.DomUtil.create('div', 'my-custom-layer leaflet-zoom-hide');
        map.getPanes().overlayPane.appendChild(this._el);

        // add a viewreset event listener for updating layer's position, do the latter
        map.on('viewreset', this._reset, this);
        this._reset();
    },

    onRemove: function (map) {
        // remove layer's DOM elements and listeners
        map.getPanes().overlayPane.removeChild(this._el);
        map.off('viewreset', this._reset, this);
    },

    _reset: function () {
        // update layer's position
        var pos = this._map.latLngToLayerPoint(this._latlng);
        L.DomUtil.setPosition(this._el, pos);
    }
});

map.addLayer(new MyCustomLayer(latlng));

I'm working on adding a failing test for this and will continue looking into it, but any help is appreciated!

Recommend Projects

knownasilya / ember-leaflet-cartodb Goto Github PK

ember-leaflet-cartodb's Introduction

ember-leaflet-cartodb

Installation

Usage

API

{{cartodb-layer}}

url

onClick

legends

infowindow

zIndex

sql