aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJakub Hampl <kopomir@gmail.com>2018-06-20 16:33:27 +0100
committerJakub Hampl <kopomir@gmail.com>2018-06-20 16:33:27 +0100
commitd9df87f78a8c188dc9434117af63542ded82e8c4 (patch)
tree71afd4bdec12e81f40d1da8748dfcb090c030f14
parent7eb8f3ea42fb1399bc9960697e9f6439fe5ec6cb (diff)
Add better readme
-rw-r--r--README.md146
-rw-r--r--elm-package.json2
-rw-r--r--rollup.config.js2
3 files changed, 147 insertions, 3 deletions
diff --git a/README.md b/README.md
index 968034b..a5aeead 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,145 @@
-# elm-markdown
+# elm-mapbox
-MapboxGl.js bindings for elm. More to come.
+Great looking and performant maps in Elm using MapboxGl.
+
+### How this works
+
+This library uses a combination of ports and custom elements. To get going,
+install the accompanying npm library:
+
+ npm install --save elm-mapbox
+
+Then, when you are instantiating your Elm application, change it from:
+
+```javascript
+var app = Elm.MyApp.fullscreen();
+```
+
+to
+
+```javascript
+import elmMapbox from "elm-mapbox";
+
+var app = elmMapbox(Elm.MyApp.fullscreen());
+```
+
+(where `MyApp` is your main module and `fullscreen` can be any way of instantiating an elm application).
+
+Additionally, you may pass in your mapbox token as an option to this method:
+
+```javascript
+import elmMapbox from "elm-mapbox";
+
+var app = elmMapbox(Elm.MyApp.fullscreen(), {token: 'pk45.rejkgnwejk'});
+```
+
+Next, optionally, setup a ports module:
+
+```elm
+port module MapCommands exposing (flyTo)
+
+import Json.Decode exposing (Value)
+import Mapbox.Cmd as Cmd
+
+port elmMapboxOutgoing : Value -> Cmd msg
+
+port elmMapboxIncoming : (Cmd.Response -> msg) -> Sub msg
+
+mapId =
+ {- this is whatever the `id` attribute on your map is -}
+ "my-map"
+
+flyTo =
+ Cmd.flyTo elmMapboxOutgoing mapId
+```
+
+This will allow you to easily use the commands to control parts of your map interactions imperatively.
+
+### Example
+
+Then you can go all out!
+
+```elm
+module Example01 exposing (main)
+
+import Html exposing (div, text)
+import Html.Attributes exposing (style)
+import Json.Decode exposing (Value)
+import Mapbox.Element exposing (..)
+import Mapbox.Expression as E exposing (false, float, int, str, true)
+import Mapbox.Layer as Layer
+import Mapbox.Source as Source
+import Mapbox.Style as Style exposing (Style(..))
+import MapCmd
+
+
+main =
+ Html.program
+ { init = init
+ , view = view
+ , update = update
+ , subscriptions = \m -> Sub.none
+ }
+
+
+init =
+ ( { position = ( 0, 0 ) }, Cmd.none )
+
+
+type Msg
+ = Hover EventData
+ | Click EventData
+
+
+mapPair f ( a, b ) =
+ ( f a, f b )
+
+
+update msg model =
+ case msg of
+ Hover { lngLat } ->
+ ( { model | position = lngLat }, Cmd.none )
+
+ Click { lngLat } ->
+ ( model, MapCmd.fitBounds ( mapPair (\a -> a - 0.2) lngLat, mapPair (\a -> a + 0.2) lngLat ) )
+
+style =
+ Style
+ { transition = Style.defaultTransition
+ , light = Style.defaultLight
+ , sources =
+ [ Source.vectorFromUrl "composite" "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7" ]
+ , misc =
+ [ Style.name "light"
+ , Style.defaultCenter 20.39789404164037 43.22523201923144
+ , Style.defaultZoomLevel 1.5967483759772743
+ , Style.sprite "mapbox://sprites/user/cjht22eqw0lfc2ro6z0qhlm29"
+ , Style.glyphs "mapbox://fonts/user/{fontstack}/{range}.pbf"
+ ]
+ , layers =
+ [ Layer.background "background"
+ [ E.rgba 246 246 244 1 |> Layer.backgroundColor
+ ]
+ , Layer.fill "landcover"
+ "composite"
+ [ Layer.sourceLayer "landcover"
+ , E.any
+ [ E.getProperty (str "class") |> E.isEqual (str "wood")
+ , E.getProperty (str "class") |> E.isEqual (str "scrub")
+ , E.getProperty (str "class") |> E.isEqual (str "grass")
+ , E.getProperty (str "class") |> E.isEqual (str "crop")
+ ]
+ |> Layer.filter
+ , Layer.fillColor (E.rgba 227 227 227 1)
+ , Layer.fillOpacity (float 0.6)
+ ]
+ ]
+ }
+
+view model =
+ div [ style [ ( "width", "100vw" ), ( "height", "100vh" ) ] ]
+ [ css
+ , map [ onMouseMove Hover, onClick Click, id "my-map"] style
+ , div [ style [ ( "position", "absolute" ), ( "bottom", "20px" ), ( "left", "20px" ) ] ] [ text (toString model.position) ]
+ ]
+```
diff --git a/elm-package.json b/elm-package.json
index 1f93813..ffcf4d4 100644
--- a/elm-package.json
+++ b/elm-package.json
@@ -7,6 +7,8 @@
"./src"
],
"exposed-modules": [
+ "Mapbox.Element",
+ "Mapbox.Cmd",
"Mapbox.Style",
"Mapbox.Source",
"Mapbox.Layer",
diff --git a/rollup.config.js b/rollup.config.js
index 058d257..6f2ec25 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -10,7 +10,7 @@ export default [
output: {
file: pkg.browser,
format: "umd",
- name: "elm-mapbox"
+ name: "elmMapbox"
},
plugins: [
resolve(), // so Rollup can find `ms`