During my recent project, I built Google Maps application using JavaScript API where Add GeoJSON Button was needed. It came out as not so easy work to do. Read below for more details regarding the code.

Features

  • Uploading GeoJSON to Google Map JavaScript API application
  • CSS styling of the button
  • Zooming to uploaded GeoJSON
  • Tooltip with uploaded GeoJSON properties, its names and values

Code for Add GeoJSON Button

I felt a bit rusty with JavaScript but this project gave me a reason to refresh it. Here is the main code with comments:

    //Load GeoJSONs
    geojsonlayer9 = new google.maps.Data();

    //Tooltips
    var infowindow = new google.maps.InfoWindow();

    geojsonlayer9.addListener('click', function (event) {
        var html_props = "";

        for (i = 0; i < keys.length; i++) {
            html_props += keys[i] + " : " + event.feature.getProperty(keys[i]) + "<br />"
        };

        let html = "<b>GeoJSON properties</b> <br /><br />" + html_props;
        infowindow.setContent(html);
        infowindow.setPosition(event.latLng);
        infowindow.setOptions({ pixelOffset: new google.maps.Size(0, -10) });
        infowindow.open(map);
    });

    //GeoJSON layer style
    geojsonlayer9.setStyle({
        icon: {
            url: "icons/measle_red_8px.png",
            scaledSize: new google.maps.Size(7, 7),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(7, 6)
        }
    });

    // Load GeoJSON by button
    function loadGeoJsonString(geoString) {
        geojsonlayer9.forEach(function (feature) {
            geojsonlayer9.remove(feature);
        });
        var geojson = JSON.parse(geoString);
        geojsonlayer9.addGeoJson(geojson);
        geojsonlayer9.setMap(map);
        zoom(map);

        var propert = geojson.features[0].properties;
        keys = [];
        for (var key in propert) keys.push(key);

        function zoom(map) {
            var bounds = new google.maps.LatLngBounds();
            geojsonlayer9.forEach(function (feature) {
                processPoints(feature.getGeometry(), bounds.extend, bounds);
            });
            map.fitBounds(bounds);
        }

        function processPoints(geometry, callback, thisArg) {
            if (geometry instanceof google.maps.LatLng) {
                callback.call(thisArg, geometry);
            } else if (geometry instanceof google.maps.Data.Point) {
                callback.call(thisArg, geometry.get());
            } else {
                geometry.getArray().forEach(function (g) {
                    processPoints(g, callback, thisArg);
                });
            }
        }
    }

//Get element from HTML and read the file
    document.getElementById('add_geojson_button').onchange = function (evt) {
        try {
            let files = evt.target.files;
            if (!files.length) {
                alert('No file selected!');
                return;
            }
            let file = files[0];
            let reader = new FileReader();
            const self = this;
            reader.onload = (event) => {
                loadGeoJsonString(event.target.result)
            };
            reader.readAsText(file);
        } catch (err) {
            console.error(err);
        }
    }
}

For using the code please visit GitHub page and clone the repository.

Links

Tags: