muxlab / map-effects-100 Goto Github PK

The direct link to ES5 style guide is : https://github.com/airbnb/javascript/tree/master/es5

Test for @tsamaya 's PR #8 to allows https.

If only warning, we can marge it and will fix other issues by next patch.

• D3, Turf, OSM

  @tsamaya have done them already.

• CartoDB Basemap

  I think that it is ignored at this time.
  Esri is better. But it should not update and add plugin for just a basemap.
  Stamen is also invalid? https://c.tile.stamen.com/toner/11/328/790.png
  cartodb-basemaps-{s}.global.ssl.fastly.net can be accessed via https.

• Open Data Portal of Esri Japan

  Yes, I agree. The geojson will be embedded into map-effects-100/data/.

• Font Awesome

  I think that it is ignored at this time.
  A known issue -> softlayer/sl-ember-components#1034

• Video from mazwai

  http://mazwai.com/
  HTTPS is not supported.
  We should take a large file into other storage services. S3?

Hi MuxLab team,

I think using something like gulp-processhtml can help us during development using gulp with linting and build source automaticcaly in a destination folder

https://www.npmjs.com/package/gulp-processhtml

My thoughts:

• move sources files into a src folder (js and html)
• add gulp plugins
• build project source with destination in leaflet folder
• update CONTRIBUTING.md

Targeted examples

• https://github.com/muxlab/map-effects-100/blob/gh-pages/Leaflet/05_svg-marker-animation.html
• https://github.com/muxlab/map-effects-100/blob/gh-pages/Leaflet/08_time-animation.html

The below css is not working on iOS Safari.

-webkit-transition: r 4s;

However D3.transition() is working.
We try to replace every example to use transition into D3 solution.

d3.select('circle#' + properties['code'])
                        .transition()
                        .delay(0)
                        .duration(4000)
                        .attr('r', properties['mag']*2.5)

Targeted examples

• https://github.com/muxlab/map-effects-100/blob/gh-pages/Leaflet/08_time-animation.html
• https://github.com/muxlab/map-effects-100/blob/gh-pages/Leaflet/09_nearest-with-turf.html

I will do it later.
http://badge.fury.io/

• npm publish the repo
• add a version badge in README.md
• npm install into the Quick Start in README.md.

It is a nice idea from @tsamaya !
We can't try it yet but should use it.

assets/style.css and Map Effect No.11-14

• between "Meiryo" and Helvetica

html, body, #map {
  height: 600px;
  font-family: "Avenir LT W01 35 Light", "Century Gothic", "Meiryo" Helvetica, Arial, sans-serif;
}

It is the homage to the Mapbox site.
This sweet tip apply a variety of web site to integrate a map:bulb:

Leaflet library on cdn.leafletjs.com is not supported HTTPS.
Every example standardized by cdnjs.cloudflare.com to support it.

Old

<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

New

<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>