1

I'm currently trying to link the markers on my leaflet map to a portion of text available to the left of the map. What I would like to have happen is when the user clicks on a marker, the site will scroll to that portion of text.

I should also note that my markers are derived from a separate geoJson file.

This is the code I intend to use once each of the markers have their unique IDs to be manipulated:

document.getElementById("A").addEventListener("click", function() {
  window.location.href = "#B";
});

So in this case, "A" would be the unique ID given to one of the markers, and #B is the ID of the text I want to scroll to via the href.

*Edit

I should clarify that the primary issue is actually giving ID's to the markers from the geoJson elements I added onto the map. The relevant code for this is here:

//convert points to circles in layer
function pointToLayer(feature, latlng, attributes){

    var attribute = attributes[0];

    // styling for the circles which are pink with white borders
    var geojsonMarkerOptions = {
        fillColor: "#800000",
        color: "white",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.5,
    };

    var layer = L.circleMarker(latlng, geojsonMarkerOptions);

    //returns layer with circle markers
    return layer;

//function to fill the global attribute array variable at top of page
function processData(data){

    //variable to store the first feature in the data
    var properties = data.features[0].properties;

    //for loop to push each attribute name into array
    for (var attribute in properties){ 

        //indexOf will only allow attributes with population values to be pushed
        if (attribute.indexOf("Victims") > -1){
            attributes.push(attribute);

        };
    };

    return attributes; //returns attributes array to be used in callback
};


//function to retrieve the data from geojson
function getData(map){

    //load the data and calls functions
    $.getJSON("data/WarCrimes3.geojson");

};
Mike Biehl
  • 19
  • 2
  • you could use the `uuid` module, that would generate ids for you (these are typically for security applications), but if you want something simple, you can either use a random string, or even using the current timestamp as the id. – tsamridh86 Nov 11 '20 at 02:59
  • @SamridhTuladhar Do you know I would go about actually applying a random string to each of the elements in a technical manner? – Mike Biehl Nov 11 '20 at 03:09
  • https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript – tsamridh86 Nov 11 '20 at 03:09
  • That link will help you create a random string of a given length, I suggest choosing a length long enough, so that two randomly generated string, don't coincidentally be the same. e.g., if i had to assign unique id to 100 elements, i would chose a random string at least 10-15 characters large, to avoid collision – tsamridh86 Nov 11 '20 at 03:11
  • @SamridhTuladhar sorry, I clarified in an edit I made that the problem lies in how I go about assigning those generated IDs to the markers. – Mike Biehl Nov 11 '20 at 03:55
  • Each layer has a leaflet id you can get it with `L.stamp(layer)` – Falke Design Nov 11 '20 at 05:51

0 Answers0