formatting options

[itjustwerks]

Is there any way to get the format -> encoder/decoder option working here for formatting the input/output of the slider?

[benib]

Thanks a lot for this @HIRANO-Satoshi. I will need some time to get through this.

[martynchamberlin]

@benib Would love to see this PR move along. The community has by and large moved away from Gulp and JSPM into Webpack and NPM. For now, my package.json references the changes introduced by this PR:

    "aurelia-leaflet": "github:HIRANO-Satoshi/aurelia-leaflet",

There are a couple of things lacking that I had to change to get this to work. First I had to install the leaflet.css directly so it'd be in my package.json:

npm install --save leaflet

Then in main.js:

require('leaflet/dist/leaflet.css');

Then the image src's got messed up for the markers and shadows, so I had to elbow grease those too, by creating custom icons so I could specify custom URLs (which end up becoming data:image resources).

import leaflet from 'leaflet';
const iconUrl = require('leaflet/dist/images/marker-icon.png');
const shadowUrl = require('leaflet/dist/images/marker-shadow.png'); 

// then later on, when I'm building a layer, which will get added to the 
// layers.overlay array, which is then passed to the leaflet component as the layers.bind="layers"
// prop
const newLayer = {
  type: 'marker',
  // some other properties, such as latLng, popupContent, id, etc, and then:
  icon: leaflet.icon({
    iconUrl,
    shadowUrl
  })
}
this.layers.overlay.push(newLayer)

It'd be awesome if this PR supported these things so their implementation details are tucked away, but I'm honestly not sure what the best way is to get image resources from a node_modules dependency into a production context. You don't want to just reference an image with an src that directly references the node_modules, directory as JSPM does. There's some discussion about this elsewhere but I'm not sure there's an agreed standard for this.

[HIRANO-Satoshi]

@martynchamberlin Hi Martyn,

I think importing required resources is not bad.

Here is a part of my map.ts. Some come from src since not all packages have dist.

import { LeafletCustomElement } from 'aurelia-leaflet';
import * as Leaflet from 'leaflet';
import 'leaflet.fullscreen'
import 'leaflet.fullscreen/Control.FullScreen.css'
import 'Leaflet.extra-markers';
import 'Leaflet.extra-markers/dist/css/leaflet.extra-markers.min.css'
import 'leaflet.zoomslider/src/L.Control.Zoomslider.css';
import 'leaflet.zoomslider/src/L.Control.Zoomslider.js';
import 'leaflet-control-topcenter/dist/leaflet-control-topcenter.css'
import 'leaflet-control-topcenter/dist/leaflet-control-topcenter.js'
/// <reference path='leaflet.d.ts'/>

I had not noticed the leaflet/dist/leaflet.css. My app is working without importing it.

[benib]

I am very sorry for not finding the time to look into these. I hope to be able to go through these PRs in the next weeks.

Would anyone of you be available to take over lead maintainership?

[HIRANO-Satoshi]

@benib Don't worry. I just appreciate your efforts made so far. Everyone knows everyone is busy.

I don't think I could take time to be a lead maintainer. Sorry.