No problem with that, we still produce these type of maps for client regularly. What I really wanted to do though is to explore adding some interactivity to the original data using modern webmapping libraries. I have been looking for an excuse to play with Turf, so inspired by a MapBox blog post from earlier this year I built a simple Leaflet map to allow users to find the street trees closest to them and well as explore each tree data point and the overall species distribution.

The data didn’t really need any processing other than a quick conversion into json ready to drop into Leaflet. A lot of the interaction is just vanilla javascript using Leaflet, I did however use Turf’s ‘within’ and ‘nearest’ functions to build the buffer interactivity as well as experimenting with Flot for the charts.

The code is on Github and there is a demo here.

Contact us through Facebook, Twitter or LinkedIn, or leave a comment below.

Andrew

The post Tree Mapping Revisited appeared first on Gaia Resources.

The Leaflet map code along with the Leaflet.draw code are bundled into a WordPress plugin, which is essentially a PHP wrapper for the Javascript code. The submission of the data was handled via a popular WordPress plugin called Contact Form 7, which handles all the form field layout and email-submission functions.

Working with Leaflet Draw, assuming a Leaflet map object has already been created and the required layers added, the drawing controls need to be declared and added to the map as a layer. Here we created a control that allows drawing of polylines, polygons and markers, but omits rectangles and circles. We also added some customization to the polylines and polygons.

var drawControl = new L.Control.Draw({
    position: ‘topright’,
    draw: {
        polyline: {
            metric: true
        },
        polygon: {
            allowIntersection: false,
            showArea: true,
            drawError: {
                color: ‘#b00b00’,
                timeout: 1000
            },
            shapeOptions: {
                 color: ‘#bada55’

           }

        },

        rectangle: false,
        circle: false,
        marker: true
    },
    edit: {
        featureGroup: drawnItems,
        remove: true
    }
});
map.addControl(drawControl);

Next, a Leaflet FeatureGroup which will store all the drawn features needs to be declared and added to the map as a layer:

var drawnFeatures = new L.FeatureGroup();
map.addLayer(drawnFeatures);

The third part of the tool was to create functions to respond to the creation, editing and deletion of features events, whereby the features are stored or removed from the drawnFeatures collection, and also that the shapes are converted to GeoJSON and stored in a field of the contact form. This is because Contact Form 7 can only process data that has been entered into its own declared form elements (designed in the WordPress plugin configuration) so the GeoJSON data has to be stored in a hidden field of the form. Contact Form 7 doesn’t actually offer hidden fields so this required installing a module for Contact Form 7 called Contact Form 7 Modules: Hidden Fields – a plugin for a plugin (plugin-ception?).

One thing to note is that the Leaflet code needs a way to know about the hidden field, so at some point the field needs to be hooked up to a known variable. Do do this we inserted some Javascript directly into the page post after both plugins had been inserted, with the hidden field having the ID layer-data.

<script>
    // create namespace if it doesn’t exist already
    window.MapPlugin = window.MapPlugin || {};
    // hook up layer-data hidden field to store layer data
    window.MapPlugin.dataElement = document.getElementById(“layer-data”);
</script>

Leaflet has a handy in-built function called JSON.stringify, which converts features directly into GeoJSON format. With this in mind, the code for responding to events is as follows:

map.on(‘draw:created’, function (e) {
    layer = e.layer;

    drawnFeatures.addLayer(layer);

    if(‘dataElement’ in window.MapPlugin)
        window.MapPlugin.dataElement.value = JSON.stringify(drawnFeatures.toGeoJSON());
});

map.on(‘draw:edited’, function (e) {
    if(‘dataElement’ in window.CCMapPlugin)
        window.MapPlugin.dataElement.value = JSON.stringify(drawnFeatures.toGeoJSON());
});

map.on(‘draw:deleted’, function (e) {
    var layer = e.layer;

    drawnFeatures.removeLayer(layer);

    if(‘dataElement’ in window.CCMapPlugin)
        window.MapPlugin.dataElement.value = JSON.stringify(drawnFeatures.toGeoJSON());
});

The resulting plugin will look like this:

Email Andrew directly here or Tony here.

The post Drawing Features in Leaflet using the Leaflet.draw plugin appeared first on Gaia Resources.

To avoid any nasty cross domain issues, the first step is to turn on JSONP support in GeoServer, to do this open the web.xml file in the ../geoserver/WEB-INF/ folder of your GeoServer deployment and add this statement at the bottom of the file

<context-param>
    <param-name>ENABLE_JSONP</param-name>
    <param-value>true</param-value>
</context-param>

Once you have done this, restart GeoServer and do a get capabilities request and you should see JSONP appear in your list of result formats

GeoServer is now ready to receive JSONP requests, so the next step is to start requesting data with Leaflet. There is a existing plugin for JSONP ajax requests, but it is pretty straight forward to roll your own using JQuery.

Create the GeoServer JSONP request, GeoServer uses a slightly weird syntax for this so you need to include the callback in the URL:

var geoJsonUrl = “http://000.000.0.000:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:BoreHoles&outputFormat=text/javascript&format_options=callback:processJSON”;

Send the request with jQuery

$.ajax(geoJsonUrl,
{ dataType: “jsonp” }
).done(function ( data ) {
});

Create the callback function to turn the json into a vector Leaflet layer

function processJSON(data) {
boreHoles = data;
    boreHolePoints = L.geoJson(boreHoles,{
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: getIcon(feature.properties.type,’unhighlight’)
});
}
}).addTo(map);
}

All done You should now have a new json layer added to your map, which will look something like this

You can see this GeoServer, Leaflet, JSON combo in action on a site we built that has just gone live for CSIRO

http://www.groundwatercooling.csiro.au/feed.html

Email me directly here or find me on Twitter

Andrew

The post JSON with GeoServer and Leaflet appeared first on Gaia Resources.