Commit 55e5bdef authored by Joris's avatar Joris

Upgrade npm dependencies

parent bbf38306
Pipeline #78479586 failed with stage
in 2 minutes and 4 seconds
......@@ -3,16 +3,43 @@
Show marks on a map from any given CSV file. See [live
application](http://guyonvarch.gitlab.io/mapMarks/).
## Dependencies
- papaparse
- leaflet
## Example CSV file
See [public/example.csv](public/example.csv).
## Getting started
## Columns
- **name**: Mark name
- **lat**: Mark latitude
- **lng**: Mark longitude
- **icon**: [Font awesome icon](https://fontawesome.com/icons?d=gallery&m=free)
- **color**:
- beige
- black
- blue
- cadetblue
- darkblue
- darkgreen
- darkpurple
- darkred
- gray
- green
- lightblue
- lightgray
- lightgreen
- lightred
- orange
- pink
- purple
- red
- white
- **diameter**: Diameter of the zone
- **infos**: Mark informations
- **link**: Link on popup
Other columns will appear in the popup as a description list.
## Dev server
```bash
npm install
......
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "map-marks",
"dependencies": {
"papaparse": "4.1.2",
"immupdate": "0.2.2"
"immupdate": "^1.3.0",
"papaparse": "^5.0.2"
},
"devDependencies": {
"browserify": "13.0.1",
"watchify": "3.7.0",
"babelify": "7.3.0",
"babel-preset-es2015": "6.9.0",
"http-server": "0.9.0"
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babelify": "^10.0.0",
"browserify": "^16.5.0",
"http-server": "^0.11.1",
"watchify": "^3.11.1"
},
"scripts": {
"start": "npm run server & npm run watch",
"server": "http-server ./public -p 8080 --silent",
"watch": "watchify src/main.js -o public/main.js -dv -t [ babelify --presets es2015 ]",
"build": "browserify src/main.js -o public/main.js -t [ babelify --presets [ es2015 ] ]"
"watch": "watchify src/main.js -o public/main.js -dv -t [ babelify --presets [ @babel/preset-env ] ]",
"build": "browserify src/main.js -o public/main.js -t [ babelify --presets [ @babel/preset-env ] ]"
}
}
......@@ -4,12 +4,19 @@
<title>Map Marks</title>
<meta charset="utf-8">
<link rel="icon" href="images/icon.png">
<link rel="stylesheet" href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" />
<link rel="stylesheet" href="leaflet.awesome-markers.css">
<link rel="stylesheet" href="main.css">
<script src="https://use.fontawesome.com/163f0a6410.js"></script>
<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>
<script src="leaflet.awesome-markers.min.js"></script>
<!-- Font awesome -->
<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<!-- Leaflet Awesome Markers -->
<link rel="stylesheet" href="leaflet.awesome-markers/style.css">
<script src="leaflet.awesome-markers/script.js"></script>
</head>
<body>
<h1>Map Marks</h1>
......
/*
Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
(c) 2012-2013, Lennard Voogdt
http://leafletjs.com
https://github.com/lvoogdt
*//*global L*/(function(e,t,n){"use strict";L.AwesomeMarkers={};L.AwesomeMarkers.version="2.0.1";L.AwesomeMarkers.Icon=L.Icon.extend({options:{iconSize:[35,45],iconAnchor:[17,42],popupAnchor:[1,-32],shadowAnchor:[10,12],shadowSize:[36,16],className:"awesome-marker",prefix:"glyphicon",spinClass:"fa-spin",icon:"home",markerColor:"blue",iconColor:"white"},initialize:function(e){e=L.Util.setOptions(this,e)},createIcon:function(){var e=t.createElement("div"),n=this.options;n.icon&&(e.innerHTML=this._createInner());n.bgPos&&(e.style.backgroundPosition=-n.bgPos.x+"px "+ -n.bgPos.y+"px");this._setIconStyles(e,"icon-"+n.markerColor);return e},_createInner:function(){var e,t="",n="",r="",i=this.options;i.icon.slice(0,i.prefix.length+1)===i.prefix+"-"?e=i.icon:e=i.prefix+"-"+i.icon;i.spin&&typeof i.spinClass=="string"&&(t=i.spinClass);i.iconColor&&(i.iconColor==="white"||i.iconColor==="black"?n="icon-"+i.iconColor:r="style='color: "+i.iconColor+"' ");return"<i "+r+"class='"+i.prefix+" "+e+" "+t+" "+n+"'></i>"},_setIconStyles:function(e,t){var n=this.options,r=L.point(n[t==="shadow"?"shadowSize":"iconSize"]),i;t==="shadow"?i=L.point(n.shadowAnchor||n.iconAnchor):i=L.point(n.iconAnchor);!i&&r&&(i=r.divideBy(2,!0));e.className="awesome-marker-"+t+" "+n.className;if(i){e.style.marginLeft=-i.x+"px";e.style.marginTop=-i.y+"px"}if(r){e.style.width=r.x+"px";e.style.height=r.y+"px"}},createShadow:function(){var e=t.createElement("div");this._setIconStyles(e,"shadow");return e}});L.AwesomeMarkers.icon=function(e){return new L.AwesomeMarkers.Icon(e)}})(this,document);
......@@ -27,7 +27,7 @@ Version: 1.0
(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
.awesome-marker {
background-image: url('images/markers-soft@2x.png');
background-size: 720px 46px;
background-size: 720px 92px;
}
.awesome-marker-shadow {
background-image: url('images/markers-shadow@2x.png');
......@@ -122,3 +122,7 @@ Version: 1.0
.awesome-marker-icon-black {
background-position: -682px 0;
}
.awesome-marker-square {
background-position-y: -46px;
}
import * as Papa from 'papaparse'
import update, { DELETE, updateKey } from 'immupdate'
import { update, DELETE } from 'immupdate'
import * as Functional from './functional'
import * as Dom from './dom'
import * as functional from './functional'
export const requiredKeys = ['lat', 'lng']
......@@ -14,7 +13,10 @@ export function failureMessage(mark) {
export function parseAddresses(text) {
const parsed = Papa.parse(text, { header: true, skipEmptyLines: true })
const marks = parsed.data.map(cleanMark)
console.log(parsed)
console.log(marks)
return {
csvSuccess: marks.filter(isValid),
csvFailures: marks.filter(isNotValid)
......@@ -35,8 +37,8 @@ function hasRequiredKeys(mark) {
}
function cleanMark(mark) {
return Functional.foldLeft(Object.keys(mark), mark, (m, key) => {
return updateKey(m, key, trimOrDelete(m[key]))
return functional.foldLeft(Object.keys(mark), mark, (m, key) => {
return update(m, { [key]: trimOrDelete(m[key]) })
})
}
......
import * as Dom from './dom'
import * as dom from './dom'
const body = document.getElementById('body')
......@@ -17,14 +17,14 @@ export function clean() {
}
function errorsNode(errors) {
return Dom.div('errors', [
Dom.div('curtain'),
Dom.div('list', errors.map(errorNode))
return dom.div('errors', [
dom.div('curtain'),
dom.div('list', errors.map(errorNode))
])
}
function errorNode(error) {
return Dom.div('error', [
Dom.text(error)
return dom.div('error', [
dom.text(error)
])
}
import * as Map from './map'
import * as CSV from './csv'
import * as Error from './error'
import * as map from './map'
import * as csv from './csv'
import * as error from './error'
const input = document.getElementById('input')
input.addEventListener('change', event => {
showLoader(true)
Error.clean()
error.clean()
const reader = new FileReader()
reader.onload = () => {
const { csvSuccess, csvFailures } = CSV.parseAddresses(reader.result)
const csvErrors = csvFailures.map(CSV.failureMessage)
const { csvSuccess, csvFailures } = csv.parseAddresses(reader.result)
const csvErrors = csvFailures.map(csv.failureMessage)
if(csvSuccess.length > 0) {
showLoader(false, csvErrors.length > 0 ? 'orange' : 'green')
Map.show(csvSuccess, 8)
map.show(csvSuccess)
if (csvErrors.lengh > 0) Error.show(csvErrors)
if (csvErrors.lengh > 0) error.show(csvErrors)
} else {
showLoader(false, 'red')
Error.show(csvErrors)
error.show(csvErrors)
}
}
......
import * as Array from './array'
import * as array from './array'
const defaultMarkerColor = 'red'
const defaultCircleColor = 'yellow'
export function show(addresses, zoom) {
export function show(addresses) {
if(addresses.length > 0) {
const { lat, lng } = addresses[0]
document.getElementById('map').innerHTML = '<div id="mapContent"></div>'
const map = L.map('mapContent')
map.setView([lat, lng], zoom)
map.setView([lat, lng], 1)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Test'
}).addTo(map)
const marks = addresses.map(getMark)
map.fitBounds(new L.featureGroup(marks).getBounds().pad(0.5))
map.fitBounds(new L.featureGroup(marks).getBounds())
marks.forEach(marker => marker.addTo(map))
}
}
......@@ -72,7 +72,7 @@ function getDescription(mark) {
function getInfos(mark) {
const keys = ['name', 'lat', 'lng', 'icon', 'color', 'diameter', 'infos', 'link']
const additionalKeys = Array.minus(Object.keys(mark), keys)
const additionalKeys = array.minus(Object.keys(mark), keys)
const { infos } = mark
const additionalInfos = additionalKeys
? additionalKeys.map(key => `<u>${key}</u> ${mark[key]}`).join('<br>')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment