Highlight provinces of Nepal in Google Map

Highlight Provinces of Nepal in Google Map

The following steps show the process of creating a map centered at Nepal and highlighting the provinces of nepal with an open source geojson data of all the provinces and districts of nepal. We can highlight the political regions as required.

• First, start with adding a script tag with your api key to your project html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

• Create a map object

1
2
3
4
  map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 28.3949, lng: 84.1240},
          zoom: 7
      });

(Don’t forget to give certain height and width to the map element)

• Download and include geojson data of provinces to your project directory, available in this folder GeoJson for Provinces:

Nepal Provinces GeoJson Data

• Include the code below to your file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  var nepalGeo = true;
   for (let i = 1; i <= 7; i++) {
              map.data.loadGeoJson('/province' + i + '.geojson');
          }
          map.data.setStyle((feature) => {
              color = colors[feature.getProperty('PROVINCE') - 1];
              return ({
                  fillColor: "#"+((1<<24)*Math.random()|0).toString(16),
                  fillOpacity: 1,
                  strokeWeight: 1.2,
                  strokeOpacity: 1,


              });
          });
          nepalGeo=false;

• If you want to highlight just the boundaries, remove fillColor and play around with stroke attribute

1
2
3
4
5
6
7
8
9
  map.data.setStyle((feature) => {
            color = colors[feature.getProperty('PROVINCE') - 1];
            return ({
                strokeColor: "#"+((1<<24)*Math.random()|0).toString(16),
                fillOpacity: 0,
                strokeWeight: 2,
                strokeOpacity: 1,
            });
         })

Conclusion

In this way, you can easily separate out provinces of nepal and present them as you like. You can also highlight other political regions such as districts, zones or development regions in the same manner provided you have the geojson data for the same.