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, 2016 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, 2016 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, 2016 at 16:58
  • Thanks! Any help would be great. Fiddle: jsfiddle.net/bc50e6wb/1.
    – ScottZee
    Apr 22, 2016 at 18:25

1 Answer 1


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 and acknowledge you have read our privacy policy.

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