[Maps] Load Maki icons from spritesheet #42499

nickpeihl · 2019-08-01T23:22:44Z

This PR enables the use of @elastic/maki icons from a spritesheet. The spritesheet contains PNG icons generated from SVGs using a signed distance field algorithm.

This relies on elastic/maki#3 which creates the spritesheet. We should review and merge that PR first and create an @elastic/maki npm package.

@elastic/maki npm package also includes arrow-es, boat-es, and,car-top-es icons that will work great for directional pointing

TODO

Update and write tests
Finalize @elastic/maki API and merge the PR
Publish the @elastic/maki npm package
Update the @elastic/maki dependency in package.json

thomasneirynck · 2019-08-02T19:34:59Z

Finding this on Kibana startup

Cannot read property 'forEach' of undefined
Version: 8.0.0
Build: 9007199254740991
TypeError: Cannot read property 'forEach' of undefined
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js (http://localhost:5601/nuz/bundles/commons.bundle.js:257171:24)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js (http://localhost:5601/nuz/bundles/commons.bundle.js:255466:21)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js (http://localhost:5601/nuz/bundles/commons.bundle.js:256838:20)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js (http://localhost:5601/nuz/bundles/commons.bundle.js:256427:35)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js (http://localhost:5601/nuz/bundles/commons.bundle.js:257401:28)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)

https://github.com/thomasneirynck/kibana/blob/1b0eda0d29d3f4b1de94df1ffff76f4fd111047b/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js#L17

The maki object has a layouts and spritesheets property, but not an svgArray property.

Anyway to resolve?

nickpeihl · 2019-08-02T20:59:12Z

Finding this on Kibana startup

Cannot read property 'forEach' of undefined
Version: 8.0.0
Build: 9007199254740991
TypeError: Cannot read property 'forEach' of undefined
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js (http://localhost:5601/nuz/bundles/commons.bundle.js:257171:24)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/components/vector/legend/symbol_icon.js (http://localhost:5601/nuz/bundles/commons.bundle.js:255466:21)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js (http://localhost:5601/nuz/bundles/commons.bundle.js:256838:20)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js (http://localhost:5601/nuz/bundles/commons.bundle.js:256427:35)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)
    at Object../x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js (http://localhost:5601/nuz/bundles/commons.bundle.js:257401:28)
    at __webpack_require__ (http://localhost:5601/nuz/bundles/kibana.bundle.js:83:30)

https://github.com/thomasneirynck/kibana/blob/1b0eda0d29d3f4b1de94df1ffff76f4fd111047b/x-pack/legacy/plugins/maps/public/layers/styles/symbol_utils.js#L17

The maki object has a layouts and spritesheets property, but not an svgArray property.

Anyway to resolve?

I needed to update yarn.lock. This should be fixed now.

elasticmachine · 2019-08-02T21:41:47Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

nreese

Thanks for switching the icon loading. This is great.

Can you also delete the server end point logic for /maps/sprite/maki along with the constants SPRITE_PATH and MAKI_SPRITE_PATH since they are no longer used

nreese · 2019-08-05T18:47:03Z

x-pack/legacy/plugins/maps/public/connected_components/map/mb/utils.js

 import _ from 'lodash';
+import assert from 'assert';
+
+function createImage(image, { width, height }, channels, data) {


Can you move this map box code into its own file to keep isolated?

nreese · 2019-08-05T18:50:18Z

x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js

-  return a.href;
-}
+import { spritesheet } from '@elastic/maki';
+import sprites from '@elastic/maki/dist/sprite@1.png';


Is there a way to see if the device is retina display and load @2.png if it is?

x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js

…aki-icons

nreese

Can you also remove all of the server code for the paths no longer used?

https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/maps/server/routes.js#L274

and the static files themselves

https://github.com/elastic/kibana/tree/master/x-pack/legacy/plugins/maps/server/sprites

nreese

This is great. Love the new arrow, boat and car-top icons. Thanks for getting all of this done

lgtm
code review, tested in chrome and firefox

elasticmachine · 2019-08-06T18:47:43Z

Pinging @elastic/kibana-gis

elasticmachine · 2019-08-06T18:49:27Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* Load Maki icons from spritesheet

nickpeihl added 2 commits August 1, 2019 15:20

Load Maki icons from spritesheet

1b0eda0

Add mapbox-gl license to NOTICE.txt

58a8016

nickpeihl requested review from thomasneirynck and nreese August 1, 2019 23:22

thomasneirynck mentioned this pull request Aug 2, 2019

[Maps] Add EMS vector tile support #42475

Closed

5 tasks

Update yarn.lock

0bf79ce

nreese reviewed Aug 5, 2019

View reviewed changes

nickpeihl added 4 commits August 6, 2019 08:56

Use @elastic/maki npm package

77a628e

Remove unused api paths

8d9b2db

Isolate mapbox code into seperate file

cc29381

Enable retina sprites

4b99977

nickpeihl marked this pull request as ready for review August 6, 2019 17:22

Merge branch 'master' of https://github.com/elastic/kibana into sdf-m…

51b4d93

…aki-icons

nreese reviewed Aug 6, 2019

View reviewed changes

nickpeihl added 2 commits August 6, 2019 10:32

Remove sprite api route

4c2cc43

Remove static sprites files

fa52247

nickpeihl added release_note:enhancement v7.4.0 v8.0.0 labels Aug 6, 2019

nreese approved these changes Aug 6, 2019

View reviewed changes

nickpeihl added the [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation label Aug 6, 2019

nickpeihl merged commit 8a3b96d into elastic:master Aug 6, 2019

nickpeihl mentioned this pull request Aug 6, 2019

[7.x] [Maps] Load Maki icons from spritesheet (#42499) #42767

Merged

nickpeihl added a commit to nickpeihl/kibana that referenced this pull request Aug 6, 2019

[Maps] Load Maki icons from spritesheet (elastic#42499)

cc7a16b

* Load Maki icons from spritesheet

nickpeihl mentioned this pull request Aug 6, 2019

[Maps][Maki] add build scripts to build sprite sheet with SDF #39715

Closed

nickpeihl deleted the sdf-maki-icons branch August 6, 2019 21:06

nickpeihl added a commit that referenced this pull request Aug 6, 2019

[Maps] Load Maki icons from spritesheet (#42499) (#42767)

a594fdb

* Load Maki icons from spritesheet

thomasneirynck mentioned this pull request Aug 7, 2019

[Maps] Use EMS vector tiles #42846

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Maps] Load Maki icons from spritesheet #42499

[Maps] Load Maki icons from spritesheet #42499

nickpeihl commented Aug 1, 2019 •

edited by nreese

Loading

thomasneirynck commented Aug 2, 2019

nickpeihl commented Aug 2, 2019

elasticmachine commented Aug 2, 2019

nreese left a comment

nreese Aug 5, 2019

nreese Aug 5, 2019

nreese left a comment

nreese left a comment •

edited

Loading

elasticmachine commented Aug 6, 2019

elasticmachine commented Aug 6, 2019

[Maps] Load Maki icons from spritesheet #42499

[Maps] Load Maki icons from spritesheet #42499

Conversation

nickpeihl commented Aug 1, 2019 • edited by nreese Loading

thomasneirynck commented Aug 2, 2019

nickpeihl commented Aug 2, 2019

elasticmachine commented Aug 2, 2019

💚 Build Succeeded

nreese left a comment

Choose a reason for hiding this comment

nreese Aug 5, 2019

Choose a reason for hiding this comment

nreese Aug 5, 2019

Choose a reason for hiding this comment

nreese left a comment

Choose a reason for hiding this comment

nreese left a comment • edited Loading

Choose a reason for hiding this comment

elasticmachine commented Aug 6, 2019

elasticmachine commented Aug 6, 2019

💚 Build Succeeded

nickpeihl commented Aug 1, 2019 •

edited by nreese

Loading

nreese left a comment •

edited

Loading