Thiago Souza Thiago Souza - 1 month ago 27
Javascript Question

OpenLayers 3 supported formats

What are the formats supported by OpenLayers 3?

I need open in OpenLayers a map with different colors, like the image below. So, which format should I export? I'm using QGIS and ArcMap to create the maps.

map image

This map represents the Brazil population by regions (the darker the color, the greater the population). The data is coming from a shapefile where each row represents one different region (5570 regions in total).

Shapefile attribute table:

Shapefile

Answer

I solved the problem using the Leaflet API for JavaScript instead of OpenLayers 3.

The result I got is this:

Choropleth Map by region

To help me find a solution, I followed the Interactive Choropleth Map tutorial.


1. We're using Leaflet, so we need to import the leaflet.js and leaflet.css files. The Leaflet library can be downloaded here.

<script src="leaflet.js" type="text/javascript"></script>

<link rel="stylesheet" href="leaflet.css" type="text/css" >

2. To generate the map I use a GeoJSON file with the informations of each region. As the data I had were coming from a ShapeFile, I used ArcGIS Online to create the GeoJSON file that I needed.

3. I'm working with JQuery to open the GeoJSON file by Ajax, so is need to import the library. JQuery can be downloaded here. For example:

<script src="jquery-3.0.0.js" ></script>

4. The JavaScript code to create the map:

<script type="text/javascript">

        // Create a map ('map' is the div id where the map will be displayed)
        var map = L.map('map').setView([-15, -55], 5); // Set the center of the map

        // Select the Basemap
        L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | CRR'
        }).addTo(map);

        // Var to save the GeoJSON opened
        var geojsonObject;

        // Open the GeoJSON with the informations
        // Change 'pop_2015_json.geojson' for your GeoJSON file
        $.getJSON("pop_2015_json.geojson", function(json) {
            geojsonObject = L.geoJson(json, {style: style, onEachFeature: onEachFeature});
            geojsonObject.addTo(map);
        });

        // Function to set the color of each region
        function getColor(p) {
            return p > 2000000  ? '#023858' :
                   p > 600000   ? '#045a8d' :
                   p > 300000   ? '#0570b0' :
                   p > 90000    ? '#3690c0' :
                   p > 20000    ? '#74a9cf' :
                   p > 10000    ? '#a6bddb' :
                                  '#d0d1e6';
        }

        // Function to apply the style
        function style(feature) {
            return {
                // 'pop_2015' is an information from GeoJSON
                fillColor: getColor(feature.properties.pop_2015),
                weight: 1,
                opacity: 0.9,
                color: 'grey',
                dashArray: '3',
                fillOpacity: 0.9
            };
        }

        // Change the style when mouse are hovered
        function highlightFeature(e) {
            var layer = e.target;

            // Change the border style
            layer.setStyle({
                weight: 3,
                color: '#666',
                dashArray: '',
                fillOpacity: 0.7,
                opacity: 1
            });

            if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                layer.bringToFront();
            }

            // Update the style of the hovered region
            info.update(layer.feature.properties);
        }

        // Reset the style on mouse over the region
        function resetHighlight(e) {
            geojsonObject.resetStyle(e.target);

            info.update();
        }

        // Zoom to region when clicked
        function zoomToFeature(e) {
            map.fitBounds(e.target.getBounds());
        }

        // Apply for each region
        function onEachFeature(feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: zoomToFeature
            });
        }

        // Add a field to display the region information
        var info = L.control();

        info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
            this.update();
            return this._div;
        };

        // Method that we will use to update the control based on feature properties passed
        info.update = function (props) {
            this._div.innerHTML = '<h4>População por Município &nbsp;</h4>' +  (props ?
                '<b>' + props.nome + '</b><br />' + props.pop_2015 + ' habitantes</sup>'
                : ' ');
        };

        info.addTo(map);


        // Lengend of the map
        var legend = L.control({position: 'bottomright'});

        // Create the legend
        legend.onAdd = function (map) {

            var div = L.DomUtil.create('div', 'legend'),
                // with the interval values
                grades = [0, 10000, 20000, 90000, 300000, 600000, 2000000],
                labels = [];

            // loop through our population intervals and generate a label with a colored square for each interval
            for (var i = 0; i < grades.length; i++) {
                div.innerHTML +=
                    '<i class="legenda" style="background:' + getColor(grades[i] + 1) + '"></i> ' +
                    grades[i] + (grades[i + 1] ? ' &ndash; ' + grades[i + 1] + '<br>' : ' +');
            }

            return div;
        };

        legend.addTo(map);

    </script>

5. Some considerations:

  • There are another ways to open a GeoJSON file into JavaScript. You can check in this question.
  • The colors used in the function getColor(p) can be changed the way you want. Take a look in ColorBrewer to help choosing a nice Choropleth color.
  • Some more informations about using GeoJSON with Leaflet: GeoJSON with Leaflet.
  • Another way to create Choropleth maps using Leaflet: Choropleth plugin for Leaflet.


Thanks everyone for the help.