Create a unique URL for linking to data pulled from a database

Question

Is it possible to create a unique URL to link to information that is called and displayed from a database?

[I am struggling to articulate this question, so any suggestions for revising it are welcome.]

Specifics: I have a page that includes an embedded map and related information about each location stored in a separate database. Users can navigate through the locations by clicking the markers on the map or by using navigation buttons in the sidebar. Either case zooms in on the marker and displays information about the location in the sidebar. All this works fine, but because the information is simply placed in divs, the page's URL is always the same regardless of what is being displayed.

I would like to be able to create and share links to the individual locations, which would open with the point selected in the map and the information displayed in the sidebar.

I use a javascript function to call the information from the database. Here is a simplified version of that code:

<a href="#" onClick='callMarker(markerNum);'>Click Me</a> 

function callMarker(markerNum) {
        var sql = new data.SQL({ user: 'me' });
        var sql_query = "SELECT * FROM map_name WHERE marker_id = " + markerNum;
        sql.execute(sql_query)
        .done(function(data) {
            console.log(data.rows[0]);

            var title = data.rows[0].title;

            // Displays the ID of the object in the external information box
            document.getElementById("title").innerHTML= data.rows[0].title;
}

Since each location is tagged with a unique ID number (marker_id) in the database, it seems like this could be appended to the end of the current URL to create a unique URL associated with each point. Or maybe the ID number (marker_id) could somehow be assigned to a div ID as a variable within the page. I am not sure how to do either or if either would work.

Any ideas or direction would be appreciated. I have been searching a lot of different approaches, but have not found anything that seems to address this problem.

Answer 1

If you don't want to do anything on the server to provide a unique url, you can use a client side hash with urls in the form /mymap#uniqueId. The hashed part of the url is accessible in javascript like so:

window.location.hash

You can even set that property on the location as users click around on the map. So in your callMarker function you can do something like:

if(history.pushState) 
    history.pushState(null, null, '#myhash');      
else 
     location.hash = '#myhash'; 

In newer browsers the first method avoids a hard refresh.

You can grab this value on the page load event to render the appropriate point on the map and sidebar information.