Interacting with individual divisions on a leaflet map

Question

Interacting with individual divisions on a leaflet map

I've been facing a challenge with this interaction for some time now, and finding the appropriate solution seems quite daunting at the moment.

Recently, I created a map with basic points using GeoJSON format (generated with PHP & MySQL). I'm curious if it's feasible to display these rendered points in a separate div element outside the map?

For example:

https://i.sstatic.net/pJAQj.jpg

My query is as follows: Is it possible that when I click on an item from the list on the right side, the corresponding marker on the map automatically gets highlighted (as illustrated in the image above)?

Here is the code snippet that aids in generating the map and GeoJSON, but it only plots the points on the map panel.

var karta = L.tileLayer.wms("http://geoportal.dgu.hr/wms?", {
        layers: 'DOF',
        attribution: "http://geoportal.dgu.hr/ "
});

rasvjeta_kvar_hum = new L.geoJson(null, {
  // more code here
});

$.getJSON("php/rasvjeta_kvar.php", function (data) {
    // code for adding data to map layer
});

// Additional code snippets follow...

I have attempted to resolve this issue by following advice from this source, but haven't had much success so far.

Any guidance or pointers on how to proceed would be greatly appreciated. Thank you.

UPDATE

After making some progress (albeit not enough) towards completing my task, I came up with the following approach:

https://i.sstatic.net/Y4BHI.jpg

By implementing the code below, I managed to generate elements on the right panel; however, certain limitations still exist.

// Code block snippet...

I am interested to know if it's possible to iterate through PHP-generated GeoJSON using the following code:

// New code snippet...

Upon trying to loop through the GeoJSON using the revised code mentioned above, I encountered the following error message:

Uncaught TypeError: people.forEach is not a function

Attached below is the PHP code responsible for creating GeoJSON from MySQL:

UPDATE II

With the assistance of fellow collaborator ghybs, I successfully implemented some interaction between external items and map markers. However, clicking on items from the external list solely zooms me into the same marker location. Is there a way to make it such that clicking an item from the external list zooms me directly onto the corresponding marker on the map?

Refer to the provided picture for better visualization.

If further clarification is needed, feel free to ask!

javascript ajax leaflet geojson

Answer 1

Answer №1

The scenario you have described is quite common and there are likely numerous resources available, particularly on platforms like Stack Overflow, that offer similar functionality.

Regarding the issue with the TypeError that was mentioned, it's important to note that when using jQuery's $.getJSON, it returns a jqXHR object rather than an array.

To implement the desired functionality, you are already aware that you can execute instructions for each GeoJSON feature by utilizing the onEachFeature parameter of the L.geoJSON constructor. Instead of attempting to parse the people array separately, consider constructing your list items within this function. This appears to be what your current code is doing by adding a new row to the #feature-list table.

An advantage of this approach is that you can directly associate your external item's "click" event listener with the appropriate layer or marker since it is accessible as a parameter of the onEachFeature function:

function navigateTo(layer) {
    map.panTo(layer.getLatLng());
    layer.openPopup();
}

L.geoJSON(null, {
    onEachFeature: function (feature, layer) {
        // Add any desired features to the layer.

        // Create your external item.
        // Then attach the "click" event listener.
        item.addEventListener("click", function () {
            navigateTo(layer);
        });
    }
});

Answer 2

The scenario you have described is quite common and there are likely numerous resources available, particularly on platforms like Stack Overflow, that offer similar functionality.

Regarding the issue with the TypeError that was mentioned, it's important to note that when using jQuery's $.getJSON, it returns a jqXHR object rather than an array.

To implement the desired functionality, you are already aware that you can execute instructions for each GeoJSON feature by utilizing the onEachFeature parameter of the L.geoJSON constructor. Instead of attempting to parse the people array separately, consider constructing your list items within this function. This appears to be what your current code is doing by adding a new row to the #feature-list table.

An advantage of this approach is that you can directly associate your external item's "click" event listener with the appropriate layer or marker since it is accessible as a parameter of the onEachFeature function:

function navigateTo(layer) {
    map.panTo(layer.getLatLng());
    layer.openPopup();
}

L.geoJSON(null, {
    onEachFeature: function (feature, layer) {
        // Add any desired features to the layer.

        // Create your external item.
        // Then attach the "click" event listener.
        item.addEventListener("click", function () {
            navigateTo(layer);
        });
    }
});

Answer 3

Answer №2

To achieve this, a common technique is to attach a fresh popup to the identical location on the map...

function displayPopup(rightSideMarker){
   L.popup() 
            .setLatLng(rightSideMarker.lat, rightSideMarker.lng])
            .setContent(rightSideMarker.content)
            .openOn(map);
}

Answer 4

To achieve this, a common technique is to attach a fresh popup to the identical location on the map...

function displayPopup(rightSideMarker){
   L.popup() 
            .setLatLng(rightSideMarker.lat, rightSideMarker.lng])
            .setContent(rightSideMarker.content)
            .openOn(map);
}

Interacting with individual divisions on a leaflet map

Answer №1

Answer №2

Similar questions

Crafting a robust and secure password using Yup and Formik while receiving personalized error notifications

Ensure mydesign is seamlessly integrated with the asp.net page

Encrypt/decrypt ajax URL in Laravel

Dynamically created HTML elements have no events attached to them in Angular and jQuery

I'm experiencing an issue where my express-session is being reset with every new request, leading me to question if this is related to the development environment I am using (REACT + EXPRESS)

Changing the height of one Div based on another Div's height

Function triggered twice upon checkbox being selected

Utilizing ng-options within an ng-repeat to filter out previously chosen options

Implementing Dependency Injection in Ajax Calls in MVC 5

Error: Attempting to access property 'email' from an undefined object was unsuccessful

The OrhographicCamera is having difficulties capturing the entire scene in its render

What is the method to generate a list where every item is a list within AngularJS?

Initiate a unidirectional ajax request

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

Ways to access the value of an input field using Javascript

What could be the reason behind the model returning null values?

What strategies work best for managing a MySql database within a single-page application (SPA)?

When the user reaches a specific point while scrolling, apply a class to the element

Troubleshooting automatic login problem in VB 2013 settings

Linking a variable in typescript to a translation service