├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── docs
    ├── .DS_Store
    ├── .nojekyll
    ├── build.js
    ├── docs.js
    ├── examples
    │   ├── balloon-anchor.vue
    │   ├── balloon-pos-change.vue
    │   ├── balloon.vue
    │   ├── map-autocenter.vue
    │   ├── map-center.vue
    │   ├── map-change.vue
    │   ├── map-nodrag.vue
    │   ├── map-zoom-change.vue
    │   ├── map-zoom.vue
    │   ├── map.vue
    │   ├── marker-change.vue
    │   ├── marker-icon.vue
    │   ├── marker-pos.vue
    │   ├── marker-select.vue
    │   └── marker.vue
    ├── imgs
    │   ├── marker-blue.png
    │   ├── marker-green.png
    │   ├── marker-red.png
    │   └── patreon-medium-button.png
    ├── index.html
    ├── index.vue
    ├── introduction.vue
    └── roadmap.vue
├── package-lock.json
├── package.json
└── src
    ├── main.js
    ├── ol-balloon.vue
    ├── ol-map.vue
    └── ol-marker.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | nbproject
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 2-Clause License
 2 | 
 3 | Copyright (c) 2017, Sombriks
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright notice, this
10 |   list of conditions and the following disclaimer.
11 | 
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 |   this list of conditions and the following disclaimer in the documentation
14 |   and/or other materials provided with the distribution.
15 | 
16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | 
 2 | clean: 
 3 | 	rm -rf docs/build.js
 4 | 
 5 | docs: clean
 6 | 	npx cross-env NODE_ENV=production browserify docs/docs.js -o docs/build.js
 7 | 
 8 | dev: clean
 9 | 	budo docs/docs.js:build.js --dir docs --live --open -H 127.0.0.1
10 | 
11 | release: docs
12 | 	npm publish
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-openlayers
 2 | 
 3 | **this project doesn't receive maintenance for a while**, 
 4 | if you need new features see [vue3-openlayers](https://github.com/MelihAltintas/vue3-openlayers) project.
 5 | 
 6 | - humble wrapper for the powerful openlayers map api
 7 | - demo/docs [here](https://sombriks.github.io/vue-openlayers)
 8 | 
 9 | ## maintained version
10 | 
11 | For a better maintained and modern version, please see [vue3-openlayers](https://github.com/MelihAltintas/vue3-openlayers) project.
12 | 
13 | This project was a pleasure to create but sadly i can't maintain that. 
14 | Hopefully [Melih Altıntaş](https://github.com/MelihAltintas) did a great job creating a modern wapper vor vue. 
15 | 
16 | ## Usage
17 | 
18 | ```javascript
19 | 
20 | // require the openlayers css
21 | require("../node_modules/openlayers/css/ol.css");
22 | 
23 | // require vue and any other shiny library
24 | const Vue = require('vue');
25 | // ...
26 | // at some point require vue-openlayers
27 | const VueOpenLayers = require("vue-openlayers");
28 | // ...
29 | // then install the plugin
30 | Vue.use(VueOpenLayers);
31 | 
32 | // done! now on your .vue documents you have the right to use <ol-map></ol-map> and <ol-marker></olmarker>
33 | ```
34 | 


--------------------------------------------------------------------------------
/docs/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sombriks/vue-openlayers/b743e735daf18e01be621396bfb29d83891e2a09/docs/.DS_Store


--------------------------------------------------------------------------------
/docs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sombriks/vue-openlayers/b743e735daf18e01be621396bfb29d83891e2a09/docs/.nojekyll


--------------------------------------------------------------------------------
/docs/docs.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // to do a nicer docs example
 3 | require("../node_modules/flexboxgrid/css/flexboxgrid.css");
 4 | require("../node_modules/openlayers/css/ol.css");
 5 | 
 6 | // let's see it working
 7 | const Vue = require("vue");
 8 | const VueRouter = require("vue-router");
 9 | const VueOpenLayers = require("../src/main");
10 | 
11 | Vue.use(VueRouter);
12 | Vue.use(VueOpenLayers);
13 | 
14 | const routes = [
15 |   {path: "/introduction", component: require("./introduction.vue")},
16 |   {path: "/roadmap", component: require("./roadmap.vue")},
17 |   {path: "/map", component: require("./examples/map.vue")},
18 |   {path: "/mapcenter", component: require("./examples/map-center.vue")},
19 |   {path: "/mapchange", component: require("./examples/map-change.vue")},
20 |   {path: "/mapnodrag", component: require("./examples/map-nodrag.vue")},
21 |   {path: "/mapauto", component: require("./examples/map-autocenter.vue")},
22 |   {path: "/mapzoom", component: require("./examples/map-zoom.vue")},
23 |   {path: "/mapzoomchange", component: require("./examples/map-zoom-change.vue")},
24 |   {path: "/marker", component: require("./examples/marker.vue")},
25 |   {path: "/markerposition", component: require("./examples/marker-pos.vue")},
26 |   {path: "/markerchange", component: require("./examples/marker-change.vue")},
27 |   {path: "/markericon", component: require("./examples/marker-icon.vue")},
28 |   {path: "/markerselection", component: require("./examples/marker-select.vue")},
29 |   {path: "/balloon", component: require("./examples/balloon.vue")},
30 |   {path: "/balloonanchor", component: require("./examples/balloon-anchor.vue")},
31 |   {path: "/balloonchangepos", component: require("./examples/balloon-pos-change.vue")},
32 |   
33 |   {path: "/", redirect: "/introduction"}
34 | ];
35 | 
36 | const router = new VueRouter({
37 |   routes
38 | });
39 | 
40 | const vm = new Vue({
41 |   router,
42 |   el:"#mountpoint",
43 |   render: function (createElement) {
44 |     return createElement(require("../docs/index.vue"));
45 |   }
46 | });
47 | 
48 | 


--------------------------------------------------------------------------------
/docs/examples/balloon-anchor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map>
 4 |       <ol-balloon :anchor="[60,110]">
 5 |         <div class="blackballoon">
 6 |           <small>If all you have is a hammer, everything looks like a fish. Oh wait.</small>
 7 |         </div>
 8 |       </ol-balloon>
 9 |     </ol-map>
10 |     <pre>
11 |       &lt;template&gt;
12 |         &lt;ol-map&gt;
13 |           &lt;ol-balloon :anchor="[60,110]"&gt;
14 |             &lt;div class="blackballoon"&gt;
15 |               &lt;p&gt;If all you have is a hammer, everything looks like a fish. Oh wait.&lt;/p&gt;
16 |             &lt;/div&gt;
17 |           &lt;/ol-balloon&gt;
18 |         &lt;/ol-map&gt;
19 |       &lt;/template&gt;
20 |       &lt;style&gt;
21 |       .blackballoon {
22 |         background-color: black;
23 |         color: white;
24 |         padding: 1em 1em 1em 1em;
25 |         width:100px;
26 |         border-radius: 1.5em;
27 |       }
28 |       &lt;/style&gt;
29 |     </pre>
30 |   </div>
31 | </template>
32 | <style>
33 | .blackballoon {
34 |   background-color: black;
35 |   color: white;
36 |   padding: 1em 1em 1em 1em;
37 |   width: 100px;
38 |   border-radius: 1.5em;
39 | }
40 | </style>
41 | <script>
42 | module.exports = {
43 |   name:"BalloonAnchorExample"
44 | };
45 | </script>
46 | 


--------------------------------------------------------------------------------
/docs/examples/balloon-pos-change.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :center="balloonpos" @moveend="moveballoon">
 4 |       <ol-balloon :coords="balloonpos">
 5 |         <div class="greenballoon">
 6 |           <p>Hello</p>
 7 |         </div>
 8 |       </ol-balloon>
 9 |     </ol-map>
10 |     <pre>
11 |           &lt;template&gt;
12 |             &lt;ol-map :center="balloonpos" @moveend="moveballoon"&gt;
13 |               &lt;ol-balloon :coords="balloonpos"&gt;
14 |                 &lt;div class="greenballoon"&gt;
15 |                   &lt;p&gt;Hello&lt;/p&gt;
16 |                 &lt;/div&gt;
17 |               &lt;/ol-balloon&gt;
18 |             &lt;/ol-map&gt;
19 |           &lt;/template&gt;
20 |           &lt;script&gt;
21 |           module.exports = {
22 |             name: "BalloonPositionChangeExample",
23 |             data() {
24 |               return {
25 |                 balloonpos: [-40.5092601, -2.8042712]
26 |               };
27 |             },
28 |             methods: {
29 |               moveballoon(evt, pos) {
30 |                 this.balloonpos = pos;
31 |               }
32 |             }
33 |           };
34 |           &lt;/script&gt;
35 |           &lt;style&gt;
36 |           .myballoon {
37 |             background-color: #CAFEBA;
38 |             padding: 1em 1em 1em 1em;
39 |             border-radius: 1.5em;
40 |           }
41 |           &lt;/style&gt;
42 |         </pre>
43 |   </div>
44 | </template>
45 | <style>
46 | .greenballoon {
47 |   background-color: #CAFEBA;
48 |   padding: 1em 1em 1em 1em;
49 |   border-radius: 1.5em 2.5em 3.5em 4.5em;
50 | }
51 | </style>
52 | <script>
53 | module.exports = {
54 |   name: "BalloonPositionChangeExample",
55 |   data() {
56 |     return {
57 |       balloonpos: [-40.5092601, -2.8042712]
58 |     };
59 |   },
60 |   methods: {
61 |     moveballoon(evt, pos) {
62 |       this.balloonpos = pos;
63 |     }
64 |   }
65 | };
66 | </script>


--------------------------------------------------------------------------------
/docs/examples/balloon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map>
 4 |       <ol-balloon>
 5 |         <div class="myballoon">
 6 |           <h1>You Are Here</h1>
 7 |           <p>Maybe not</p>
 8 |         </div>
 9 |       </ol-balloon>
10 |       <ol-balloon :coords="[-38.57921, -3.70522]">
11 |         <div class="myballoon">
12 |           <p>Maybe you're there</p>
13 |         </div>
14 |       </ol-balloon>
15 |     </ol-map>
16 |     <pre>
17 |         &lt;template&gt;
18 |           &lt;ol-map&gt;
19 |             &lt;ol-balloon&gt;
20 |               &lt;div class="myballoon"&gt;
21 |                 &lt;h1>You Are Here&lt;/h1&gt;
22 |                 &lt;p>Maybe not&lt;/p&gt;
23 |               &lt;/div&gt;
24 |             &lt;/ol-balloon&gt;
25 |             &lt;ol-balloon :coords="[-38.57921, -3.70522]"&gt;
26 |               &lt;div class="myballoon"&gt;
27 |                 &lt;h1>You Are Here&lt;/h1&gt;
28 |                 &lt;p>Maybe not&lt;/p&gt;
29 |               &lt;/div&gt;
30 |             &lt;/ol-balloon&gt;
31 |           &lt;/ol-map&gt;
32 |         &lt;/template&gt;
33 |         &lt;style&gt;
34 |         .myballoon {
35 |           background-color: #EEEEEE;
36 |           padding: 1em 1em 1em 1em;
37 |           border-radius: 1.5em;
38 |         }
39 |         &lt;/style&gt;
40 |       </pre>
41 |   </div>
42 | </template>
43 | <style>
44 | .myballoon {
45 |   background-color: #EEEEEE;
46 |   padding: 1em 1em 1em 1em;
47 |   border-radius: 1.5em;
48 | }
49 | </style>
50 | <script>
51 | module.exports = {
52 |   name:"BalloonExample"
53 | };
54 | </script>


--------------------------------------------------------------------------------
/docs/examples/map-autocenter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map auto-center></ol-map>
 4 |     <pre>
 5 |       &lt;template&gt;
 6 |         &lt;ol-map auto-center&gt;&lt;/ol-map&gt;
 7 |       &lt;/template&gt;
 8 |     </pre>
 9 |   </div>
10 | </template>
11 | <style></style>
12 | <script>
13 | module.exports = {
14 |   name:"MapAutocenterExample"
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/examples/map-center.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :center="[-38.7466364,-3.6199158]"></ol-map>
 4 |     <pre>
 5 |       &lt;template&gt;
 6 |         &lt;ol-map :center="[-38.7466364,-3.6199158]"&gt;&lt;/ol-map&gt;
 7 |       &lt;/template&gt;
 8 |     </pre>
 9 |   </div>
10 | </template>
11 | <style></style>
12 | <script>
13 | module.exports = {
14 |   name:"MapCenterExample"
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/examples/map-change.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :center="curr" @moveend="showcenter"> </ol-map>
 4 |     <button @click="move">Move it</button> {{curr}}
 5 |     <pre>
 6 |       &lt;template&gt;
 7 |         &lt;div&gt;
 8 |           &lt;ol-map :center="curr" @moveend="showcenter"&gt;&lt;/ol-map&gt;
 9 |           &lt;button @click="move"&gt;Move it&lt;/button&gt; { {curr}}
10 |         &lt;/div&gt;
11 |       &lt;/template&gt;
12 |       &lt;script&gt;
13 |       module.exports = {
14 |         name: "MapChangeExample",
15 |         data() {
16 |           return {
17 |             pos1: [-38.7466364, -3.6199158],
18 |             pos2: [-38.5792122, -3.7052233],
19 |             curr: [-38.5792122, -3.7052233]
20 |           };
21 |         },
22 |         methods: {
23 |           move() {
24 |             if (this.curr[0] == this.pos1[0])
25 |               this.curr = this.pos2;
26 |             else
27 |               this.curr = this.pos1;
28 |           },
29 |           showcenter(evt, pos) {
30 |             this.curr = pos;
31 |           }
32 |         }
33 |       }
34 |       &lt;/script&gt;
35 |     </pre>
36 |   </div>
37 | </template>
38 | <script>
39 | module.exports = {
40 |   name: "MapChangeExample",
41 |   data() {
42 |     return {
43 |       pos1: [-38.7466364, -3.6199158],
44 |       pos2: [-38.5792122, -3.7052233],
45 |       curr: [-38.5792122, -3.7052233]
46 |     };
47 |   },
48 |   methods: {
49 |     move() {
50 |       if (this.curr[0] == this.pos1[0])
51 |         this.curr = this.pos2;
52 |       else
53 |         this.curr = this.pos1;
54 |     },
55 |     showcenter(evt, pos) {
56 |       this.curr = pos;
57 |     }
58 |   }
59 | }
60 | </script>
61 | 


--------------------------------------------------------------------------------
/docs/examples/map-nodrag.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :nodrag="candrag"></ol-map>
 4 |     <button @click="candrag = !candrag">push so you can <span v-show="!candrag">NOT</span> drag</button>
 5 |     <pre>
 6 |         &lt;template>
 7 |           &lt;div>
 8 |             &lt;ol-map :nodrag="candrag">&lt;/ol-map>
 9 |             &lt;button @click="candrag = !candrag">push so you can &lt;span v-show="!candrag">NOT&lt;/span> drag&lt;/button>
10 |           &lt;/div>
11 |         &lt;/template>
12 |         &lt;script>
13 |         module.exports = {
14 |           name:"MapNoDragExample",
15 |           data(){
16 |             return {
17 |               candrag:true
18 |             };
19 |           }
20 |         };
21 |         &lt;/script>
22 |       </pre>
23 |   </div>
24 | </template>
25 | <style></style>
26 | <script>
27 | module.exports = {
28 |   name: "MapNoDragExample",
29 |   data() {
30 |     return {
31 |       candrag: true
32 |     };
33 |   }
34 | };
35 | </script>
36 | 


--------------------------------------------------------------------------------
/docs/examples/map-zoom-change.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :center="center"
 4 |             :zoom="zoom"
 5 |             @moveend="currentZoom"></ol-map>
 6 |     <label>Current zoom</label> <input type="range" min="1" max="20" v-model="zoom" /> {{zoom}}
 7 |     <pre>
 8 |       &lt;template&gt;
 9 |         &lt;div&gt;
10 |           &lt;ol-map :center="center" 
11 |                      :zoom="zoom" 
12 |                      @moveend="currentZoom"&gt;&lt;/ol-map&gt;
13 |           &lt;label&gt;Current zoom&lt;/label&gt; &lt;input type="range" min="1" max="20" v-model="zoom" /&gt; { {zoom}}
14 |         &lt;/div&gt;
15 |       &lt;/template&gt;
16 |       &lt;script&gt;
17 |       module.exports = {
18 |         name: "MapZoomExample",
19 |         data() {
20 |           return {
21 |             center: [-38.9313415, -4.2642149],
22 |             zoom: 14
23 |           }
24 |         },
25 |         methods: {
26 |           currentZoom(evt, lonlat, zoom) {
27 |             this.zoom = zoom;
28 |           }
29 |         }
30 |       };
31 |       &lt;/script&gt;
32 |     </pre>
33 |   </div>
34 | </template>
35 | <style></style>
36 | <script>
37 | module.exports = {
38 |   name: "MapZoomChangeExample",
39 |   data() {
40 |     return {
41 |       center: [-38.9313415, -4.2642149],
42 |       zoom: 14
43 |     }
44 |   },
45 |   methods: {
46 |     currentZoom(evt, lonlat, zoom) {
47 |       this.zoom = zoom;
48 |     }
49 |   }
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/docs/examples/map-zoom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :center="center"
 4 |             zoom="7"
 5 |             @moveend="currentZoom"></ol-map>
 6 |     <label>Current zoom</label> {{zoom}}
 7 |     <pre>
 8 |       &lt;template&gt;
 9 |         &lt;div&gt;
10 |           &lt;ol-map :center="center" 
11 |                      zoom="7" 
12 |                      @moveend="currentZoom"&gt;&lt;/ol-map&gt;
13 |           &lt;label&gt;Current zoom&lt;/label&gt; { {zoom}}
14 |         &lt;/div&gt;
15 |       &lt;/template&gt;
16 |       &lt;script&gt;
17 |       module.exports = {
18 |         name: "MapZoomExample",
19 |         data() {
20 |           return {
21 |             center: [-38.7466364, -3.6199158],
22 |             zoom: ""
23 |           }
24 |         },
25 |         methods: {
26 |           currentZoom(evt, lonlat, zoom) {
27 |             this.zoom = zoom;
28 |           }
29 |         }
30 |       };
31 |       &lt;/script&gt;
32 |     </pre>
33 |   </div>
34 | </template>
35 | <style></style>
36 | <script>
37 | module.exports = {
38 |   name: "MapZoomExample",
39 |   data() {
40 |     return {
41 |       center: [-38.7466364, -3.6199158],
42 |       zoom: ""
43 |     }
44 |   },
45 |   methods: {
46 |     currentZoom(evt, lonlat, zoom) {
47 |       this.zoom = zoom;
48 |     }
49 |   }
50 | };
51 | </script>
52 | 


--------------------------------------------------------------------------------
/docs/examples/map.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map></ol-map>
 4 |     <pre>
 5 |       &lt;template&gt;
 6 |         &lt;ol-map&gt;&lt;/ol-map&gt;
 7 |       &lt;/template&gt;
 8 |     </pre>
 9 |   </div>
10 | </template>
11 | <style></style>
12 | <script>
13 | module.exports = {
14 |   name:"MapExample"
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/docs/examples/marker-change.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :center="lonlat" @moveend="move">
 4 |       <ol-marker :coords="lonlat"></ol-marker>
 5 |     </ol-map>
 6 |     {{lonlat}}
 7 |     <pre>
 8 |       &lt;template&gt;
 9 |         &lt;div&gt;
10 |           &lt;ol-map :center="lonlat" @moveend="move"&gt;
11 |             &lt;ol-marker :coords="lonlat"&gt;&lt;/ol-marker&gt;
12 |           &lt;/ol-map&gt;
13 |           { {lonlat}}
14 |         &lt;/div&gt;
15 |       &lt;/template&gt;
16 |       &lt;script&gt;
17 |       module.exports = {
18 |         name: "MarkerPosExample",
19 |         data() {
20 |           return {
21 |             lonlat: [-40.900025, -3.823124]
22 |           };
23 |         },
24 |         methods: {
25 |           move(evt, pos) {
26 |             this.lonlat = pos;
27 |           }
28 |         }
29 |       };
30 |       &lt;/script&gt;
31 |     </pre>
32 |   </div>
33 | </template>
34 | <style></style>
35 | <script>
36 | module.exports = {
37 |   name: "MarkerPosExample",
38 |   data() {
39 |     return {
40 |       lonlat: [-40.900025, -3.823124]
41 |     };
42 |   },
43 |   methods: {
44 |     move(evt, pos) {
45 |       this.lonlat = pos;
46 |     }
47 |   }
48 | };
49 | </script>
50 | 


--------------------------------------------------------------------------------
/docs/examples/marker-icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map>
 4 |       <ol-marker icon-image-url="./imgs/marker-blue.png"></ol-marker>
 5 |     </ol-map>
 6 |     <pre>
 7 |       &lt;template&gt;
 8 |         &lt;ol-map&gt;
 9 |           &lt;ol-marker icon-image-url="./imgs/marker-blue.png"&gt;&lt;/ol-marker&gt;
10 |         &lt;/ol-map&gt;
11 |       &lt;/template&gt;
12 |     </pre>
13 |   </div>
14 | </template>
15 | <style></style>
16 | <script>
17 | module.exports = {
18 |   name:"IconExample"
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/examples/marker-pos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :center="[-38.7307940,-3.8897860]">
 4 |       <ol-marker :coords="[-38.7676903,-3.8884858]"></ol-marker>
 5 |     </ol-map>
 6 |     <pre>
 7 |       &lt;template&gt;
 8 |         &lt;ol-map :center="[-38.7307940,-3.8897860]"&gt;
 9 |           &lt;ol-marker :coords="[-38.7776903,-3.9584858]"&gt;&lt;/ol-marker&gt;
10 |         &lt;/ol-map&gt;
11 |       &lt;/template&gt;
12 |     </pre>
13 |   </div>
14 | </template>
15 | <style></style>
16 | <script>
17 | module.exports = {
18 |   name:"MarkerPosExample"
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/examples/marker-select.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map :center="center" @selfeature="getmarker" zoom="7">
 4 |       <ol-marker :coords="pos1"
 5 |                  :icon-image-url="img1"></ol-marker>
 6 |       <ol-marker :coords="pos2"
 7 |                  :icon-image-url="img2"></ol-marker>
 8 |       <ol-marker :coords="pos3"
 9 |                  :icon-image-url="img3"></ol-marker>
10 |     </ol-map>
11 |     <label>Current Position: </label> {{selpos}}
12 |     <pre>
13 |       &lt;template&gt;
14 |         &lt;div&gt;
15 |         &lt;ol-map :center="center" @selfeature="getmarker" zoom="7">
16 |           &lt;ol-marker :coords="pos1"
17 |                     :icon-image-url="img1">&lt;/ol-marker>
18 |           &lt;ol-marker :coords="pos2"
19 |                     :icon-image-url="img2">&lt;/ol-marker>
20 |           &lt;ol-marker :coords="pos3"
21 |                     :icon-image-url="img3">&lt;/ol-marker>
22 |         &lt;/ol-map>
23 |         &lt;label>Current Position: &lt;/label> { {selpos}}
24 |         &lt;/div&gt;
25 |       &lt;/template&gt;
26 |       &lt;script&gt;
27 |       module.exports = {
28 |         name: "MarkerSelectionExample",
29 |         data() {
30 |           return {
31 |             center: [-38.49036105926541, -4.20337354770561],
32 |             img1: "./imgs/marker-red.png",
33 |             img2: "./imgs/marker-green.png",
34 |             img3: "./imgs/marker-blue.png",
35 |             pos1: [-39.0249678539601, -4.971293155228395],
36 |             pos2: [-38.526720707353626, -3.7341277429261197],
37 |             pos3: [-37.766775791582134, -4.565608102361821],
38 |             selpos: ""
39 |           };
40 |         },
41 |         methods: {
42 |           getmarker(marker) {
43 |             this.selpos = marker.vueComponent.coords;
44 |           },
45 |           updatecenter(evt, pos) {
46 |             this.center = pos;
47 |           }
48 |         }
49 |       }
50 |       &lt;/script&gt;
51 |     </pre>
52 |   </div>
53 | </template>
54 | <script>
55 | module.exports = {
56 |   name: "MarkerSelectionExample",
57 |   data() {
58 |     return {
59 |       center: [-38.49036105926541, -4.20337354770561],
60 |       img1: "./imgs/marker-red.png",
61 |       img2: "./imgs/marker-green.png",
62 |       img3: "./imgs/marker-blue.png",
63 |       pos1: [-39.0249678539601, -4.971293155228395],
64 |       pos2: [-38.526720707353626, -3.7341277429261197],
65 |       pos3: [-37.766775791582134, -4.565608102361821],
66 |       selpos: ""
67 |     };
68 |   },
69 |   methods: {
70 |     getmarker(marker) {
71 |       this.selpos = marker.vueComponent.coords;
72 |     },
73 |     updatecenter(evt, pos) {
74 |       this.center = pos;
75 |     }
76 |   }
77 | }
78 | </script>
79 | 


--------------------------------------------------------------------------------
/docs/examples/marker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ol-map>
 4 |       <ol-marker></ol-marker>
 5 |     </ol-map>
 6 |     <pre>
 7 |       &lt;template&gt;
 8 |         &lt;ol-map&gt;
 9 |           &lt;ol-marker&gt;&lt;/ol-marker&gt;
10 |         &lt;/ol-map&gt;
11 |       &lt;/template&gt;
12 |     </pre>
13 |   </div>
14 | </template>
15 | <style></style>
16 | <script>
17 | module.exports = {
18 |   name:"MarkerExample"
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/docs/imgs/marker-blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sombriks/vue-openlayers/b743e735daf18e01be621396bfb29d83891e2a09/docs/imgs/marker-blue.png


--------------------------------------------------------------------------------
/docs/imgs/marker-green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sombriks/vue-openlayers/b743e735daf18e01be621396bfb29d83891e2a09/docs/imgs/marker-green.png


--------------------------------------------------------------------------------
/docs/imgs/marker-red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sombriks/vue-openlayers/b743e735daf18e01be621396bfb29d83891e2a09/docs/imgs/marker-red.png


--------------------------------------------------------------------------------
/docs/imgs/patreon-medium-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sombriks/vue-openlayers/b743e735daf18e01be621396bfb29d83891e2a09/docs/imgs/patreon-medium-button.png


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Vue + Openlayers</title>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <!-- Place this tag in your head or just before your close body tag. -->
 8 |     <script async defer src="https://buttons.github.io/buttons.js"></script>
 9 |   </head>
10 |   <body>
11 |     <!-- Place this tag where you want the button to render. -->
12 |     <a class="github-button" href="https://github.com/sombriks/vue-openlayers" data-icon="octicon-star" data-count-href="/sombriks/vue-openlayers/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star sombriks/vue-openlayers on GitHub">Star</a>
13 |     <!-- Place this tag where you want the button to render. -->
14 |     <a class="github-button" href="https://github.com/sombriks/vue-openlayers/issues" data-icon="octicon-issue-opened" data-show-count="true" data-count-aria-label="# issues on GitHub" aria-label="Issue sombriks/vue-openlayers on GitHub">Issue</a>
15 |     <!-- Place this tag where you want the button to render. -->
16 |     <a class="github-button" href="https://github.com/sombriks" data-count-href="/sombriks/followers" data-show-count="true" data-count-aria-label="# followers on GitHub" aria-label="Follow @sombriks on GitHub">Follow @sombriks</a>
17 |     <!-- -->
18 |     <a href="https://www.patreon.com/user?u=4566034" target="patreon" title="Buy me a beer">
19 |       <img src="imgs/patreon-medium-button.png" alt="patreon"/>
20 |     </a>
21 |     <hr/>
22 |     <div id="mountpoint"></div>
23 |     <script type="text/javascript" src="build.js"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/docs/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |     <div class="col-xs-3">
 4 |       <h5>Overview</h5>
 5 |       <ul>
 6 |         <li><router-link to="/introduction">Introduction</router-link></li>
 7 |         <li><router-link to="/roadmap">Roadmap</router-link></li>
 8 |       </ul>
 9 |       <h5>Examples</h5>
10 |       <ul>
11 |         <li><router-link to="/map">Map</router-link></li>
12 |         <li><router-link to="/mapcenter">Map Center</router-link></li>
13 |         <li><router-link to="/mapchange">Map Center Change</router-link></li>
14 |         <li><router-link to="/mapnodrag">Map Disable Drag</router-link></li>
15 |         <li><router-link to="/mapauto">Map Autocenter</router-link></li>
16 |         <li><router-link to="/mapzoom">Map Zoom</router-link></li>
17 |         <li><router-link to="/mapzoomchange">Map Zoom Change</router-link></li>
18 |         <li><router-link to="/marker">Marker</router-link></li>
19 |         <li><router-link to="/markerposition">Marker Position</router-link></li>
20 |         <li><router-link to="/markerchange">Marker Change Position</router-link></li>
21 |         <li><router-link to="/markericon">Marker Icon</router-link></li>
22 |         <li><router-link to="/markerselection">Marker Selection</router-link></li>
23 |         <li><router-link to="/balloon">Balloon</router-link></li>
24 |         <li><router-link to="/balloonanchor">Balloon Anchor</router-link></li>
25 |         <li><router-link to="/balloonchangepos">Balloon Position Change</router-link></li>
26 |       </ul>
27 |     </div>
28 |     <div class="col-xs-9">
29 |       <router-view></router-view>
30 |     </div>
31 |   </div>
32 | </template>
33 | <script>
34 |   module.exports = {
35 |     name: "DocsVueOpenLayers"
36 |   };
37 | </script>
38 | <style>
39 | 
40 | </style>


--------------------------------------------------------------------------------
/docs/introduction.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>
 4 |       Vue Openlayers
 5 |     </h1>
 6 |     <p>
 7 |       Simple wrapper for openlayers map toolkit
 8 |     </p>
 9 |     <p class="red">
10 |       Please see <a href="https://github.com/MelihAltintas/vue3-openlayers">This project</a>
11 |       for a maintained version.
12 |     </p>
13 |     <h2>Install</h2>
14 |     <pre>npm install vue-openlayers --save</pre>
15 |     <h2>Dependencies</h2>
16 |     <ul>
17 |       <li>Vue 2.1+</li>
18 |       <li>Openlayers 4.0+</li>
19 |     </ul>
20 |     <h2>Usage</h2>
21 |     <pre>
22 | // require the openlayers css on your project.
23 | require("../node_modules/openlayers/css/ol.css");
24 | 
25 | // require vue and any other shiny library
26 | const Vue = require('vue');
27 | // ...
28 | // at some point require vue-openlayers 
29 | const VueOpenLayers = require("vue-openlayers");
30 | // ...
31 | // then install the plugin
32 | Vue.use(VueOpenLayers);
33 | // ...
34 | // now you can see the <a href="#/map">examples</a> on how to use it on .vue components
35 |     </pre>
36 |   </div>
37 | </template>
38 | <style scoped>
39 | .red {
40 |   color:red;
41 |   font-weight: bolder;
42 | }
43 | </style>
44 | <script>
45 | module.exports = {
46 |   name:"Introduction"
47 | };
48 | </script>
49 | 


--------------------------------------------------------------------------------
/docs/roadmap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>
 4 |       Roadmap
 5 |     </h1>
 6 |     <p>
 7 |       This project aims a few goals and we'll log them there. Eventually the goals will appear as <a href="https://github.com/sombriks/vue-openlayers/issues" target="_blank">github issues</a> as well.
 8 |     </p>
 9 |     <h2>V0.9.0 (not released yet)</h2>
10 |     <ul>
11 |       <li>Add search widget/datasource/provider</li>
12 |       <li>Add results widget/datasource/provider</li>
13 |     </ul>
14 |     <h2>V0.8.0 (not released yet)</h2>
15 |     <ul>
16 |       <li>Enable or disable map features</li>
17 |     </ul>
18 |     <h2>V0.7.0 (not released yet)</h2>
19 |     <ul>
20 |       <li>Add polygons support</li>
21 |       <li>Add lines support</li>
22 |     </ul>
23 |     <h2>V0.6.0 (not released yet)</h2>
24 |     <ul>
25 |       <li>Add es6 variants for the components</li>
26 |       <li>Smaller code cleanups</li>
27 |     </ul>
28 |     <h2>V0.5.5</h2>
29 |     <ul>
30 |       <li>Add "nodrag" map property</li>
31 |       <li>Smaller code cleanups</li>
32 |     </ul>
33 |     <h2>V0.4.5</h2>
34 |     <ul>
35 |       <li>fixed (hopefully) a memory leak</li>
36 |       <li>fixed missing map events</li>
37 |     </ul>
38 |     <h2>V0.4.4</h2>
39 |     <ul>
40 |       <li>tried to fix a problem with a few samsung devices</li>
41 |       <li>exposed the "zoom" in the moveend which for some reason wasn't here</li>
42 |       <li>added a few more examples</li>
43 |     </ul>
44 |     <h2>V0.4.3</h2>
45 |     <ul>
46 |       <li>made marker bigger</li>
47 |     </ul>
48 |     <h2>V0.4.2</h2>
49 |     <ul>
50 |       <li>fixed small problem on balloon anchor behavior</li>
51 |       <li>removed one explicit openlayer css dependency, since it must be on target project</li>
52 |     </ul>
53 |     <h2>V0.4.1</h2>
54 |     <ul>
55 |       <li>Changing versioning to better conform with <a href="http://semver.org/">semantical versioning</a></li>
56 |       <li>Added more examples</li>
57 |     </ul>
58 |     <h2>V0.0.4</h2>
59 |     <ul>
60 |       <li>Basic support for balloon tooltips for markers</li>
61 |       <li>Smaller code cleanups</li>
62 |     </ul>
63 |     <h2>V0.0.3 (first useful version)</h2>
64 |     <ul>
65 |       <li>Basic support for map and marker</li>
66 |       <li>Suited for commonsjs (node) style export/require</li>
67 |     </ul>
68 |   </div>
69 | </template>
70 | <style></style>
71 | <script>
72 | module.exports = {
73 |   name:"Roadmap"
74 | };
75 | </script>
76 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-openlayers",
 3 |   "description": "humble wrapper for the powerful openlayers map api",
 4 |   "main": "src/main.js",
 5 |   "scripts": {
 6 |     "build": "make docs",
 7 |     "docs": "make docs",
 8 |     "dev": "make dev",
 9 |     "release": "make release"
10 |   },
11 |   "version": "0.5.6",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/sombriks/vue-openlayers.git"
15 |   },
16 |   "keywords": [
17 |     "vue",
18 |     "openlayers",
19 |     "map",
20 |     "component"
21 |   ],
22 |   "author": "Leonardo Silveira <sombriks@gmail.com>",
23 |   "license": "BSD-2-Clause",
24 |   "bugs": {
25 |     "url": "https://github.com/sombriks/vue-openlayers/issues"
26 |   },
27 |   "homepage": "https://github.com/sombriks/vue-openlayers#readme",
28 |   "dependencies": {
29 |     "openlayers": "^4.0.1",
30 |     "vue": "^2.1.10"
31 |   },
32 |   "devDependencies": {
33 |     "browserify": "^14.1.0",
34 |     "browserify-css": "^0.10.0",
35 |     "budo": "^9.4.7",
36 |     "cross-env": "^3.1.4",
37 |     "flexboxgrid": "^6.3.1",
38 |     "make": "^0.8.1",
39 |     "vue-router": "^2.2.1",
40 |     "vueify": "^9.4.0"
41 |   },
42 |   "browserify": {
43 |     "transform": [
44 |       "browserify-css",
45 |       "vueify"
46 |     ]
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | /* 
 2 |  * To change this license header, choose License Headers in Project Properties.
 3 |  * To change this template file, choose Tools | Templates
 4 |  * and open the template in the editor.
 5 |  */
 6 | 
 7 | const olMap = require("./ol-map.vue");
 8 | const olMarker = require("./ol-marker.vue");
 9 | const olBalloon = require("./ol-balloon.vue");
10 | 
11 | module.exports = {
12 |   install: function (Vue, options) {
13 |     // wiring project components
14 |     Vue.component("ol-map", olMap);
15 |     Vue.component("ol-marker", olMarker);
16 |     Vue.component("ol-balloon", olBalloon);
17 |   }
18 | };
19 | 


--------------------------------------------------------------------------------
/src/ol-balloon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | const ol = require("openlayers");
 8 | module.exports = {
 9 |   name: "OLBalloon",
10 |   props: {
11 |     coords: {
12 |       type: Array,
13 |       default: _ => [-38.5431, -3.71722]
14 |     },
15 |     balloonData: Object,
16 |     anchor: {
17 |       type: Array,
18 |       default: _ => [0, 0]
19 |     }
20 |   },
21 |   data() {
22 |     return {
23 |       feature: null
24 |     };
25 |   },
26 |   watch: {
27 |     coords(val) {
28 |       this.feature.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(val)));
29 |       this.updatepos();
30 |     }
31 |   },
32 |   mounted() {
33 |     // this.$el.parentElement.removeChild(this.$el)
34 |     // this.$el.style.display="none";
35 |     this.$el.style.position = "absolute";
36 |     this.$el.style.zIndex = "3000";
37 |     this.feature = new ol.Feature({
38 |       geometry: new ol.geom.Point(ol.proj.fromLonLat(this.coords))
39 |     });
40 |     this.vectorSource = new ol.source.Vector({
41 |       features: [this.feature]
42 |     });
43 |     this.vectorLayer = new ol.layer.Vector({
44 |       source: this.vectorSource
45 |     });
46 | 
47 |     this.$nextTick(t => {
48 |       this.$parent.$emit("addballoon", this);
49 |     });
50 | 
51 |     this.vectorLayer.on("render", this.updatepos);
52 | 
53 |   },
54 |   beforeDestroy() {
55 |     // ask for destruction
56 |     this.$nextTick(t => this.$parent.$emit("removeballoon", this));
57 |   },
58 |   methods: {
59 |     updatepos() {
60 |       const map = this.$parent.olmap;
61 |       const geometry = this.feature.getGeometry();
62 |       const coordinate = geometry.getCoordinates();
63 |       const pixel = map.getPixelFromCoordinate(coordinate);
64 |       if (!pixel) {
65 |         this.$el.style.display = "none";
66 |       } else {
67 |         let a = this.$parent.$el.offsetLeft;
68 |         let b = this.$parent.$el.offsetTop;
69 |         let x = (pixel[0] + a);
70 |         let y = (pixel[1] + b);
71 |         let w = this.$parent.$el.offsetWidth + a;
72 |         let h = this.$parent.$el.offsetHeight + b;
73 |         if (x - a < 0 || y - b < 0 || x > w || y > h) {
74 |           this.$el.style.display = "none";
75 |         } else {
76 |           x -= this.anchor[0];
77 |           y -= this.anchor[1];
78 |           this.$el.style.display = "";
79 |           this.$el.style.left = x + "px";
80 |           this.$el.style.top = y + "px";
81 |         }
82 |       }
83 |     }
84 |   }
85 | };
86 | </script>
87 | 


--------------------------------------------------------------------------------
/src/ol-map.vue:
--------------------------------------------------------------------------------
  1 | <!-- ol-map.vue -->
  2 | <template>
  3 |   <div>
  4 |     <slot></slot>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | const ol = require("openlayers");
 10 | module.exports = {
 11 |   name: "OLMap",
 12 |   props: {
 13 |     autoCenter: Boolean,
 14 |     center: {
 15 |       type: Array,
 16 |       default: _ => [-38.5431, -3.71722]
 17 |     },
 18 |     zoom: {
 19 |       type: [Number, String],
 20 |       default: 13
 21 |     },
 22 |     nodrag: Boolean
 23 |   },
 24 |   data() {
 25 |     return {
 26 |       olmap: null
 27 |     };
 28 |   },
 29 |   mounted() {
 30 |     this.$el.style.overflow = "hidden";
 31 |     this.olmap = new ol.Map({
 32 |       target: this.$el,
 33 |       loadTilesWhileAnimating: true,
 34 |       layers: [
 35 |         new ol.layer.Tile({
 36 |           source: new ol.source.OSM()
 37 |         })
 38 |       ],
 39 |       view: new ol.View({
 40 |         center: ol.proj.fromLonLat(this.center),
 41 |         zoom: this.zoom
 42 |       })
 43 |     });
 44 | 
 45 |     // http://openlayers.org/en/latest/apidoc/ol.Map.html#on
 46 |     this.olmap.on("moveend", ev => {
 47 |       // floating openlayer event to inside the vue's ViewModel
 48 |       const center = ev.map.getView().getCenter();
 49 |       const zoom = ev.map.getView().getZoom();
 50 |       const lonlat = ol.proj.toLonLat(center);
 51 |       this.$emit("moveend", ev, lonlat, zoom);
 52 |     });
 53 | 
 54 |     this.olmap.on("pointerdrag", ev => {
 55 |       const feature = this.olmap.forEachFeatureAtPixel(ev.pixel, feature => feature);
 56 |       const center = ev.map.getView().getCenter();
 57 |       const zoom = ev.map.getView().getZoom();
 58 |       const lonlat = ol.proj.toLonLat(center);
 59 |       this.$emit("pointerdrag", ev, lonlat, zoom, feature);
 60 |     });
 61 | 
 62 |     this.olmap.on("click", ev => {
 63 |       // console.log(ev.pixel)
 64 |       const feature = this.olmap.forEachFeatureAtPixel(ev.pixel, feature => feature);
 65 |       if (feature)
 66 |         this.$emit("selfeature", feature);
 67 |       this.$emit("click", ev, feature);
 68 | 
 69 |     });
 70 | 
 71 |     if (this.autoCenter)
 72 |       this.autocenter();
 73 | 
 74 |     if (this.nodrag)
 75 |       this.enabledisabledragzoom();
 76 | 
 77 |     this.$on("addmarker", m => this.olmap.addLayer(m.vectorLayer));
 78 | 
 79 |     this.$on("removemarker", m => this.olmap.removeLayer(m.vectorLayer));
 80 | 
 81 |     this.$on("addballoon", b => this.olmap.addLayer(b.vectorLayer));
 82 | 
 83 |     this.$on("removeballoon", b => this.olmap.removeLayer(b.vectorLayer));
 84 |   },
 85 |   watch: {
 86 |     center(val) {
 87 |       this.olmap.getView().setCenter(ol.proj.fromLonLat(val));
 88 |     },
 89 |     autoCenter(val) {
 90 |       if (val)
 91 |         this.autocenter();
 92 |     },
 93 |     zoom(val) {
 94 |       console.log(val)
 95 |       this.olmap.getView().setZoom(val);
 96 |     },
 97 |     nodrag(val) {
 98 |       this.enabledisabledragzoom();
 99 |     }
100 |   },
101 |   methods: {
102 |     autocenter() {
103 |       if ("geolocation" in navigator) {
104 |         /* geolocation is available */
105 |         navigator.geolocation.getCurrentPosition(pos => {
106 |           if (this.autoCenter) {
107 |             this.setcenter([pos.coords.longitude, pos.coords.latitude]);
108 |           }
109 |         }, (err) => {
110 |           console.log(err);
111 |         });
112 |       }
113 |     },
114 |     setcenter(latlng) {
115 |       this.center[0] = latlng[0];
116 |       this.center[1] = latlng[1];
117 |       this.olmap.getView().setCenter(ol.proj.fromLonLat(this.center));
118 |     },
119 |     enabledisabledragzoom() {
120 |       this.olmap.getInteractions().forEach(e => {
121 |         e.setActive(!this.nodrag);
122 |       });
123 |     }
124 |   }
125 | };
126 | </script>
127 | 
128 | <style>
129 | 
130 | </style>


--------------------------------------------------------------------------------
/src/ol-marker.vue:
--------------------------------------------------------------------------------
 1 | <!-- ol-marker.vue -->
 2 | <template>
 3 |   <div>
 4 |     <slot></slot>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | const ol = require("openlayers");
 9 | module.exports = {
10 |   name: "OLMarker",
11 |   props: {
12 |     coords: {
13 |       type: Array,
14 |       default: _ => [-38.5431, -3.71722]
15 |     },
16 |     markerradius: {
17 |       type: [Number, String],
18 |       default: 12
19 |     },
20 |     markerData: [Object, String, Number, Function],
21 |     iconImageUrl: String
22 |   },
23 |   data() {
24 |     return {
25 |       feature: null,
26 |       style: null,
27 |       vectorSource: null,
28 |       vectorLayer: null
29 |     };
30 |   },
31 |   watch: {
32 |     coords(val) {
33 |       this.feature.setGeometry(new ol.geom.Point(ol.proj.fromLonLat(val)));
34 |       this.$emit("newcoords", val);
35 |     },
36 |     iconImageUrl(val) {
37 |       this.style.setImage(new ol.style.Icon({
38 |         src: this.iconImageUrl,
39 |         anchor: [0.5, 1]
40 |       }));
41 |       this.$emit("newmarker");
42 |       // console.log()
43 |       // this.style.image.src = val;
44 |     }
45 |   },
46 |   mounted() {
47 |     // http://openlayers.org/en/latest/examples/icon-color.html?q=feature
48 |     this.feature = new ol.Feature({
49 |       geometry: new ol.geom.Point(ol.proj.fromLonLat(this.coords))
50 |     });
51 |     this.feature.vueComponent = this;
52 |     if (this.iconImageUrl) {
53 |       this.style = new ol.style.Style({
54 |         image: new ol.style.Icon({
55 |           src: this.iconImageUrl,
56 |           anchor: [0.5, 1]
57 |         })
58 |       });
59 |     } else {
60 |       this.style = new ol.style.Style({
61 |         image: new ol.style.Circle({
62 |           radius: this.markerradius,
63 |           snapToPixel: false,
64 |           fill: new ol.style.Fill({ color: 'blue' }),
65 |           stroke: new ol.style.Stroke({
66 |             color: 'white', width: 2
67 |           })
68 |         })
69 |       });
70 |     }
71 |     this.feature.setStyle(this.style);
72 |     this.vectorSource = new ol.source.Vector({
73 |       features: [this.feature]
74 |     });
75 |     this.vectorLayer = new ol.layer.Vector({
76 |       source: this.vectorSource
77 |     });
78 |     // tell papa to create me
79 |     this.$nextTick(t => this.$parent.$emit("addmarker", this));
80 |   },
81 |   beforeDestroy() {
82 |     // ask for destruction
83 |     this.$nextTick(t => this.$parent.$emit("removemarker", this));
84 |   }
85 | };
86 | </script>
87 | <style>
88 | /* TODO vale expor a complexidade das 'features' do openlayer aqui? */
89 | </style>
90 | 


--------------------------------------------------------------------------------