From 797b10edaf276305c2b64b25a564c4bdea21f555 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 16 Dec 2018 13:40:28 +0100 Subject: datasetsss --- client/map/index.js | 136 +++++++++++++++++++++++++--------------------------- 1 file changed, 64 insertions(+), 72 deletions(-) (limited to 'client') diff --git a/client/map/index.js b/client/map/index.js index b28abdea..d869ca33 100644 --- a/client/map/index.js +++ b/client/map/index.js @@ -1,82 +1,74 @@ import L from 'leaflet' // import Snap from './snap.svg-min' -let map = L.map('mapid').setView([25, 0], 2) -L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { - attribution: 'Map data © OpenStreetMap contributors,' + - 'CC-BY-SA,' + - 'Imagery © Mapbox', - maxZoom: 18, - id: 'mapbox.dark', - style: 'mapbox://styles/mapbox/dark-v9', - accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg' -}).addTo(map) -let points = read_json('citations') -let address = read_json('address') -let source = [0,0] -if (address) { - source = address.slice(3,5).map(n => parseFloat(n)) - console.log(address, source) -} +function build() { + let map = L.map('mapid').setView([25, 0], 2) + L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { + attribution: 'Map data © OpenStreetMap contributors,' + + 'CC-BY-SA,' + + 'Imagery © Mapbox', + maxZoom: 18, + id: 'mapbox.dark', + style: 'mapbox://styles/mapbox/dark-v9', + accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg' + }).addTo(map) + + let points = read_json('citations') + let address = read_json('address') + let source = [0, 0] + if (address) { + source = address.slice(3, 5).map(n => parseFloat(n)) + console.log(address, source) + } -var redDot = L.icon({ - iconUrl: '../reddot.png', - iconSize: [17, 17], // size of the icon - iconAnchor: [8, 8], // point of the icon which will correspond to marker's location - popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor -}); + let redDot = L.icon({ + iconUrl: '../reddot.png', + iconSize: [17, 17], // size of the icon + iconAnchor: [8, 8], // point of the icon which will correspond to marker's location + popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor + }) -points.forEach(point => { - /* - [ - "Face Alignment by Local Deep Descriptor Regression", - "Rutgers University", - [ - "Rutgers University", - "40.47913175", - "-74.431688684404", - "Rutgers Cook Campus - North, Biel Road, New Brunswick, Middlesex County, New Jersey, 08901, USA" + points.forEach(point => { + const latlng = point.slice(5, 7).map(n => parseFloat(n)) + if (!latlng.length || isNaN(latlng[0]) || isNaN(latlng[1])) return + const marker = L.marker(latlng, { icon: redDot }).addTo(map) + marker.bindPopup([ + "", point[0], "", + "
", + point[1], + ].join('')) + // var arcStyle = { + // color: 'rgb(245, 246, 150)', + // fillColor: 'rgb(245, 246, 150)', + // opacity: 0.8, + // weight: '1', + // vertices: 100, + // } + // L.Polyline.Arc(source, latlng, arcStyle).addTo(map); + // console.log(latlng) + const pathStyle = { + color: 'rgb(245, 246, 150)', + fillColor: 'rgb(245, 246, 150)', + opacity: 0.8, + weight: '1', + } + L.bezier({ + path: [ + [ + { lat: source[0], lng: source[1] }, + { lat: latlng[0], lng: latlng[1] }, + ], ] - ] - */ + }, pathStyle).addTo(map) + }) - const latlng = point.slice(5,7).map(n => parseFloat(n)) - // console.log(point) - if (!latlng.length || isNaN(latlng[0]) || isNaN(latlng[1])) return - var marker = L.marker(latlng, { icon: redDot }).addTo(map); + var marker = L.marker(source, { icon: redDot }).addTo(map); marker.bindPopup([ - "", point[0], "", - "
", - point[1], + "", document.querySelector('h2').innerText, "", + '
', + address[0] ].join('')) - // var arcStyle = { - // color: 'rgb(245, 246, 150)', - // fillColor: 'rgb(245, 246, 150)', - // opacity: 0.8, - // weight: '1', - // vertices: 100, - // } - // L.Polyline.Arc(source, latlng, arcStyle).addTo(map); - // console.log(latlng) - var pathStyle = { - color: 'rgb(245, 246, 150)', - fillColor: 'rgb(245, 246, 150)', - opacity: 0.8, - weight: '1', - } - L.bezier({ - path: [ - [ - {lat: source[0], lng: source[1]}, - {lat: latlng[0], lng: latlng[1]}, - ], - ] - }, pathStyle).addTo(map) -}) -var marker = L.marker(source, { icon: redDot }).addTo(map); -marker.bindPopup([ - "", document.querySelector('h2').innerText, "", - '
', - address[0] -].join('')) +} + +export default build -- cgit v1.2.3-70-g09d2