Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -10,7 +10,24 @@
</head>
<body>
<div class="content">
<div id="mapOne"></div>
<div class="container">
<div class="map-container">
<select name="select" class="select">
<option value="value1">Temp</option>
<option value="value2" selected>Temp2</option>
<option value="value3">Temp3</option>
</select>
<iframe class='iframe' id="mapOne" frameBorder="0"></iframe>
</div>
<div class="map-container">
<select name="select" class="select">
<option value="value1">Temp</option>
<option value="value2" selected>Temp2</option>
<option value="value3">Temp3</option>
</select>
<iframe class='iframe' id="mapTwo" frameBorder="0"></iframe>
</div>
</div>
</div>
<script src="//use.typekit.net/snz3cyj.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
@@ -33,7 +33,9 @@
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"express": "^4.13.4",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.2"
}
}
@@ -12,6 +12,7 @@ app.get('/', function(req, res) {
app.use(express.static('dist'))
app.use(express.static('data'))
app.use(express.static('node_modules/leaflet/dist/'))
app.use('assets', express.static('assets'))

const PORT = settings.PORT
const HOSTNAME = settings.HOSTNAME
@@ -1,14 +1,15 @@
import {last} from 'lodash/fp'
import {map, tileLayer, latLng, latLngBounds, CRS, geoJson} from 'leaflet'
import {last, get, map, reverse, flow} from 'lodash/fp'
import {map as leafletMap, polygon, tileLayer, latLng, latLngBounds, CRS, geoJson} from 'leaflet'

import {fetchJson} from './api'
import {addPolygon} from './utils'
import './style.css'

const southWest = latLng(-90, -180)
/* const southWest = latLng(-90, -180)
const northEast = latLng(90, 180)
const bounds = latLngBounds(southWest, northEast)
const mapOne = map('mapOne', {
const mapOne = leafletMap('mapOne', {
center:[40.72, -74],
zoom: 9,
maxBounds: bounds,
@@ -27,6 +28,18 @@ const tileLayerOne = tileLayer(
).addTo(mapOne);
fetchJson('just_manhattan.json').then(json => {
const geoJsonOne = geoJson(json).addTo(mapOne)
geoJsonOne.setStyle(feature => feature.properties.style)
const polygonsOne = map(
get(['geometry', 'coordinates', 0]),
get(['features'], json))
const polygons = map(flow(
get(['geometry', 'coordinates', 0]),
map(reverse)
), get(['features'], json))
map(polygon => addPolygon(polygon, mapOne), polygons)
// const geoJsonOne = geoJson(json).addTo(mapOne)
// geoJsonOne.setStyle(feature => feature.properties.style)
})
*/

document.getElementById('mapOne').src = 'test_nums.html'
document.getElementById('mapTwo').src = 'test_nums.html'
@@ -1,6 +1,7 @@
html, body, .content {
height: 100%;
width: 100%;
margin: 0;
}

body {
@@ -9,12 +10,40 @@ body {
}

.content {
background-color: #fafafa;
display: flex;
justify-content: center;
align-items: center;
}

#mapOne {
.container {
background-color: #fff;
height: 700px;
width: 1300px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.map-container {
display: flex;
flex-direction: column;
align-items: center;
}

.map-container:not(:last-child) {
margin-right: 100px;
}

.iframe {
height: 500px;
width: 500px;
}

.select {
font-size: 100px;
height: 100px;
margin-bottom: 30px;
width: 200px;
}
@@ -0,0 +1,5 @@
import {polygon} from 'leaflet'

export const addPolygon = (ptArray, map) => {
polygon(ptArray).addTo(map)
}
@@ -17,7 +17,11 @@ module.exports = {
{
test: /\.css$/,
loader: 'style-loader!css-loader',
}
},
{
test: /\.(ttf|eot|png|jpg|gif|svg|woff2?)/,
loader: 'url?limit=5000',
},
]
}
};