Merge pull request #12 from maltaesousa/recenter

add markers
sitn · May 22, 2019 · 13c5dde · 13c5dde
2 parents eaad115 + 1c26c53
commit 13c5dde
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 9 deletions.
diff --git a/img/marker.svg b/img/marker.svg
diff --git a/index.html b/index.html
@@ -129,6 +129,58 @@ <h3>Exemple 3</h3>
 
     <hr>
 
+    <h3>Exemple 4</h3>
+    <p>Ajouter, modifier et supprimer un marker selon une paire de coordonnées Est-Nord. Recenter la carte.</p>
+    <div class="row form-group">
+      <div class="col">
+        <label for="coorde">Est</label>
+        <input class="form-control" type="number" name="coorde" id="coorde" value="2540000">
+      </div>
+      <div class="col">
+        <label for="coorde">Nord</label>
+        <input class="form-control" type="number" name="coordn" id="coordn" value="1203000">
+      </div>
+    </div>
+    <div class="form-group">
+      <button class="btn btn-primary" onclick="addMarker()">Ajouter</button>
+      <button class="btn btn-info" onclick="updateMarker()">Mettre à jour</button>
+      <button class="btn btn-danger" onclick="map4.removeMarker()">Supprimer</button>
+      <button class="btn btn-dark" onclick="recenterMap()">Recentrer la carte</button>
+    </div>
+    <div id="sitn-map-4" class="map"></div>
+
+    <script>
+      // Création de la carte
+      map4 = new SitnMap()
+      map4.createMap({
+        target: 'sitn-map-4'
+      })
+
+      // construction du tableau de coordonnées à partir des inputs
+      getCoord = function() {
+        return [$('#coorde').val(), $('#coordn').val()]
+      }
+
+      // ajouter un marker en lui passant une couleur (optionnel)
+      addMarker = function() {
+        map4.addMarker(getCoord(), "#4286f4")
+      }
+
+      // mettre à jour un marker
+      updateMarker = function() {
+        map4.updateMarker(getCoord())
+      }
+
+      // recentrer la carte à partir d'une paire 
+      // de coordonées et d'un niveau de zoom
+      recenterMap = function() {
+        map4.recenterMap(getCoord(), 14)
+      }
+
+    </script>
+
+    <hr>
+
   </div>
 </body>
 

diff --git a/js/sitnlayers.js b/js/sitnlayers.js
@@ -6,7 +6,7 @@
     const _crs = 'EPSG:2056'
     const _WMTSurl = 'https://sitn.ne.ch/web_getcapabilities/WMTSGetCapabilities95.xml'
     const _drawSource = new ol.source.Vector()
-    const _vectorLayer = new ol.layer.Vector({ source: _drawSource })
+    const _markerSource = new ol.source.Vector()
     const _sitnBaseLayers = {
       'plan_ville': 'Plan de ville',
       'plan_cadastral': 'Plan cadastral',
@@ -17,6 +17,8 @@
     var _target
     var _selectTarget
     var _drawSimpleGeom = false
+    var _map = false
+    var _markerColor
 
     sitnLayers.sitnCurrentBaseLayer = new ol.layer.Tile()
 
@@ -72,11 +74,12 @@
       _selectTarget = options['selectTarget']
       _drawSimpleGeom = options['drawSimpleGeom'] // controls wether or not an user can draw multiple geometries
       let _mainbar
-      let _map = new ol.Map({
+      _map = new ol.Map({
         target: _target,
         layers: [
           sitnLayers.sitnCurrentBaseLayer,
-          _vectorLayer
+          new ol.layer.Vector({ source: _drawSource }),
+          new ol.layer.Vector({ source: _markerSource })
         ],
         view: sitnLayers.view
       })
@@ -123,7 +126,7 @@
               if (!features.getLength()) console.log('Select an object first...')
               else console.log(features.getLength() + ' object(s) deleted.')
               for (var i = 0, f; (f = features.item(i)); i++) {
-                _vectorLayer.getSource().removeFeature(f)
+                _drawSource.removeFeature(f)
               }
               selectCtrl.getInteraction().getFeatures().clear()
             }
@@ -147,7 +150,7 @@
             title: 'Point',
             interaction: new ol.interaction.Draw({
               type: 'Point',
-              source: _vectorLayer.getSource()
+              source: _drawSource
             })
           })
           editbar.addControl(pedit)
@@ -159,7 +162,7 @@
               title: 'LineString',
               interaction: new ol.interaction.Draw({
                 type: 'LineString',
-                source: _vectorLayer.getSource(),
+                source: _drawSource,
                 // Count inserted points
                 geometryFunction: function (coordinates, geometry) {
                   if (geometry) {
@@ -199,7 +202,7 @@
               title: 'Polygon',
               interaction: new ol.interaction.Draw({
                 type: 'Polygon',
-                source: _vectorLayer.getSource(),
+                source: _drawSource,
                 // Count inserted points
                 geometryFunction: function (coordinates, geometry) {
                   this.nbpts = coordinates[0].length
@@ -240,23 +243,73 @@
         });
       }
     }
+
     sitnLayers.loadWKT = function (wkt) {
       let format = new ol.format.WKT()
       let data = wkt;
       let features = format.readFeatures(data, {
         dataProjection: _crs,
         featureProjection: _crs
       })
-      _vectorLayer.getSource().addFeatures(features)
+      _drawSource.addFeatures(features)
     }
 
     sitnLayers.getWKTData = function () {
-      let features = _vectorLayer.getSource().getFeatures()
+      let features = _drawSource.getFeatures()
       if (features) {
         let wktData = new ol.format.WKT().writeFeatures(features)
         return wktData
       }
     }
+
+    /**
+     * Adds a marker based on coordinates: an array of 2 numbers
+     * and clears another existing maker before. The color is optional
+     */
+    sitnLayers.addMarker = function (coordinates, color) {
+      _markerColor = color
+      _markerSource.clear()
+      let marker = new ol.Feature({
+        geometry: new ol.geom.Point(coordinates)
+      })
+      marker.setStyle(new ol.style.Style({
+        image: new ol.style.Icon({
+          anchor: [0.5, 1],
+          color: _markerColor || '#8959A8',
+          opacity: 1,
+          src: '../img/marker.svg'
+        })
+      }))
+      _markerSource.addFeature(marker)
+    }
+
+    /**
+     * Updates marker position based
+     * on coordinates: an array of 2 numbers
+     */
+    sitnLayers.updateMarker = function (coordinates) {
+      sitnLayers.addMarker(coordinates)
+    }
+
+    /**
+     * Removes marker
+     */
+    sitnLayers.removeMarker = function () {
+      _markerSource.clear()
+    }
+
+    /**
+     * Recenters the map based
+     * on coordinates: an array of 2 numbers
+     */
+    sitnLayers.recenterMap = function (coordinates, zoomLevel) {
+      if (_map) {
+        let view = _map.getView()
+        view.setCenter(coordinates)
+        view.setZoom(zoomLevel)
+      }
+    }
+
     return sitnLayers
   }