GIS Developer Test

Given the following JavaScript code snippet using Mapbox GL JS, identify the error that would prevent the map from displaying.

javascript

mapboxgl.accessToken = 'your.access.token';

var map = new mapboxgl.Map({

    container: 'map', // container ID

    style: 'mapbox://styles/mapbox/streets-v11', // style URL

    center: [-74.50, 40], // starting position [lng, lat]

    zoom: 9 // starting zoom

});

• The `accessToken` is incorrectly set.

• The `container` ID does not exist in the HTML.

• The `style` URL is incorrectly formatted.

• There are no errors in the code.

You need to make a server-side call using Node.js to GeoServer to retrieve all features from a layer called 'cities'. How would you structure your HTTP request using the `fetch` API?

javascript

fetch('http://yourgeoserver.com/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=yourWorkspace:cities&outputFormat=application/json')

    .then(response => response.json())

    .then(data => console.log(data));

• The URL is missing authentication parameters.

• The `outputFormat` should be set to `text/xml` instead of `application/json`.

• The request is correctly structured for the described purpose.

• The `fetch` API is not available in Node.js by default.

Consider the following SQL query intended to find all parks within 500 meters of a given point. What is wrong with the query?

sql

SELECT park_name FROM parks

WHERE ST_DWithin(geom, ST_SetSRID(ST_MakePoint(-73.9851, 40.7589), 4326), 500);

• The function `ST_DWithin` is not suitable for geometry types.

• The SRID 4326 implies degrees, not meters.

• `ST_MakePoint` coordinates are in the wrong order.

• The query is correctly structured.

In a React application, you are using Leaflet to create a map. After the component mounts, you initialize the map. However, you notice that the map tiles fail to load properly on first render but appear fine after resizing the window. What is the most likely cause?

javascript

useEffect(() => {

    const map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

}, []);

• The map container size is not set before the map initializes.

• The `useEffect` hook does not correctly clean up after itself.

• The tile layer URL is incorrect.

• React's virtual DOM does not support Leaflet.

. In MongoDB, you want to query documents in a 'locations' collection where the GeoJSON 'place' field is within a certain radius from a point. Which MongoDB query achieves this?

javascript

db.locations.find({

    place: {

        $nearSphere: {

            $geometry: {

                type: "Point",

                coordinates: [-73.97, 40.77]

            },

            $maxDistance: 1000

        }

    }

});

• The query is incorrect because `$nearSphere` cannot be used with GeoJSON data.

• The `$maxDistance` is incorrectly set in meters without specifying the unit.

• The query should use `$geoWithin` instead of `$nearSphere`.

• The query is structured correctly for the described purpose.

In a React application using Maplibre GL JS, the map does not update when the component's state changes. What is a likely solution to this issue?

• Use `componentDidUpdate` to update the map.

• Make sure the map instance is created inside the `render` method.

• Redefine the map instance inside the state object.

• Use the `useEffect` hook to update the map when the state changes.

How can you use Node.js to periodically update GIS data from a PostgreSQL database with PostGIS extensions?

• Using the `setTimeout` function in a loop.

• Using the `setInterval` function.

• Node.js cannot interact with PostgreSQL.

• Using an external cron job to run the Node.js script.

You are using jQuery to fetch GeoJSON data from a GeoServer WFS service. What might be a common mistake to avoid?

• Using `$.get()` instead of `$.ajax()`.

• Forgetting to parse the JSON data with `JSON.parse()`.

• Not setting the correct `dataType` in the `$.ajax()` setup.

• Using HTTP instead of HTTPS in the service URL.

In OpenLayers, a feature added to a vector layer is not visible. What could be the problem?

• The feature is outside the current map extent.

• The feature's style is not set.

• The layer's zIndex is too low.

• All of the above could be reasons.

How would you handle a click event on a marker in Leaflet.js to display an information popup?

• `marker.on('click', function() { alert('Marker clicked!'); });`

• `marker.click(function() { alert('Marker clicked!'); });`

• `marker.bindPopup('Info').openPopup();`

• `marker.on('click', function() { marker.bindPopup('Info').openPopup(); });`