Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.4k views
in Technique[技术] by (71.8m points)

json - Assign different color to each country in the google map api

Does anyone know how to assign a different color to each country in a google map? I have data which stored each country with same colored data. e.g:

in the world map

Blue overlay to India, then RED Afganishtan...etc If its need to be color by using polygon then let me know any example with knowing border of each country lat long. Thanks

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can easily do that by loading an appropriate GeoJSON onto your map (you can find more information here). For example, at the below, I created a medium resolution GeoJSON of the world via here and uploaded it to my server, and then by the following script, I was able to config the Google Map API to show countries in different colors.

                // Load GeoJSON.
            map.data.loadGeoJson('http://domain/geojson.json');

            map.data.setStyle(function(feature) {
                var color = 'green';
                if (feature.getProperty('wb_a2') === "AU") {
                    color = 'red';
                }
                if (feature.getProperty('wb_a2') === "IR") {
                    color = 'yellow';
                }
                return /** @type {google.maps.Data.StyleOptions} */({
                    fillColor: color,
                    strokeColor: color,
                    strokeWeight: 2
                });
            });

As you can see the default color is Green and both of Iran and Australia have got different colors.

enter image description here

Notice: from here you can create different GeoJSON files according to your requirements such as the file size, covering the area and the resolution.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...