Skip to content

Instantly share code, notes, and snippets.

@iamgeoknight

iamgeoknight/staticstyle.js

Last active January 9, 2022 05:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iamgeoknight/71ec974c69ed58d11550b917ed87bf25 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iamgeoknight/71ec974c69ed58d11550b917ed87bf25 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iamgeoknight revised this gist Jan 9, 2022. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion staticstyle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,4 +20,7 @@ let staticStyle = new ol.style.Style({
    width: 5
    }),
    })
    });
    });

    //Set static style for vector layer
    vector_layer.setStyle(staticStyle);
  2. iamgeoknight revised this gist Jan 8, 2022. 1 changed file with 22 additions and 35 deletions.
    57 changes: 22 additions & 35 deletions staticstyle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,36 +1,23 @@
    /*
    Create Vector Layer
    */
    class VectorLayer{
    //Constructor accepts title of vector layer and map object
    constructor(title, map) {
    this.layer = new ol.layer.Vector({
    title: title,
    source: new ol.source.Vector({
    projection:map.getView().projection
    }),
    style: new ol.style.Style({
    // Line and Polygon Style
    stroke: new ol.style.Stroke({
    color: '#0e97fa',
    width: 4
    }),
    fill: new ol.style.Fill({
    color: 'rgba(0, 153, 255, 0.2)'
    }),
    // Defining Static Style
    let staticStyle = new ol.style.Style({
    // Line and Polygon Style
    stroke: new ol.style.Stroke({
    color: '#0e97fa',
    width: 4
    }),
    fill: new ol.style.Fill({
    color: 'rgba(0, 153, 255, 0.2)'
    }),

    // Point Style
    image: new ol.style.Circle({
    radius: 10,
    fill: new ol.style.Fill({
    color: [0, 153, 255, 1],
    }),
    stroke: new ol.style.Stroke({
    color: [255, 255, 255, 1],
    width: 5
    }),
    })
    })
    });
    }
    }
    // Point Style
    image: new ol.style.Circle({
    radius: 10,
    fill: new ol.style.Fill({
    color: [0, 153, 255, 1],
    }),
    stroke: new ol.style.Stroke({
    color: [255, 255, 255, 1],
    width: 5
    }),
    })
    });
  3. iamgeoknight revised this gist Jan 8, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion staticstyle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    *
    /*
    Create Vector Layer
    */
    class VectorLayer{
  4. iamgeoknight revised this gist Jan 8, 2022. 1 changed file with 0 additions and 22 deletions.
    22 changes: 0 additions & 22 deletions staticstyle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -33,26 +33,4 @@ class VectorLayer{
    })
    });
    }
    }


    /*
    Create a Draw interaction for LineString and Polygon
    */
    class Draw {
    //Constructor accepts geometry type, map object and vector layer
    constructor(type, map, vector_layer) {
    this.map = map;
    this.vector_layer = vector_layer;
    this.features = [];

    //Draw feature
    this.draw = new ol.interaction.Draw({
    type: type,
    stopClick: true,
    source: vector_layer.getSource()
    });

    this.map.addInteraction(this.draw);
    }
    }
  5. iamgeoknight revised this gist Jan 8, 2022. 1 changed file with 38 additions and 3 deletions.
    41 changes: 38 additions & 3 deletions staticstyle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    /*
    *
    Create Vector Layer
    */
    class VectorLayer{
    @@ -9,15 +9,50 @@ class VectorLayer{
    source: new ol.source.Vector({
    projection:map.getView().projection
    }),
    style: new ol.style.Style({
    style: new ol.style.Style({
    // Line and Polygon Style
    stroke: new ol.style.Stroke({
    color: '#0e97fa',
    width:4
    width: 4
    }),
    fill: new ol.style.Fill({
    color: 'rgba(0, 153, 255, 0.2)'
    }),

    // Point Style
    image: new ol.style.Circle({
    radius: 10,
    fill: new ol.style.Fill({
    color: [0, 153, 255, 1],
    }),
    stroke: new ol.style.Stroke({
    color: [255, 255, 255, 1],
    width: 5
    }),
    })
    })
    });
    }
    }


    /*
    Create a Draw interaction for LineString and Polygon
    */
    class Draw {
    //Constructor accepts geometry type, map object and vector layer
    constructor(type, map, vector_layer) {
    this.map = map;
    this.vector_layer = vector_layer;
    this.features = [];

    //Draw feature
    this.draw = new ol.interaction.Draw({
    type: type,
    stopClick: true,
    source: vector_layer.getSource()
    });

    this.map.addInteraction(this.draw);
    }
    }
  6. iamgeoknight created this gist Jan 8, 2022.
    23 changes: 23 additions & 0 deletions staticstyle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    /*
    Create Vector Layer
    */
    class VectorLayer{
    //Constructor accepts title of vector layer and map object
    constructor(title, map) {
    this.layer = new ol.layer.Vector({
    title: title,
    source: new ol.source.Vector({
    projection:map.getView().projection
    }),
    style: new ol.style.Style({
    stroke: new ol.style.Stroke({
    color: '#0e97fa',
    width:4
    }),
    fill: new ol.style.Fill({
    color: 'rgba(0, 153, 255, 0.2)'
    })
    })
    });
    }
    }