├── .gitignore ├── index.html ├── README.md ├── package.json └── src ├── index.js └── map.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *.swp 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | choo-leaflet-demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # choo leaflet demo 2 | 3 | Illustrates how to use [leaflet](http://leafletjs.com) in the 4 | [choo framework](https://github.com/yoshuawuyts/choo) via 5 | [cache-element](https://github.com/yoshuawuyts/cache-element). 6 | The [demo](http://choo-leaflet-demo.surge.sh) shows a reducer 7 | that updates the `title` part of the state without affecting 8 | or re-rendering the map, as well as a reducer that updates the 9 | `coords` which causes the map to pan to a new location. 10 | 11 | ## install 12 | ```bash 13 | npm install 14 | ``` 15 | 16 | ## usage 17 | ```bash 18 | npm start 19 | ``` 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "choo-leaflet-demo", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "map.js", 6 | "scripts": { 7 | "start": "budo src/index.js:dist/bundle.js --live --open", 8 | "build": "mkdir -p dist && browserify src/index.js -o dist/bundle.js", 9 | "deploy": "npm run build && surge . -d choo-leaflet-demo.surge.sh" 10 | }, 11 | "keywords": [], 12 | "author": "timwis ", 13 | "license": "MIT", 14 | "dependencies": { 15 | "cache-element": "^2.0.0", 16 | "choo": "^4.0.3", 17 | "leaflet": "^1.0.1" 18 | }, 19 | "devDependencies": { 20 | "bel": "^4.5.0", 21 | "browserify": "^13.1.1", 22 | "surge": "^0.18.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const choo = require('choo') 2 | const html = require('choo/html') 3 | 4 | const Map = require('./map') 5 | 6 | const app = choo() 7 | const mapInstance = Map() 8 | 9 | app.model({ 10 | state: { 11 | title: 'Hello, world', 12 | coords: [39.9526, -75.1652] 13 | }, 14 | reducers: { 15 | setCoords: (state, data) => { 16 | return { coords: data } 17 | }, 18 | updateTitle: (state, data) => { 19 | return { title: data } 20 | } 21 | } 22 | }) 23 | 24 | const View = (state, prev, send) => { 25 | return html` 26 |

27 |

${state.title}

28 |

29 | 30 | 31 | ${mapInstance(state.coords)} 32 |

33 | ` 34 | function updateTitle (evt) { 35 | send('updateTitle', evt.target.value) 36 | } 37 | function toPhiladelphia () { 38 | send('setCoords', [39.9526, -75.1652]) 39 | } 40 | function toSeattle () { 41 | send('setCoords', [47.6062, -122.3321]) 42 | } 43 | } 44 | 45 | app.router([ 46 | ['/', View] 47 | ]) 48 | 49 | const tree = app.start() 50 | document.body.appendChild(tree) 51 | -------------------------------------------------------------------------------- /src/map.js: -------------------------------------------------------------------------------- 1 | const html = require('choo/html') 2 | const widget = require('cache-element/widget') 3 | const L = require('leaflet') 4 | 5 | module.exports = () => { 6 | let map 7 | 8 | return widget({ 9 | render: (coords) => { 10 | return html` 11 |

12 |

initMap(el, coords)} 15 | onunload${removeMap}>

16 |

17 | ` 18 | }, 19 | onupdate: (el, coords) => { 20 | if (map) map.setView(coords) 21 | } 22 | }) 23 | 24 | function initMap (el, coords) { 25 | const defaultZoom = 12 26 | map = L.map(el).setView(coords, defaultZoom) 27 | 28 | L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', { 29 | attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap', 30 | subdomains: 'abcd', 31 | minZoom: 0, 32 | maxZoom: 20, 33 | ext: 'png' 34 | }).addTo(map) 35 | } 36 | 37 | function removeMap (el) { 38 | if (map) { 39 | map.remove() 40 | map = null 41 | } 42 | } 43 | } 44 | 45 | 46 | --------------------------------------------------------------------------------