CODEWITHSUNDEEP
google-mapsmapsbing-maps
Wojtek B
Wojtek B

Reputation: 170

Despatch map using google maps or other

Is it possible to generate map like on the image, using google maps or something similar? Zoom in/out must work too. Initially map display 1574 items for France, when zoom-in then we can see Paris 1000 and Lyon 574. enter image description here

Upvotes: 0

Views: 40

Answers (1)

rbrundritt
rbrundritt

Reputation: 18003

Yes, there are several ways to do this. If you simply need a map that you can take a screenshot of, the easiest option is to use the map chart feature in Excel. https://support.office.com/en-us/article/create-a-map-chart-f2cfed55-d622-42cd-8ec9-ec8a358b593b

If you need this in web app, you can do this with Bing Maps fairly easily. To generate map like what you have provided, do the following:

  1. Hide the base maps by setting the map type to Mercator. Add mapTypeId: Microsoft.Maps.MapTypeId.mercator as a map option when loading the map. This will provide you with a blank canvas.
  2. Retrieve the boundaries for the countries you need from the Bing Spatial Data Services. This is easy to do in the Bing Maps V8 control using the GeoData API: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#sdsLoadMultipleBoundaries+JS
  3. Cross reference your data with each boundary and color code as needed. Here is an example: http://bingmapsv8samples.azurewebsites.net/#GeoData%20Choropleth%20Map
  4. For the labels, use pushpins with a transparent icon. There are three option properties for text; text, title, subtitle. The text value is always visible, the title and subtitle values will hide/show to prevent collisions between labels which is nice. I recommend using the title value for country name and the subtitle value for the value. https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#pushpinLabels+JS Additionally, you will need to know where to place the pushpins. For this there re a couple of options. One is to generate a LocationRect object from the shape using Microsoft.Maps.LocationRect.fromShape function, and then using it's center value. This will work for some, but not all polygons. The other option is to load the spatial math module and then use the centroid function. https://msdn.microsoft.com/en-US/library/mt762861.aspx

Upvotes: 1

Related Questions