From 82548a513a9ba05fd97ff605c577b85c11f71615 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dietrich?= Date: Thu, 12 Sep 2019 18:59:17 +0200 Subject: updated README with information about changes ... --- README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/README.md b/README.md index bd08c04..d46df72 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,43 @@ + +> This is only a fork of the great elm-mapbox library from Jakub Hampl with some +> quick fixes, that I needed for my project. Please use the original version from +> https://github.com/gampleman/elm-mapbox +> +> I will remove the project when this functionality will be available in the +> original project. + +__Changes:__ + +* Use the patch after running `npm i` in order to remove some errors + (at least on my system) with TouchEvents and not ready loaded maps + + `patch -N node_modules/elm-mapbox/dist/elm-mapbox.umd.js < elm-mapbox.umd.js.patch` + +* This version contains some decoders for `StyleDef`, which are nice to + use, if you want to load your maps from MapBox-Studio and add some custom + layers in your code ... see for example examples/Example04 + +* Or, as in my case, you can also use the great style generator to generate your + `StyleDef`, which in my case caused some errors and remove the layers by a + simple json-parser. Simply copy your original json definition into a string ... + + ``` elm + Style + { transition = Style.defaultTransition + , light = Style.defaultLight + , layers = + """ + [{"id": "background","type": "background","layout": {"visibility": "visible"},"paint": {"background-color": "#fff", "background-opacity": 1},"interactive": true},{"id": "waterway","type": "line","metadata": {"mapbox:group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "waterway","layout": {"visibility": "visible","line-cap": "round","line-join": "round"},"paint": {"line-width": 2,"line-color": "#62b0f0","line-blur": 0,"line-opacity": 0.7},"interactive": true},{"id": "water","type": "fill","metadata": {"mapbox:group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "water","layout": {"visibility": "visible"},"paint": {"fill-color": "#62b0f0","fill-opacity": 0.35,"fill-outline-color": "#62b0f0"},"interactive": true},{"id": "water outline","type": "line","metadata": {"mapbox:group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "water","layout": {},"paint": {"line-color": "#62b0f0", "line-width": 2, "line-blur": 1},"interactive": true},{"id": "water copy","type": "fill","metadata": {"mapbox:group": "1452116608071.19"},"source": "mapbox://mapbox.mapbox-streets-v6","source-layer": "water","layout": {"visibility": "visible"},"paint": {"fill-opacity": 0.35, "fill-color": "#fff"},"interactive": true},{"id": "snow copy","type": "fill","metadata": {"mapbox:group": "1452538953048.7173"},"source": "mapbox://mapbox.mapbox-terrain-v2","source-layer": "landcover","filter": ["==", "class", "snow"],"layout": {"visibility": "visible"} ... + """ + |> Layer.jsonList + , ... + ``` + +* If you want to achieve the same, but only for one layer, then use `Layer.json`... + + + + # elm-mapbox Great looking and performant maps in Elm using MapboxGl. Discuss in #maps on the Elm Slack. -- cgit v1.2.3