Draw features with WKT string

Draw features with WKT string

Draw features with WKT string

main.js
var map = new cercaliagl.Map({
  target: 'map',
  controls: [],
  disableDragWhenEditing: true
});
map.whenReady(function () {
  var drawControl = map.getControlByName('draw');
  drawControl.setDisableDragWhenEditing(true);
  var linestring = new cercaliagl.Feature({
    wkt: 'LINESTRING (2.186571267 41.412635584, 2.187218054 41.423617094, 2.183651742 41.428863756)',
    simpleLabel: new cercaliagl.SimpleLabel({
      text: 'LineString Demo'
    }),
    draggable: true,
    editable: true,
    visible: true,
    onClick: function onClick() {
      linestring.setEditable(true);
    }
  });
  map.addFeature(linestring);
  var linestringHalf = new cercaliagl.Feature({
    wkt: getPartialLinestring(linestring, 0, 0.8),
    zIndex: 4,
    editable: true,
    strokeColor: '#ff0000'
  });
  map.addFeature(linestringHalf);
  var multilinestring = new cercaliagl.Feature({
    wkt: 'MULTILINESTRING( (2.199300394 41.421345211, 2.201582115 41.419648008, 2.202812807 41.420459426 ),(2.205229275 41.422264793, 2.207349299 41.420608184, 2.208409311 41.421399305) )',
    draggable: true,
    strokeColor: '#519f12',
    fillColor: '#f1345f',
    editable: true,
    fillOpacity: 0.5,
    visible: true,
    simpleLabel: new cercaliagl.SimpleLabel({
      text: 'MultiLineString Demo'
    })
  });
  map.addFeature(multilinestring);
  var polygon = new cercaliagl.Feature({
    wkt: 'POLYGON((2.177722861 41.413683777, 2.174677572 41.411310103, 2.171263974 41.413372702, 2.174830286 41.416057364, 2.177722861 41.413683777))',
    simpleLabel: new cercaliagl.SimpleLabel({
      text: 'Polygon Demo'
    }),
    fillColor: '#0055ff',
    fillOpacity: 0.5,
    editable: true,
    visible: true
  });
  map.addFeature(polygon);
  var multipolygon = new cercaliagl.Feature({
    wkt: 'MULTIPOLYGON(((2.200081929 41.411256001, 2.202857723 41.413595865, 2.204052482 41.412581483, 2.200935328 41.410031935, 2.200081929 41.411256001)),((2.207690659 41.413447090, 2.205840130 41.412824936, 2.207394215 41.411837594, 2.208526092 41.412574721, 2.207690659 41.413447090)))',
    fillColor: '#cc6611',
    strokeColor: '#441100',
    fillOpacity: 1,
    editable: true,
    visible: true,
    simpleLabel: new cercaliagl.SimpleLabel({
      text: 'MultiPolygon Demo'
    })
  });
  map.addFeature(multipolygon);
  map.centerToFeatures([linestring, multilinestring, polygon, multipolygon]);
});
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Draw features with WKT string</title>
    <style>
      .map {
        width: 100%;
        height: 640px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    
    <link rel="stylesheet" type="text/css" href="//maps.cercalia.com/gl/v1.0/cercaliagl.css">
    <script src="//maps.cercalia.com/gl/v1.0/cercaliagl.js?key=YOUR_API_KEY"></script>
    <script src="main.js"></script>
  </body>
</html>