schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 08:35:25 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into property-groups-reorder

Browse source
This commit is contained in:
Helge Fahrnberger 2017-01-12 18:14:25 +01:00
commit 5e3b2dd0df
21 changed files with 185 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.travis.yml
View file

@ -18,4 +18,5 @@ script:
- mkdir public
- node --stack_size=100000 $(which npm) run build
- npm run lint
- npm run lint-styles
- npm run test

38
package.json
View file

@ -9,7 +9,8 @@
"test": "karma start --single-run",
"test-watch": "karma start",
"start": "webpack-dev-server --progress --profile --colors --watch-poll",
"lint": "eslint --ext js --ext jsx {src,test}"
"lint": "eslint --ext js --ext jsx {src,test}",
"lint-styles": "stylelint 'src/styles/*.scss'"
},
"repository": {
"type": "git",
@ -27,12 +28,11 @@
"lodash.clonedeep": "^4.5.0",
"lodash.isequal": "^4.4.0",
"lodash.throttle": "^4.1.1",
"lodash.topairs": "^4.3.0",
"mapbox-gl": "^0.29.0",
"mapbox-gl-inspect": "^1.0.9",
"mapbox-gl": "^0.31.0",
"mapbox-gl-inspect": "^1.1.1",
"mapbox-gl-style-spec": "^8.11.0",
"mousetrap": "^1.6.0",
"ol-mapbox-style": "0.0.14",
"ol-mapbox-style": "1.0.1",
"openlayers": "^3.19.1",
"randomcolor": "^0.4.4",
"react": "^15.4.0",
@ -64,6 +64,9 @@
"jshintConfig": {
"esversion": 6
},
"stylelint": {
"extends": "stylelint-config-standard"
},
"eslintConfig": {
"plugins": [
"react"
@ -88,18 +91,18 @@
}
},
"devDependencies": {
"babel-core": "6.14.0",
"babel-eslint": "^6.1.2",
"babel-loader": "6.2.4",
"babel-core": "6.21.0",
"babel-eslint": "^7.1.1",
"babel-loader": "6.2.10",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-flow-strip-types": "^6.21.0",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "6.14.0",
"babel-preset-react": "6.11.1",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babel-runtime": "^6.11.6",
"css-loader": "0.25.0",
"css-loader": "0.26.1",
"eslint": "^3.5.0",
"eslint-plugin-react": "^6.2.0",
"extract-text-webpack-plugin": "^1.0.1",
@ -110,18 +113,19 @@
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.3.0",
"karma-webpack": "^1.8.0",
"karma-webpack": "^2.0.1",
"mocha": "^3.1.2",
"mocha-loader": "^1.0.0",
"node-sass": "^3.9.2",
"node-sass": "^4.2.0",
"react-hot-loader": "^3.0.0-beta.6",
"sass-loader": "^4.0.1",
"style-loader": "0.13.1",
"stylelint": "^7.7.1",
"stylelint-config-standard": "^15.0.1",
"transform-loader": "^0.2.3",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-cleanup-plugin": "^0.3.0",
"webpack-dev-server": "1.15.1",
"webworkify-webpack": "^1.1.3"
"webpack": "1.14.0",
"webpack-cleanup-plugin": "^0.4.1",
"webpack-dev-server": "1.16.2"
}
}

2
src/components/modals/AddModal.jsx
View file

@ -31,7 +31,7 @@ class AddModal extends React.Component {
if(this.state.type !== 'background') {
layer.source = this.state.source
if(this.state.type !== 'raster') {
if(this.state.type !== 'raster' && this.state['source-layer']) {
layer['source-layer'] = this.state['source-layer']
}
}

15
src/config/empty-style.json Normal file
View file

@ -0,0 +1,15 @@
{
"version": 8,
"name": "Empty Style",
"metadata": {
"mapbox:autocomposite": false,
"mapbox:type": "template",
"maputnik:renderer": "mbgljs",
"openmaptiles:version": "3.x"
},
"sources": { },
"glyphs": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf",
"sprites": "https://demo.tileserver.org/fonts/{fontstack}/{range}.pbf",
"layers": [],
"id": "empty-style"
}

8
src/config/styles.json
View file

@ -30,9 +30,9 @@
"thumbnail": "https://cdn.rawgit.com/lukasmartinelli/osm-liberty/gh-pages/thumbnail.png"
},
{
"id": "fiord-color",
"title": "Fiord Color",
"url": "https://rawgit.com/openmaptiles/fiord-color-gl-style/gh-pages/style-cdn.json",
"thumbnail": "https://camo.githubusercontent.com/d884dbd7b8c531c58788eac3857dc4ebf79b7729/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f6369776775693378353030317732706e7668633063327767302f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
"id": "empty-style",
"title": "Empty Style",
"url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
"thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
}
]

15
src/config/tilesets.json
View file

@ -4,6 +4,11 @@
"url": "mapbox://mapbox.mapbox-streets-v7",
"title": "Mapbox Streets"
},
"openmaptiles": {
"type": "vector",
"url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
"title": "OpenMapTiles"
},
"tilezen": {
"type": "vector",
"tiles": [
@ -12,15 +17,5 @@
"minZoom": 0,
"maxZoom": 15,
"title": "Mapzen Vector Tile Service"
},
"openmaptiles": {
"type": "vector",
"url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
"title": "OpenMapTiles CDN"
},
"naturalearth-airports": {
"type": "geojson",
"data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson",
"title": "NaturalEarth Airports GeoJSON"
}
}

9
src/styles/_base.scss
View file

@ -18,7 +18,9 @@ html {
box-sizing: border-box;
}
*, *:before, *:after {
*,
*::before,
*::after {
box-sizing: inherit;
}
@ -53,7 +55,8 @@ h4 {
margin-bottom: $margin-3;
}
input:focus, select:focus {
input:focus,
select:focus {
color: $color-white !important;
outline: #8e8e8e auto 1px !important;
}
@ -63,7 +66,7 @@ label:hover {
}
.clearfix {
&:after {
&::after {
content: "";
display: table;
clear: both;

22
src/styles/_components.scss
View file

@ -2,9 +2,9 @@
.maputnik-map {
position: fixed !important;
top: 40px;
right: 0px;
bottom: 0px;
height: 100%;
right: 0;
bottom: 0;
height: calc(100% - $toolbar-height);
width: 75%;
}
@ -14,7 +14,7 @@
cursor: help;
}
&-wrapper{
&-wrapper {
display: inline-block;
box-sizing: border-box;
font-size: $font-size-6;
@ -32,7 +32,7 @@
font-size: 10px;
position: absolute;
top: 20px;
left: 0px;
left: 0;
width: 120px;
z-index: 3;
}
@ -68,11 +68,15 @@
.maputnik-icon-button {
background-color: transparent;
&:hover {
background-color: transparent;
label, svg {
label,
svg {
cursor: pointer;
}
svg {
fill: $color-white;
}
@ -102,6 +106,7 @@
display: inline-block;
width: 43%;
}
.maputnik-input-block-action {
vertical-align: top;
display: inline-block;
@ -111,15 +116,14 @@
// SPACE HELPER
.maputnik-space {
flex-grow: 1;
@include vendor-prefix(flex-grow, 1);
}
// MESSAGE PANEL
.maputnik-message-panel {
padding: $margin-2;
&-error {
&-error {
color: $color-red;
}
}

9
src/styles/_filtereditor.scss
View file

@ -2,6 +2,10 @@
padding: $margin-3;
}
.maputnik-filter-editor {
color: $color-lowgray;
}
.maputnik-filter-editor-property {
display: inline-block;
width: '22%';
@ -54,6 +58,7 @@
margin-top: $margin-2;
margin-bottom: $margin-2;
}
.maputnik-filter-editor-block-action {
display: inline-block;
width: 6%;
@ -73,6 +78,7 @@
.maputnik-filter-editor-operator {
display: inline-block;
width: 17%;
.maputnik-select {
width: 100%;
}
@ -82,7 +88,8 @@
display: inline-block;
width: 54%;
.maputnik-string, .maputnik-number {
.maputnik-string,
.maputnik-number {
width: 100%;
}
}

13
src/styles/_input.scss
View file

@ -24,20 +24,15 @@
//COLOR PICKER
.maputnik-color {
@extend .maputnik-input;
height: 26px;
}
.maputnik-color-wrapper {
position: relative;
display: inline;
}
.maputnik-color-picker-offset {
}
.maputnik-color-picker-overlay {
}
// ARRAY
.maputnik-array {
@ -49,6 +44,7 @@
// SELECT
.maputnik-select {
@extend .maputnik-input;
height: 24px;
}
@ -76,6 +72,7 @@
&-wrapper {
@extend .maputnik-input;
padding-left: 0;
padding-right: 0;
position: relative;
@ -116,7 +113,7 @@
overflow: auto;
max-height: 50%;
background: $color-gray;
z-index: 3,
z-index: 3;
}
&-menu-item {

43
src/styles/_layer.scss
View file

@ -1,13 +1,9 @@
// LAYER LIST
.maputnik-add-layer {
}
.maputnik-layer-list {
&-header{
&-header {
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
> * {
vertical-align: middle;
@ -32,7 +28,7 @@
font-weight: 400;
color: $color-lowgray;
font-size: $font-size-6;
border-width: 0px 0px 1px;
border-width: 0 0 1px;
border-style: solid;
border-color: lighten($color-black, 0.1);
user-select: none;
@ -43,24 +39,24 @@
padding: 5px 10px;
line-height: 1.3;
max-height: 50px;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row);
opacity: 1;
opacity: 1;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
@include flex-row;
}
&-icon-action svg {
fill: $color-black;
}
.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
.maputnik-layer-list-item:hover,
.maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2);
.maputnik-layer-list-icon-action svg {
fill: darken($color-lowgray, 0.5);
&:hover {
fill: $color-white;
}
@ -73,9 +69,9 @@
&-item-collapsed {
position: absolute;
max-height: 0px;
max-height: 0;
overflow: hidden;
padding: 0px;
padding: 0;
opacity: 0;
visibility: hidden;
}
@ -91,10 +87,6 @@
text-overflow: ellipsis;
}
&-group {
//border-bottom: 2px solid $color-gray;
}
&-group-header {
font-size: $font-size-6;
color: $color-lowgray;
@ -102,9 +94,8 @@
cursor: pointer;
user-select: none;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
svg {
width: 14px;
@ -121,7 +112,6 @@
}
}
// FILTER EDITOR
.maputnik-layer-editor-group {
font-weight: bold;
@ -131,11 +121,10 @@
cursor: pointer;
user-select: none;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
line-height: 20px;
@include flex-row;
&:hover {
background-color: $color-gray;
}

20
src/styles/_layout.scss
View file

@ -2,9 +2,9 @@
.maputnik-scroll-container {
overflow-x: visible;
overflow-y: scroll;
bottom: 0px;
left: 0px;
right: 0px;
bottom: 0;
left: 0;
right: 0;
top: 1px;
position: absolute;
}
@ -16,29 +16,31 @@
&-list {
position: fixed;
bottom: 0px;
height: 100%;
bottom: 0;
height: calc(100% - $toolbar-height);
top: 40px;
left: 0px;
left: 0;
z-index: 3;
width: 200px;
overflow: hidden;
background-color: $color-black;
}
&-drawer {
position: fixed;
bottom: 0px;
height: 100%;
bottom: 0;
height: calc(100% - $toolbar-height);
top: 40px;
left: 200px;
z-index: 1;
width: 350px;
background-color: $color-black;
}
&-bottom {
position: fixed;
height: 50px;
bottom: 0px;
bottom: 0;
left: 550px;
z-index: 1;
width: 100%;

7
src/styles/_mixins.scss
View file

@ -5,3 +5,10 @@
-o-#{$name}: #{$argument};
#{$name}: #{$argument};
}
@mixin flex-row {
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row);
}

96
src/styles/_modal.scss
View file

@ -3,20 +3,22 @@
min-width: 350px;
max-width: 600px;
background-color: $color-black;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
z-index: 3;
}
.maputnik-modal-section {
padding-top: $margin-3;
padding-bottom: $margin-3;
}
.maputnik-modal-header {
background-color: $color-gray;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
padding: $margin-3;
@include flex-row;
}
.maputnik-modal-header-title {
font-size: $font-size-5;
margin: 0;
@ -25,6 +27,7 @@
.maputnik-modal-header-toggle {
cursor: pointer;
}
.maputnik-modal-content {
padding: $margin-3;
}
@ -35,33 +38,33 @@
//OVERLAY
.maputnik-overlay-viewport {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 2;
opacity: 0.875;
background-color: rgb(28, 31, 36);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
opacity: 0.875;
background-color: rgb(28, 31, 36);
}
.maputnik-overlay {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
position: fixed;
display: -ms-flexbox;
display: flex;
@include vendor-prefix(flex-direction, column)
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
align-items: center;
justify-content: center;
@include flex-row;
}
//OPEN MODAL
.maputnik-upload-button {
@extend .maputnik-big-button;
}
.maputnik-public-style {
vertical-align: top;
margin-top: 10px;
@ -72,6 +75,7 @@
font-size: $font-size-2;
color: $color-lowgray;
}
.maputnik-public-style-button {
background-color: $color-gray;
padding: $margin-3;
@ -81,50 +85,50 @@
background-color: $color-midgray;
}
}
.maputnik-public-style-header {
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
}
.maputnik-public-style-thumbnail {
display: block;
margin-top: $margin-2;
max-width: 100%;
width: 100%;
}
.maputnik-add-layer{
.maputnik-add-layer {
@extend .clearfix;
}
//ADD MODAL
.maputnik-add-layer-button {
@extend .maputnik-big-button;
margin-right: $margin-3;
float: right;
display: inline-block;
margin-top: 3;
margin-bottom: $margin-3;
text-align: right;
@extend .maputnik-big-button;
}
//SOURCE MODAL
.maputnik-public-source {
vertical-align: top;
margin-top: 1.5%;
margin-right: 1.5%;
background-color: $color-gray;
width: 48.5%;
vertical-align: top;
margin-top: 1.5%;
margin-right: 1.5%;
background-color: $color-gray;
width: 48.5%;
display: inline-block;
}
.maputnik-public-source-select {
padding: $margin-3;
font-size: $font-size-5;
color: $color-lowgray;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
font-size: $font-size-5;
color: $color-lowgray;
background-color: transparent;
@include flex-row;
}
.maputnik-public-source-name {
@ -138,14 +142,15 @@
.maputnik-active-source-type-editor {
min-width: 500px;
}
.maputnik-active-source-type-editor-header {
background-color: $color-gray;
color: $color-lowgray;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
}
.maputnik-active-source-type-editor-header-id {
font-weight: 700;
line-height: 2;
@ -153,10 +158,10 @@
}
.maputnik-active-source-type-editor-content {
border-color: $color-gray;
border-width: 2px;
border-style: solid;
padding: $margin-2;
border-color: $color-gray;
border-width: 2px;
border-style: solid;
padding: $margin-2;
}
.maputnik-add-source {
@ -165,6 +170,7 @@
.maputnik-add-source-button {
@extend .maputnik-big-button;
display: inline-block;
margin-top: 0;
margin-right: $margin-3;

12
src/styles/_popup.scss
View file

@ -1,12 +1,11 @@
.maputnik-popup-layer {
display: inline-block;
display: block;
color: $color-lowgray;
user-select: none;
padding-left: 0;
padding-right: $margin-1;
line-height: 1.2;
padding-left: $margin-2;
padding-right: $margin-2;
padding: $margin-2;
padding-top: $margin-1;
padding-bottom: $margin-1;
}
.maputnik-popup-layer-id {
@ -16,9 +15,6 @@
color: $color-white;
}
.maputnik-property-layer-popup {
}
.maputnik-feature-property-popup {
.maputnik-input-block {
margin: 0;

1
src/styles/_reset.scss
View file

@ -1,3 +1,4 @@
/* stylelint-disable */
html {
background-color: rgb(28, 31, 36);
}

14
src/styles/_scrollbar.scss
View file

@ -1,12 +1,12 @@
::-webkit-scrollbar {
background-color: #26282e;
width: 5px;
background-color: #26282e;
width: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #666;
padding-left: 2px;
padding-right: 2px;
border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #666;
padding-left: 2px;
padding-right: 2px;
}

3
src/styles/_toolbar.scss
View file

@ -17,7 +17,7 @@
height: $toolbar-height;
h1 {
display: inline;
display: inline;
}
img {
@ -37,6 +37,7 @@
cursor: pointer;
color: $color-white;
text-decoration: none;
&:hover {
background-color: $color-midgray;
}

9
src/styles/_zoomproperty.scss
View file

@ -2,9 +2,10 @@
.maputnik-make-zoom-function {
background-color: transparent;
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
padding-bottom: 0;
padding-top: 0;
vertical-align: middle;
@extend .maputnik-icon-button;
}
@ -28,6 +29,7 @@
vertical-align: top;
width: 16%;
margin-right: 3%;
> * {
width: 100%;
}
@ -36,6 +38,7 @@
.maputnik-zoom-spec-property-stop-value {
display: inline-block;
width: 81%;
> * {
width: 100%;
}
@ -43,11 +46,13 @@
.maputnik-delete-stop {
@extend .maputnik-icon-button;
vertical-align: top;
.maputnik-doc-wrapper {
width: auto;
}
.maputnik-doc-target {
cursor: pointer;
}

1
src/styles/index.scss
View file

@ -22,7 +22,6 @@ $toolbar-height: 40px;
@import 'mixins';
@import 'reset';
@import 'base';
@import 'components';
@import 'scrollbar';
@import 'picker';

1
webpack.production.config.js
View file

@ -17,7 +17,6 @@ module.exports = {
"randomcolor",
"lodash.clonedeep",
"lodash.throttle",
"lodash.topairs",
'color',
'react',
"react-dom",