I'm making a choropleth map based on this example

I would like to add links to the map, so that when a user clicks on a state they will be taken to a specific page.

For example, a user clicks on California and is taken to a page about California.

I saw a great example of this, but the site has since been taken down so I can't link to it.

  • Looks like a duplicate, see answer here, gis.stackexchange.com/questions/42631/… – timlohnes Apr 22 '16 at 15:49
  • Thanks for pointing that out. It looks like that points to the same link regardless of the state selected. How could I modify that to have a different link per state? For example, a user clicks on California and is taken to a page about California. – ScottZee Apr 22 '16 at 16:41
  • You could use a switch to look at states and then assign urls. If you put up a fiddle, I could look at it. – timlohnes Apr 22 '16 at 16:58
  • Thanks! Any help would be great. Fiddle: jsfiddle.net/bc50e6wb/1. – ScottZee Apr 22 '16 at 18:25

Here is the updated section of your fiddle. Remove the zoomToFeature function and replace with stateLink. If you have the urls stored with the data, you wouldn't need to do this. Would just assign urlLink to e.target.feature.properties.whateverfieldholdstheURL

    function stateLink(e) {
//  console.log(e.target.feature.properties.name);
      var urlLink;
      switch (e.target.feature.properties.name) {
        case 'California': 
          urlLink = 'http://www.ca.gov/';
        case 'Oregon':
          urlLink = 'http://www.oregon.gov/pages/index.aspx';
      window.open(urlLink, '_blank');

    function onEachFeature(feature, layer) {
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: stateLink

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.