Skip to content

Instantly share code, notes, and snippets.

@iamtekson

iamtekson/GeoserverWFS-Full-code.html

Last active November 1, 2019 12:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iamtekson/f8be2d75e308081aef86ca151a347d5b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iamtekson/f8be2d75e308081aef86ca151a347d5b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iamtekson revised this gist Nov 1, 2019. 1 changed file with 2 additions and 35 deletions.
    37 changes: 2 additions & 35 deletions GeoserverWFS-Full-code.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,25 +1,3 @@
    <html>
    <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
    <style>
    #map {
    width: 100%;
    height: 500px;
    }
    </style>
    </head>
    <body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
    </body>
    </html>

    <script>
    var map = L.map("map").setView([38.45, 70.6], 6);
    var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    //Geoserver Web Feature Service
    $.ajax('http://localhost:8080/geoserver/wfs',{
    type: 'GET',
    @@ -28,7 +6,6 @@
    version: '1.1.0',
    request: 'GetFeature',
    typename: 'workspace:layer_name',
    CQL_FILTER: "column='demo'",
    srsname: 'EPSG:4326',
    outputFormat: 'text/javascript',
    },
    @@ -37,18 +14,8 @@
    jsonp:'format_options'
    });

    //Geojson style file
    var myStyle = {
    'color': 'red'
    }
    // the ajax callback function
    function handleJson(data) {
    selectedArea = L.geoJson(data, {
    style: myStyle,
    onEachFeature: function(feature, layer) {
    layer.bindPopup(`Name: ${feature.properties.name_of_your_property}`)
    }
    }).addTo(map);
    selectedArea = L.geoJson(data).addTo(map);
    map.fitBounds(selectedArea.getBounds());
    }
    </script>
    }
  2. iamtekson revised this gist Nov 1, 2019. 1 changed file with 0 additions and 21 deletions.
    21 changes: 0 additions & 21 deletions ajax-request-wfs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,21 +0,0 @@
    //Geoserver Web Feature Service
    $.ajax('http://localhost:8080/geoserver/wfs',{
    type: 'GET',
    data: {
    service: 'WFS',
    version: '1.1.0',
    request: 'GetFeature',
    typename: 'workspace:layer_name',
    srsname: 'EPSG:4326',
    outputFormat: 'text/javascript',
    },
    dataType: 'jsonp',
    jsonpCallback:'callback:handleJson',
    jsonp:'format_options'
    });

    // the ajax callback function
    function handleJson(data) {
    selectedArea = L.geoJson(data).addTo(map);
    map.fitBounds(selectedArea.getBounds());
    }
  3. iamtekson revised this gist Nov 1, 2019. 2 changed files with 55 additions and 6 deletions.
    54 changes: 54 additions & 0 deletions GeoserverWFS-Full-code.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    <html>
    <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
    <style>
    #map {
    width: 100%;
    height: 500px;
    }
    </style>
    </head>
    <body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
    </body>
    </html>

    <script>
    var map = L.map("map").setView([38.45, 70.6], 6);
    var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    //Geoserver Web Feature Service
    $.ajax('http://localhost:8080/geoserver/wfs',{
    type: 'GET',
    data: {
    service: 'WFS',
    version: '1.1.0',
    request: 'GetFeature',
    typename: 'workspace:layer_name',
    CQL_FILTER: "column='demo'",
    srsname: 'EPSG:4326',
    outputFormat: 'text/javascript',
    },
    dataType: 'jsonp',
    jsonpCallback:'callback:handleJson',
    jsonp:'format_options'
    });

    //Geojson style file
    var myStyle = {
    'color': 'red'
    }
    // the ajax callback function
    function handleJson(data) {
    selectedArea = L.geoJson(data, {
    style: myStyle,
    onEachFeature: function(feature, layer) {
    layer.bindPopup(`Name: ${feature.properties.name_of_your_property}`)
    }
    }).addTo(map);
    map.fitBounds(selectedArea.getBounds());
    }
    </script>
    7 changes: 1 addition & 6 deletions ajax-request-wfs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,11 +16,6 @@ $.ajax('http://localhost:8080/geoserver/wfs',{

    // the ajax callback function
    function handleJson(data) {
    selectedArea = L.geoJson(data, {
    style: geoJsonStyle,
    onEachFeature: function(feature, layer) {
    layer.bindPopup(`Name: ${feature.properties.standard_n}`)
    }
    }).addTo(map);
    selectedArea = L.geoJson(data).addTo(map);
    map.fitBounds(selectedArea.getBounds());
    }
  4. iamtekson revised this gist Nov 1, 2019. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions ajax-request-wfs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,7 @@ $.ajax('http://localhost:8080/geoserver/wfs',{
    service: 'WFS',
    version: '1.1.0',
    request: 'GetFeature',
    typename: 'tajikistan:country',
    CQL_FILTER: `standard_n='${value}'`,
    typename: 'workspace:layer_name',
    srsname: 'EPSG:4326',
    outputFormat: 'text/javascript',
    },
  5. iamtekson created this gist Nov 1, 2019.
    27 changes: 27 additions & 0 deletions ajax-request-wfs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    //Geoserver Web Feature Service
    $.ajax('http://localhost:8080/geoserver/wfs',{
    type: 'GET',
    data: {
    service: 'WFS',
    version: '1.1.0',
    request: 'GetFeature',
    typename: 'tajikistan:country',
    CQL_FILTER: `standard_n='${value}'`,
    srsname: 'EPSG:4326',
    outputFormat: 'text/javascript',
    },
    dataType: 'jsonp',
    jsonpCallback:'callback:handleJson',
    jsonp:'format_options'
    });

    // the ajax callback function
    function handleJson(data) {
    selectedArea = L.geoJson(data, {
    style: geoJsonStyle,
    onEachFeature: function(feature, layer) {
    layer.bindPopup(`Name: ${feature.properties.standard_n}`)
    }
    }).addTo(map);
    map.fitBounds(selectedArea.getBounds());
    }