Interactive California map in JavaScript

In this tutorial, we are going to create an interactive map of California with JavaScript. California is so popular state of the United States. So let’s see how we can create the interactive map of this U.S state.

Here we are going to use the amCharts JavaScript library. This library can help to create charts as well as maps. You can create country maps, regional map of different countries using it’s map functionality.

Now let’s start following the steps to generate our interactive map of California…

First of all, load the required amCharts library directly from their URL:

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/region/usa/caLow.js"></script>

Now creating our HTML map div container and give it an ID:

<div id="caMap"></div>

After that, add the height and width of the map container using some CSS code:

<style type="text/css">
  #caMap {
    width: 500px;height: 500px;
  }
</style>

Now the final step is to insert our amCharts JavaScript code. Here we are going to do all the stuff like creating map instance, set definition, set the color and hover color etc. Below is our JavaScript code:

// Creating the map instance
var chart = am4core.create("caMap", am4maps.MapChart);

// Set the definition of map
chart.geodata = am4geodata_region_usa_caLow;

// Set projection
chart.projection = new am4maps.projections.Miller();

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like state names) data from the GeoJSON
polygonSeries.useGeodata = true;

// Configure the series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#00BCD4");

// Create hover state and set alternative fill color
var hoverState = polygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#048696");


polygonTemplate.events.on("hit", function(ev) {
  // Get object info and from it show the object name in alert box. In our case, object name is name of the state
  alert("Clicked on "+ev.target.dataItem.dataContext.name);
});

Now if you run the complete code in the browser, you will see the California map appear with a height and width of 500 px that we set in the JavaScript.

Also, read: Get Latitude and Longitude of the user in JavaScript – HTML5 Geolocation

Well, you can change the map color as well as the hover color by yourself. See the comments in the JavaScript code to find how to change the colors of the map.

I have also set an event on clicking any state of the map to make it more interactive. When you click any of the states, an alert message will appear that shows the name of the state where you clicked.

You can do many more things on the map with JavaScript. Read the documentation of amCharts map to learn more about it. You can even make it more interactive.

 

Leave a Reply

Your email address will not be published. Required fields are marked *