2

I'm experimenting with various options for displaying geographic information to the public in html format. The ultimate aim is to build an online application where anyone can add the route they cycle to work and points of danger, for a project comparing perceived risk with actual accident data.

Anyway, getting to the point, some colleagues and I have added our routes to a geojson file hosted by GitHub for a 'proof of concept' map. We used the nifty geojson.io interface to create this, and it can be seen on our GitHub page.

The question, now that we have some example data online is how best to visualise it, styling the points for different levels of severity and risk. A colleague has demonstrated how the points can be styled based on attributes, but the code is very long compared with what can be done quickly in CartoCSS:

 function initialize()  {
    var map = L.map('map').setView([53.851,-1.61], 12);
    L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
        maxZoom: 18
    }).addTo(map);

    L.geoJson(geojsonFeature, {
        onEachFeature: onEachFeature,
        pointToLayer: pointToLayer,
        style : myStyle, 
    }).addTo(map); 
}

function onEachFeature(feature, layer) {
    var popupContent = feature.properties.Person + " " + feature.properties.Place; 
    layer.bindPopup(popupContent);
}

function pointToLayer(feature, latlng) {
    return L.circleMarker(latlng, myStyle);
}

function myStyle(feature, layer)    {

    switch (feature.properties.Place)   {

        case 'Home' :
            return style4;
        break;

        case 'Work' : 
            return style4;   
        break;

        case 'Danger': 
            if (feature.properties.Severity == 1)   {
                return style1;
            }

            else if (feature.properties.Severity == 2)  {
                return style2;
            }

            else return style3;

        }
}   

var style1 = {
    "color": "#00FF00",
    "radius" : 8,
    "weight": 1,
    "opacity": 1,
    "fillOpacity": 0.5
};

var style2 = {
    "color": "#FFFF00",
    "radius" : 8,
    "weight": 1,
    "opacity": 1,
    "fillOpacity": 0.5
};

var style3 = {
    "color": "#FF0000",
    "radius" : 8,
    "weight": 1,
    "opacity": 1,
    "fillOpacity": 0.5
};

var style4 = {
    "color": "#0000FF",
    "radius" : 8,
    "weight": 1,
    "opacity": 1,
    "fillOpacity": 0.5
};

I have looked at the geojson documentation for both Leaflet and OL3, but cannot find out how to do this properly. So really I have two questions, one specific and one more general:

  1. Would OpenLayers3 be able to do this better?
  2. Are there any other options for quickly styling geojson data for webmaps?
1

In OpenLayers 3, you could use the following vector layer configuration to achieve the same styling:

new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    url: geojsonFeatureUrl
  }),
  style: (function() {
    var styleCache = {};
    function getColor(feature) {
      switch (feature.get('Place')) {
        case 'Home':
        case 'Work': 
          return '0, 0, 255';
          break;
        case 'Danger':
          switch (feature.get('Severity')) {
            case 1:
              return '0, 255, 0';
              break;
            case 2:
              return '255, 255, 0';
              break;
            default:
              return '255, 0, 0';
          }
      }
    };
    return function(feature, resolution) {
      var color = getColor(feature);
      if (!styleCache[color]) {
        styleCache[color] = [new ol.style.Circle({
          radius: 8,
          stroke: new ol.style.Stroke({
            width: 1,
            color: 'rgb(' + color + ')'
          }),
          fill: new ol.style.Fill({
            color: 'rgba(' + color + ', 0.5)'
          })
        })];
      }
      return styleCache[color];
    }
  }())
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.