canufeel / ember-leaflet-layer-control

Ember Leaflet Layer Control plugin for Ember-Leaflet - https://github.com/miguelcobain/ember-leaflet

Ember-leaflet-layer-control

Provides Interface for collapsible Layer Control functionality in Ember-Leaflet, an Ember Addon for Leaflet interactive maps.

This plugin utilizes Leaflet Layer Groups to create overlay layers in Leaflet Layer Control and also enables to identify Leaflet Tile Layers as baselayers in Layer Control. You can see the demo of Native Leaflet Layer Control implementation here.

Installation

• ember install ember-leaflet-layer-control

Using the plugin

The following example summarizes the usage of the plugin by simple example:

template.hbs

{{#leaflet-map lat=lat lng=lng zoom=zoom}}

  {{#layer-group name="tilelayer#1" baselayer=true default=true}}
    {{tile-layer url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}
  {{/layer-group}}

  {{#layer-group name="tilelayer#2" baselayer=true}}
    {{google-tile-layer type="SATELLITE" opacity=0.9}}
  {{/layer-group}}

  {{#layer-group name="markerLayer#1" default=true}}
    {{#each markers as |marker|}}
      {{#marker-layer location=marker.location as |subcomponents|}}
        {{#subcomponents.popup}}<h3>{{marker.title}}</h3>{{marker.description}}{{/subcomponents.popup}}
        {{#subcomponents.tooltip}}{{marker.title}} tooltip.{{/subcomponents.tooltip}}
      {{/marker-layer}}
    {{/each}}
  {{/layer-group}}

  {{#layer-group name="polylineLayer#1"}}
    {{#each polylines as |polyline|}}
      {{#polyline-layer locations=polyline.locations as |subcomponents|}}
        {{#subcomponents.popup}}<h3>{{polyline.title}}</h3>{{polyline.description}}{{/subcomponents.popup}}
        {{#subcomponents.tooltip}}{{polyline.title}} tooltip.{{/subcomponents.tooltip}}    
      {{/polyline-layer}}
    {{/each}}
  {{/layer-group}}

  {{layer-control handler=(action "layerControlEvent")}}

{{/leaflet-map}}

component.js

import Ember from 'ember';

export default Ember.Component.extend({
  lat: 53.318602,
  lng: 48.586415,
  zoom: 15,
  markers: [
    {
      title:"marker1",
      description:"this is marker1",
      location: new L.LatLng(53.318602,48.586415)
    }
  ],
  polylines:[
  // some polyline data here.
  ],
  actions: {
    layerControlEvent(event){

    }  
  }
});

####Baselayers Creating such component would result in a leaflet map with layer-control element. On load the tile layer tilelayer#1 is selected in layer control and enabled on the map. Both tilelayer#1 and tilelayer#2 are shown in layer control as radio buttons. This happens as they both have baselayer=true so they are identified as baselayers. There must be just one baselayer per each {{#layer-group}}{{/layer-group}} block. The names of layers can be set by setting the name attribute on the block. This names currently only are valid during initialization and are not bound. to the values in leaflet layer control. You can use baselayer control to enable seamless support of Google tile layers implemented as other ember-leaflet plugin.

####Layergroups Layer groups with names markerLayer#1 and polylineLayer#1 are real leaflet Layer Groups and can hold as much different leaflet elements as needed and they can be also of different types together in one group. The component identifies them as native Leaflet Layer groups as the baselayer=true is NOT set on them. Their name attribute also propagates to layer control on init and they are displayed as checkboxes there. The {{#layer-group default=true}}{{/layer-group}} would enable the layer group on the map during init as oposed to excluding the argument or providing false value in which case the layer group would be disabled on init.

####Layer-control This component is only available as blockless version. It is important that this component is placed inside the {{#leaflet-map}}{{/leaflet-map}} and it should come last, after all {{#layer-group}}{{/layer-group}} declarations.

####Handling events You can set the action on the layer-control component like in the example: {{layer-control handler=(action "layerControlEvent")}}. Then this action would be fired on any change in Leaflet control (if we change the baselayer or tick layer group on or off). The handler would recieve the Leaflet object of the following form:

{
    layer: ##the layer which was triggered##,
    name: ##layer name as set on layer group##,
    overlay: ##true/false##,
    target: ##Leaflet map object##,
    type: ##"overlayadd"/"overlayremove"/"baselayerchange"##
}

The important parts here would be type which corresponds for event type: overlayadd - stands for overlay layer has been ticked to the on position overlayremove - stands for overlay layer has been ticked to the off position baselayerchange - stands for the tile layer (baselayer) change

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

ember-leaflet-layer-control's Issues

Base layers draw on top of other tile layers

If I have the following inside {{#ember-leaflet}}

    {{#layer-group name="Open Streets" baselayer=true default=true}}
      {{tile-layer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}}
    {{/layer-group}}

    {{#layer-group name="Light Map" baselayer=true}}
      {{tile-layer url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"}}
    {{/layer-group}}

    {{#layer-group name="Crosswinds" default=true}}
      {{tile-layer url=crossWindsTileUrl}}
    {{/layer-group}}

Then the Crosswinds layer is drawn underneath the basemaps.

image

Map layer identifier

So I have a bunch of map layer groups, and as far as I can tell, currently the only real way of identifying them in the layerControlEvent is with their display name attribute.

For example;

{{#layer-group name="OSM" baselayer=true}}
  {{tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='...' maxNativeZoom=19 maxZoom=21}}
{{/layer-group}}

{{#layer-group name="Google" baselayer=true}}
  {{google-mutant-layer type="roadmap" maxNativeZoom=21 maxZoom=21}}
{{/layer-group}}

{{#layer-group name="Traffic" baselayer=true}}
  {{google-mutant-layer type="roadmap" maxNativeZoom=21 maxZoom=21 isTrafficOn=true}}
{{/layer-group}}

layerControlEvent: function(event) {
  if(event.type === 'baselayerchange') {
    switch(event.name) {
      case 'OSM':
        ...
        break;
      case 'Google':
        ...
        break;
      case 'Traffic':
        ...
        break;
      default:
        ...
        break;
    }
  }
}

It "works" - but I'd rather use a unique identifying attribute for the map layer group that I can save back to the server as the user's default map layer on baselayerchange event, this way I can later change the display name for the map layer without having to deal with what might be saved on the backend.

Something like this would work well, with the layerGroupId then being passed into the layerControlEvent handler somehow
{{#layer-group name="OSM" layerGroupId="osm_map_layer" baselayer=true}}

default parameter in template declaration doesn't work

If I have this inside {{#leaflet-map}} the layer is still enabled on page/map load

{{#layer-group name="Road segment" default=false}}
    {{polyline-layer locations=polylineLocations color="red"}}
{{/layer-group}}

Cannot read property 'ember-leaflet' of undefined

Hi,

I can't seem to get this addon to run. As soon as install the plugin (ember install ember-leaflet-layer-control) and before even changing any code in my application I get the error message "Cannot read property 'ember-leaflet' of undefined". Once I remove the plugin, everything's back to normal.

Maybe someone can point me in the right direction...

Thanks,
Ulf

P.S.: I'm running a combined Rails/Ember app (using the ember-cli-rails gem) so the exact error message thrown is:

ActionView::Template::Error (:frontend has failed to build: Cannot read property 'ember-leaflet' of undefined
):

P.P.S.: I'm currently on:

• "ember-cli": "2.11.1"
• "ember-leaflet": "3.0.11"

Ember leaflet 3.0.2 breaks ember-leaflet-layer-control

Need to replace ember-leaflet/mixins/container with ember-composability-tools
miguelcobain/ember-leaflet@25ea9bb

zIndex support

if we imagine that Streets and Buildings below actually are transparent layers with streets and building, then how do I force the layer control to draw them last? Using zIndex does not seem to do the trick : )

{{#leaflet-map lat=lat lng=lng zoom=zoom onMoveend=(action "updateCenter")}}

  {{#layer-group name="CartoCdn" baselayer=true default=true}}
    {{tile-layer
      url="http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
      zIndex=100
    }}
  {{/layer-group}}

  {{#layer-group name="ESRI" baselayer=true}}
    {{tile-layer 
      url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}"
      zIndex=200
    }}
  {{/layer-group}}

  {{#layer-group name="Streets"}}
    {{tile-layer
      url="http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
      zIndex=300
    }}
  {{/layer-group}}

  {{#layer-group name="Buildings"}}
     {{tile-layer
       url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
       zIndex=400
     }}
  {{/layer-group}}

  {{layer-control handler=(action "layerControlEvent")}}

{{/leaflet-map}}

Adding/removing layer-groups dynamically

Hello,

I've been trying to display a layer-group on a map, when I have the tracking data for it. I would also like to only show the layer-control for the group when this data comes in (itemLocations is no longer null). The way I thought it would be done would be something like this;

{{#if itemLocations}}
	{{#layer-group name="24 hour track" default=true}}
			{{!-- Track --}}
			{{polyline-layer locations=itemLocations color="blue"}}
			
			{{!-- Marker at each tracking point --}}
			{{#each itemLocations as |loc|}}
				{{#circle-marker-layer location=loc radius=1}}
				{{/circle-marker-layer}}
			{{/each}}
	{{/layer-group}}
{{/if}}

Before the data comes in (itemLocations is null) everything is displayed correctly (layer isn't on map yet and no control in the layer-control). When the data is available and itemLocations is an array of locations, the data is drawn correctly on the map, but the layer control option for the group is missing, it's as if the layer-control wasn't updated or something.

Is this the correct approach? Is this even possible to do with this addon? Do I need to invalidate/refresh the layer-control or something to get it to update the available layer-group options?

Thanks for your help

Version publish

Hey @canufeel could we get a version published? There are a few commits on the master branch since the last release. I need some of these commits so I've had my prod webapp pointing to master of this addon for a while now... Thanks!

leaflet-map doesn't match tile-layer - 1:3

I tried to use the layer control by following the example but it is giving me that error

My template.hbs

default=false, not working?

Perhaps I don't understand correctly, but shouldn't default=false not show the layer group on the map by default? Essentially I would like the group to be in the layer control, but be unchecked by default, and this doesn't seem to do anything.

{{#layer-group name="Track" default=false}}
...
{{/layer-group}}

If I'm not understanding correctly, what does the flag actually do? And is it possible to not show a layer by default somehow?

Thanks!