{feature.layer['source-layer']}{feature.inspectModeCounter && × {feature.inspectModeCounter}}
@@ -43,7 +43,7 @@ function removeDuplicatedFeatures(features) {
if(featureIndex === -1) {
uniqueFeatures.push(feature)
} else {
- if(uniqueFeatures[featureIndex].hasOwnProperty('counter')) {
+ if(uniqueFeatures[featureIndex].hasOwnProperty('inspectModeCounter')) {
uniqueFeatures[featureIndex].inspectModeCounter++
} else {
uniqueFeatures[featureIndex].inspectModeCounter = 2
diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index f3df5ca..fb5f523 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -17,10 +17,10 @@ import '../../libs/mapbox-rtl'
const IS_SUPPORTED = MapboxGl.supported();
-function renderPropertyPopup(features) {
- var mountNode = document.createElement('div');
- ReactDOM.render(, mountNode)
- return mountNode.innerHTML;
+function renderPopup(popup, mountNode) {
+ ReactDOM.render(popup, mountNode);
+ var content = mountNode.innerHTML;
+ return content;
}
function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
@@ -77,9 +77,6 @@ export default class MapboxGlMap extends React.Component {
this.state = {
map: null,
inspect: null,
- isPopupOpen: false,
- popupX: 0,
- popupY: 0,
}
}
@@ -97,6 +94,16 @@ export default class MapboxGlMap extends React.Component {
}
}
+ shouldComponentUpdate(nextProps, nextState) {
+ let should = false;
+ try {
+ should = JSON.stringify(this.props) !== JSON.stringify(nextProps) || JSON.stringify(this.state) !== JSON.stringify(nextState);
+ } catch(e) {
+ // no biggie, carry on
+ }
+ return should;
+ }
+
componentDidUpdate(prevProps) {
if(!IS_SUPPORTED) return;
@@ -114,6 +121,7 @@ export default class MapboxGlMap extends React.Component {
if (map) {
map.showTileBoundaries = this.props.options.showTileBoundaries;
map.showCollisionBoxes = this.props.options.showCollisionBoxes;
+ map.showOverdrawInspector = this.props.options.showOverdrawInspector;
}
}
@@ -131,6 +139,7 @@ export default class MapboxGlMap extends React.Component {
map.showTileBoundaries = mapOpts.showTileBoundaries;
map.showCollisionBoxes = mapOpts.showCollisionBoxes;
+ map.showOverdrawInspector = mapOpts.showOverdrawInspector;
const zoom = new ZoomControl;
map.addControl(zoom, 'top-right');
@@ -138,6 +147,8 @@ export default class MapboxGlMap extends React.Component {
const nav = new MapboxGl.NavigationControl();
map.addControl(nav, 'top-right');
+ const tmpNode = document.createElement('div');
+
const inspect = new MapboxInspect({
popup: new MapboxGl.Popup({
closeOnClick: false
@@ -153,11 +164,9 @@ export default class MapboxGlMap extends React.Component {
buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
renderPopup: features => {
if(this.props.inspectModeEnabled) {
- return renderPropertyPopup(features)
+ return renderPopup(, tmpNode);
} else {
- var mountNode = document.createElement('div');
- ReactDOM.render(, mountNode)
- return mountNode
+ return renderPopup(, tmpNode);
}
}
})
@@ -169,6 +178,9 @@ export default class MapboxGlMap extends React.Component {
inspect,
zoom: map.getZoom()
});
+ if(this.props.inspectModeEnabled) {
+ inspect.toggleInspector();
+ }
})
map.on("data", e => {
diff --git a/src/config/styles.json b/src/config/styles.json
index 8a0dd0a..727fea8 100644
--- a/src/config/styles.json
+++ b/src/config/styles.json
@@ -2,25 +2,25 @@
{
"id": "klokantech-basic",
"title": "Klokantech Basic",
- "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.7/style.json",
+ "url": "https://cdn.jsdelivr.net/gh/openmaptiles/klokantech-basic-gl-style@v1.8/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/klokantech-basic.png"
},
{
"id": "dark-matter",
"title": "Dark Matter",
- "url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@v1.6/style.json",
+ "url": "https://cdn.jsdelivr.net/gh/openmaptiles/dark-matter-gl-style@v1.7/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/dark-matter.png"
},
{
"id": "positron",
"title": "Positron",
- "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.6/style.json",
+ "url": "https://cdn.jsdelivr.net/gh/openmaptiles/positron-gl-style@v1.7/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/positron.png"
},
{
"id": "osm-bright",
"title": "OSM Bright",
- "url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@v1.7/style.json",
+ "url": "https://cdn.jsdelivr.net/gh/openmaptiles/osm-bright-gl-style@v1.8/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/osm-bright.png"
},
{
@@ -32,7 +32,7 @@
{
"id": "empty-style",
"title": "Empty Style",
- "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@v1.5.0/src/config/empty-style.json",
+ "url": "https://cdn.jsdelivr.net/gh/maputnik/editor@9cf74ca405d2be0608b57db8109cf3a6af5b9f49/src/config/empty-style.json",
"thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
},
{
diff --git a/src/config/tilesets.json b/src/config/tilesets.json
index 3973b58..a586c10 100644
--- a/src/config/tilesets.json
+++ b/src/config/tilesets.json
@@ -1,7 +1,7 @@
{
"openmaptiles": {
"type": "vector",
- "url": "https://maps.tilehosting.com/data/v3.json?key={key}",
+ "url": "https://api.maptiler.com/tiles/v3/tiles.json?key={key}",
"title": "OpenMapTiles"
},
"thunderforest_transport": {
diff --git a/src/libs/mapbox-rtl.js b/src/libs/mapbox-rtl.js
index 84d9211..e7e5d79 100644
--- a/src/libs/mapbox-rtl.js
+++ b/src/libs/mapbox-rtl.js
@@ -3,9 +3,9 @@ import MapboxGl from 'mapbox-gl'
// Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
const data = require("raw-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
-const blob = new window.Blob([data]);
-const objectUrl = window.URL.createObjectURL(blob, {
+const blob = new window.Blob([data], {
type: "text/javascript"
});
+const objectUrl = window.URL.createObjectURL(blob);
MapboxGl.setRTLTextPlugin(objectUrl);
diff --git a/src/libs/style.js b/src/libs/style.js
index 4caa357..5f2b494 100644
--- a/src/libs/style.js
+++ b/src/libs/style.js
@@ -101,7 +101,7 @@ function replaceAccessTokens(mapStyle, opts={}) {
changedStyle = replaceSourceAccessToken(changedStyle, sourceName, opts);
})
- if (mapStyle.glyphs && mapStyle.glyphs.match(/\.tilehosting\.com/)) {
+ if (mapStyle.glyphs && (mapStyle.glyphs.match(/\.tilehosting\.com/) || mapStyle.glyphs.match(/\.maptiler\.com/))) {
const newAccessToken = getAccessToken("openmaptiles", mapStyle, opts);
if (newAccessToken) {
changedStyle = {
@@ -119,5 +119,6 @@ export default {
emptyStyle,
indexOfLayer,
generateId,
+ getAccessToken,
replaceAccessTokens,
}
diff --git a/src/libs/urlopen.js b/src/libs/urlopen.js
index 20b7aa3..885d3c3 100644
--- a/src/libs/urlopen.js
+++ b/src/libs/urlopen.js
@@ -1,4 +1,5 @@
import url from 'url'
+import querystring from 'querystring'
import style from './style.js'
export function initialStyleUrl() {
@@ -24,6 +25,23 @@ export function loadStyleUrl(styleUrl, cb) {
})
}
+export function removeStyleQuerystring() {
+ const initialUrl = url.parse(window.location.href, true)
+ let qs = querystring.parse(window.location.search.slice(1))
+ delete qs["style"]
+ if(Object.getOwnPropertyNames(qs).length === 0) {
+ qs = ""
+ } else {
+ qs = "?" + querystring.stringify(qs)
+ }
+ let newUrlHash = initialUrl.hash
+ if(newUrlHash === null) {
+ newUrlHash = ""
+ }
+ const newUrl = initialUrl.protocol + "//" + initialUrl.host + initialUrl.pathname + qs + newUrlHash
+ window.history.replaceState({}, document.title, newUrl)
+}
+
export function loadJSON(url, defaultValue, cb) {
fetch(url, {
mode: 'cors',
diff --git a/src/mapboxgl.css b/src/mapboxgl.css
index afe45f1..30ad8e8 100644
--- a/src/mapboxgl.css
+++ b/src/mapboxgl.css
@@ -14,6 +14,22 @@
border-top-color: rgb(28, 31, 36);
}
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
+ border-bottom-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+ border-bottom-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
+ border-top-color: rgb(28, 31, 36);
+}
+
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+ border-top-color: rgb(28, 31, 36);
+}
+
.mapboxgl-popup-content {
background-color: rgb(28, 31, 36);
border-radius: 0px;
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index e35f661..9e860f7 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -3,6 +3,7 @@
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
+ font-display: swap;
}
@font-face {
@@ -10,6 +11,7 @@
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
font-weight: bold;
font-style: normal;
+ font-display: swap;
}
html {
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 45af9ac..e933da4 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -24,6 +24,15 @@
padding-bottom: $margin-5;
}
+ &-item-handle {
+ flex: 1;
+ display: flex;
+
+ svg {
+ margin-right: 4px;
+ }
+ }
+
&-item {
font-weight: 400;
color: $color-lowgray;
@@ -36,7 +45,7 @@
z-index: 2000;
cursor: pointer;
position: relative;
- padding: 5px 10px;
+ padding: 5px;
line-height: 1.3;
max-height: 50px;
opacity: 1;
@@ -62,6 +71,7 @@
background: initial;
border: none;
padding: 0 2px;
+ height: 15px;
svg {
fill: darken($color-lowgray, 20);
@@ -111,6 +121,8 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ color: inherit;
+ text-decoration: none;
}
&-group-header {
@@ -160,7 +172,7 @@
// PROPERTY
.maputnik-default-property {
.maputnik-input-block-label {
- color: darken($color-lowgray, 25%);
+ color: darken($color-lowgray, 20%);
}
.maputnik-string,
@@ -169,7 +181,7 @@
.maputnik-select,
.maputnik-checkbox-wrapper {
background-color: darken($color-gray, 2%);
- color: darken($color-lowgray, 25%);
+ color: darken($color-lowgray, 20%);
}
.maputnik-make-zoom-function svg {
@@ -178,7 +190,7 @@
.maputnik-multibutton .maputnik-button {
background-color: darken($color-midgray, 10%);
- color: darken($color-lowgray, 25%);
+ color: darken($color-lowgray, 20%);
&:hover {
background-color: lighten($color-midgray, 12);
@@ -195,6 +207,11 @@
.more-menu {
position: relative;
+ svg {
+ width: 22px;
+ height: 22px;
+ }
+
&__menu {
position: absolute;
z-index: 9999;
@@ -229,3 +246,10 @@
min-width: 28px;
}
}
+
+// Clone of the element which is sorted
+.sortableHelper {
+ font-family: $font-family;
+ z-index: 9999;
+ border: none;
+}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index deada7f..d4f11f1 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -247,12 +247,13 @@
}
.maputnik-modal-survey {
- width: 372px;
+ width: 400px;
}
.maputnik-modal-survey__logo {
display: block;
margin: 0 auto;
+ height: 128px;
}
.maputnik-modal-survey__description {
diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss
index 8b2156d..aed9fe1 100644
--- a/src/styles/_scrollbar.scss
+++ b/src/styles/_scrollbar.scss
@@ -12,4 +12,8 @@ div:not(.maputnik-toolbar__actions) {
padding-left: 2px;
padding-right: 2px;
}
+
+ // Styling for Firefox
+ scrollbar-width: thin;
+ scrollbar-color: #666 #26282e;
}
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index 734c8ad..e54c1e7 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -100,10 +100,18 @@
background: inherit;
border-width: 0;
@extend .maputnik-toolbar-link;
-}
-.maputnik-toolbar-select select {
- margin-left: 4px;
+ select {
+ // HACK:
+ color: $color-black !important;
+ margin-left: 4px;
+ border-width: 0;
+
+ option {
+ // HACK:
+ color: $color-black !important;
+ }
+ }
}
.maputnik-icon-text {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d653c6c..b27341d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,7 +1,7 @@
-$color-black: #1c1f24;
-$color-gray: #26282e;
-$color-midgray: #36383e;
-$color-lowgray: #8e8e8e;
+$color-black: #191b20;
+$color-gray: #222429;
+$color-midgray: #303237;
+$color-lowgray: #a4a4a4;
$color-white: #f0f0f0;
$color-red: #cf4a4a;
$color-green: #53b972;
diff --git a/test/functional/history/index.js b/test/functional/history/index.js
index e788e7e..11cf8af 100644
--- a/test/functional/history/index.js
+++ b/test/functional/history/index.js
@@ -13,6 +13,7 @@ describe.skip("history", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
helper.modal.addLayer.open();
diff --git a/test/functional/index.js b/test/functional/index.js
index 3c9f5ec..53e6195 100644
--- a/test/functional/index.js
+++ b/test/functional/index.js
@@ -11,6 +11,7 @@ describe('maputnik', function() {
"geojson:example",
"raster:raster"
]));
+ browser.alertAccept();
browser.execute(function() {
localStorage.setItem("survey", true);
});
diff --git a/test/functional/layers/index.js b/test/functional/layers/index.js
index 012b672..048a795 100644
--- a/test/functional/layers/index.js
+++ b/test/functional/layers/index.js
@@ -11,6 +11,7 @@ describe("layers", function() {
"geojson:example",
"raster:raster"
]));
+ browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.flushReactUpdates();
@@ -449,6 +450,7 @@ describe("layers", function() {
browser.url(config.baseUrl+"?debug&style="+getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
helper.modal.addLayer.open();
var aId = helper.modal.addLayer.fill({
diff --git a/test/functional/map/index.js b/test/functional/map/index.js
index 2df5393..816a30c 100644
--- a/test/functional/map/index.js
+++ b/test/functional/map/index.js
@@ -9,6 +9,7 @@ describe("map", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
])+"#"+zoomLevel+"/41.3805/2.1635");
+ browser.alertAccept();
browser.waitUntil(function () {
return (
@@ -22,6 +23,7 @@ describe("map", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
])+"#"+zoomLevel+"/41.3805/2.1635");
+ browser.alertAccept();
browser.click(".mapboxgl-ctrl-zoom-in")
browser.waitUntil(function () {
diff --git a/test/functional/modals/index.js b/test/functional/modals/index.js
index 0403b22..3726e97 100644
--- a/test/functional/modals/index.js
+++ b/test/functional/modals/index.js
@@ -99,6 +99,7 @@ describe("modals", function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
browser.selectByValue(wd.$("nav:inspect", "select"), "inspect");
})
@@ -161,7 +162,7 @@ describe("modals", function() {
})
})
- it("open map tiles access token", function() {
+ it("maptiler access token", function() {
var apiKey = "testing123";
browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey);
browser.click(wd.$("modal-settings.name"))
@@ -171,14 +172,24 @@ describe("modals", function() {
assert.equal(styleObj.metadata["maputnik:openmaptiles_access_token"], apiKey);
})
- it.skip("style renderer", function() {
- var selector = wd.$("modal-settings.maputnik:renderer");
- browser.selectByValue(selector, "ol3");
+ it("thunderforest access token", function() {
+ var apiKey = "testing123";
+ browser.setValueSafe(wd.$("modal-settings.maputnik:thunderforest_access_token"), apiKey);
browser.click(wd.$("modal-settings.name"))
browser.flushReactUpdates();
var styleObj = helper.getStyleStore(browser);
- assert.equal(styleObj.metadata["maputnik:renderer"], "ol3");
+ assert.equal(styleObj.metadata["maputnik:thunderforest_access_token"], apiKey);
+ })
+
+ it("style renderer", function() {
+ var selector = wd.$("modal-settings.maputnik:renderer");
+ browser.selectByValue(selector, "ol");
+ browser.click(wd.$("modal-settings.name"))
+ browser.flushReactUpdates();
+
+ var styleObj = helper.getStyleStore(browser);
+ assert.equal(styleObj.metadata["maputnik:renderer"], "ol");
})
})
diff --git a/test/functional/screenshots/index.js b/test/functional/screenshots/index.js
index 093802e..ef976c4 100644
--- a/test/functional/screenshots/index.js
+++ b/test/functional/screenshots/index.js
@@ -18,6 +18,7 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.flushReactUpdates();
@@ -28,6 +29,7 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.flushReactUpdates();
@@ -41,6 +43,7 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.flushReactUpdates();
@@ -54,6 +57,7 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.flushReactUpdates();
@@ -67,6 +71,7 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.flushReactUpdates();
@@ -80,6 +85,7 @@ describe('screenshots', function() {
browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
"geojson:example"
]));
+ browser.alertAccept();
browser.waitForExist(".maputnik-toolbar-link");
browser.flushReactUpdates();