Fix README

README.md

@@ -33,34 +33,67 @@ On the template:
     idKey="department_id" 
     :value="value" 
     :extraValues="extraValues" 
-    referenceTitle="Girls school enrolment" 
-    dataTitle="Department" 
-    dataPlaceholder="Hover over a department"
     :center="center" 
     :colorScale="colorScale"
     mapStyle="height: 500px;"
     :zoom="6" 
     :mapOptions="mapOptions">
+    <template scope="props">
+        <InfoControl 
+            :item="props.currentItem" 
+            :unit="props.unit" 
+            title="Department" 
+            placeholder="Hover over a department"
+            position="topright">
+        </InfoControl>
+        <ReferenceChart 
+            title="Girls school enrolment" 
+            :colorScale="colorScale" 
+            :min="props.min" 
+            :max="props.max" 
+            position="bottomright">
+        </ReferenceChart>
+    </template>
 </ChoroplethMap>
 ```
 
-### Props
+### ChoroplethMap Props
 * **geojson**: The GeoJSON object to use
 * **data**: Data object with the information to show on the map
 * **titleKey**: Property of the **data** object to show when you hover over a certain region of your map (e.g. state_name)
 * **geojsonIdKey**: Property under the *properties* array of the GeoJSON that serves as identifier of each region of the map.
 * **idKey**: Property of the **data** object that matches the **geojsonIdKey** value.
 * **value**: JS object with two properties, **key**: that maps to the **data** property that contains the value domain set (e.g. amount) and **metric**: that maps to the **data** property that describes the unit that you're working on (e.g. ```"% of students"```)
 * **extraValues**: Array of **value** objects that show additional information of a certain region of the map.
-* **referenceTitle**: Short description to show as reference of the information described by the map (e.g. ```"Population density"```)
-* **dataTitle**: Description about what each item of the map is (e.g. ```"State"```)
-* **dataPlaceholder**: Placeholder text to show when no element is currently selected
 * **center**: Geographic coordinates of the map initial center (e.g. ```[-23.752961, -57.854357]```)
 * **colorScale**: Array of hex color codes to fill each region of the map with. At the minimum you need to specify two colors, the one to use with the lowest values and another one to use with the highest values. (e.g. ```["e7d090", "de7062"]```)
 * **mapStyle**: CSS style of the map.
 * **zoom**: With how much zoom to init the map.
 * **mapOptions**: Additional leaflet Map options. (e.g. ```{attributionControl: false}```)
 
+The `ChoroplethMap` component pass the this information through its [default slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
+* **currentItem**: Current item on focus
+* **unit**: metric associated with the value
+* **min**: The lowest value on the domain set
+* **max**: The highest value on the domain set
+
+As seen on the example, usually you'll pass these values to the `InfoControl` and `ReferenceChart` components.
+
+### InfoControl props
+This is the current item information view.
+* **item**: Item to show information about
+* **unit**: Metric to use while displaying information
+* **title**: Description about what each item of the map is (e.g. ```"State"```)
+* **placeholder**: Placeholder text to show when no element is currently selected
+* **position**: Where to render the component. With values allowed [here](http://leafletjs.com/reference-1.2.0.html#control-position) (default: ```"bottomleft"```)
+
+### ReferenceChart props
+* **title**: Short description to show as reference of the information described by the map (e.g. ```"Population density"```)
+* **colorScale**: Same prop as used on `ChoroplethMap` component
+* **min**: The lowest value represented on the visualization
+* **max**: The highest value represented on the visualization
+* **position**: Where to render the component. With values allowed [here](http://leafletjs.com/reference-1.2.0.html#control-position) (default: ```"topright"```)
+
 
 ## How to install
 ### NPM
@@ -90,7 +123,7 @@ $ npm run build
 ``` bash
 # Run demo at localhost:8080
 $ npm link
-$ cd examples
+$ cd examples/node-example
 $ npm link vue-choropleth
 $ npm install
 # serve with hot reload at localhost:8080
@@ -100,6 +133,10 @@ Go to <http://localhost:8080/> to see the demo
 
 NOTE: If you make changes to the library you should run 'npm run build' again in the root folder.
 The dev server should detect modification and reload the demo
+
+### Web example
+
+You'll also find an example using direct `<script>` include under `examples/browser-example`
 ## Authors
 
 Guillermo Peralta Scura

examples/browser-example/index.html

@@ -12,9 +12,9 @@
             geojson-id-key="dpto" :geojson="geojson" :center="center" :color-scale="colorScale" map-style="height: 500px; width: 500px;"
             :zoom="6" :map-options="mapOptions">
             <template scope="props">
-                <info-control :data="props.data" :unit="props.unit" title="Department" placeholder="Hover over a department">
+                <info-control :item="props.currentItem" :unit="props.unit" title="Department" placeholder="Hover over a department" position="topright">
                 </info-control>
-                <reference-chart title="Girls school enrolment" :color-scale="colorScale" :min="props.min" :max="props.max" position="bottomright">
+                <reference-chart title="Girls school enrolment" :color-scale="colorScale" :min="props.min" :max="props.max" position="bottomleft">
                     </ReferenceChart>
             </template>
         </choropleth-map>

examples/node-example/config/index.js

@@ -23,7 +23,7 @@ module.exports = {
   },
   dev: {
     env: require("./dev.env"),
-    port: 8089,
+    port: 8080,
     autoOpenBrowser: true,
     assetsSubDirectory: "static",
     assetsPublicPath: "/",

examples/node-example/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <ChoroplethMap :data="pyDepartmentsData" titleKey="department_name" idKey="department_id" :value="value" :extraValues="extraValues" geojsonIdKey="dpto" :geojson="paraguayGeojson" :center="center" :colorScale="colorScale" mapStyle="height: 500px;" :zoom="6" :mapOptions="mapOptions">
       <template scope="props">
-        <InfoControl :data="props.data" :unit="props.unit" title="Department" placeholder="Hover over a department"></InfoControl>
+        <InfoControl :item="props.currentItem" :unit="props.unit" title="Department" placeholder="Hover over a department"></InfoControl>
         <ReferenceChart title="Girls school enrolment" :colorScale="colorScale" :min="props.min" :max="props.max" position="topright"></ReferenceChart>
       </template>
     </ChoroplethMap>

src/components/ChoroplethMap.vue

@@ -1,7 +1,7 @@
 <template>
     <v-map id="map" :zoom="zoom" :center="center" :style="mapStyle" :options="mapOptions">
         <v-geojson-layer :geojson="geojson" :options="geojsonOptions"></v-geojson-layer>
-        <slot :data="currentItem" :unit="value.metric" :min="min" :max="max"></slot>
+        <slot :currentItem="currentItem" :unit="value.metric" :min="min" :max="max"></slot>
     </v-map>
 </template>
 

src/components/InfoControl.vue

@@ -5,20 +5,23 @@
 <script>
 export default {
     props: {
-        data: Object,
+        item: Object,
         unit: String,
         placeholder: {
             type: String,
             default: ""
         },
-        title: String
+        title: String,
+        position: {
+            type: String,
+            default: "bottomleft"
+        }
     },
     mounted() {
-        const unit = this.unit
-        const title = this.title
-        const placeholder = this.placeholder
+        const { unit, title, placeholder, position } = this
+
         this.mapObject = L.control({
-            position: "bottomleft"
+            position: position
         })
         this.mapObject.onAdd = function (map) {
             this._div = L.DomUtil.create('div', 'info') // create a div with a class "info"
@@ -51,7 +54,7 @@ export default {
         }
     },
     watch: {
-        data: function (newValue) {
+        item: function (newValue) {
             this.mapObject.update(
                 {
                     ...newValue,