Pie chart instead of markercluster icons in google maps - javascript

I have a requirement where I would need to create a google map with markers clustering functionality.
The change here is customising the cluster with the pie chart instead of the default cluster.
Say for example,
I have markers of different category and I need to show the cluster containing the number in each category similar to the one shown in the following links
http://bl.ocks.org/gisminister/10001728
http://www.ilfattoquotidiano.it/patrie-galere-deaths-italian-prisons-since-2002-2012/
but with google maps. How can I do this? I have no clue of doing it.
Thanks in advance.

I had to fulfil the exact same requirement so I solved it by extending the Google Maps Marker Cluster Library. You can download the solution from my GitHub repository: https://github.com/hassanlatif/chart-marker-clusterer

Related

Does leaflet allow me to control the types of roads shown?

I want to control which types of roads show from this OSM highways list at various zoom levels.
I could not find the answer in the Leaflet docs. If you do, please link me.
edit:
Maybe i need to go one step back in the making stack and use one of these frameworks? http://wiki.openstreetmap.org/wiki/Frameworks#Generating_map_images
It is not possible to alter displayed map style in Leaflet.
Probably the fastest way to achieve your goal is:
Create your map style in Mabox Studio, where you will specify the road types to be displayed at various zoom levels. Mapbox will render the map tiles for you and expose them via URL.
then display the tiles created in Mapbox Studio in Leaflet (or Mapbox.js which is build above leaflet) simply by altering the map tiles URL you use when you initialize leaflet.

Issues with toggling layers with mapbox.js

I am having issues with toggling map layers with mapbox.js. Using the code from [https://www.mapbox.com/mapbox.js/example/v1.0.0/layers/] it pulls the basic mapbox base maps ex. mapbox.outdoors or mapbox.satellite as toggle layers, but the polygons on the personal map layer does not appear. I know that the map can be pulled by itself, but when I try to add it to a toggling map, the polygons do not appear. I am not sure if it is a problem with the code itself that isn't allowing my personal map to show, or if there is an issue with my mapbox map.
My github repository is https://github.com/beyeraut/mappingmv/blob/gh-pages/attempt.html
Any ideas are welcome!

How to create a store map using LeafLet

Im looking to create a map that can be interactive.
The best option that I found is leaflet, the thing is I don't find any resource explaining how to create my own map.
Im looking to create a mall map where user can see all the stores, fountain ...
How could I achieve that ?
The best place to start would be the Leaflet examples page:
http://leafletjs.com/examples.html
Here is the quick start guide: http://leafletjs.com/examples/quick-start.html
Update
To create an indoor map, you can use tools such as QGis and Mapbox Studio to build the map and generate the map tiles(used for web). Then you can use your custom map tiles as a tile layer in leaflet to provide zoom in/out functionality and markers.

Take an image from google map

I have a problem with google map now. That is I dont know how to capture a picture from google map. I developed my app which used google map api ver3 and it can show multiple markers, lines, my app's icons, circles and many things like that. So, it's hard to use Google static map API url such as
maps.googleapis.com/maps/api/staticmap?center=Boston,MA
&visible=77+Massachusetts+Ave,Cambridge,MA%7CHarvard+Square,Cambridge,MA&size=512x512&sensor=true_or_false
Hope everyone there suggest any solution for me! Thank you !
P/S: I used google map v3, asp.net.

Give different color to each country in google map

Does anyone know how to give a different color to each country in a google map?
e.g:
in the world map
Blue overlay to UK, then RED china...etc
I wonder if google provide API to give color to each country
Thanks
Using Google Maps this is really not easy, as #oezi said you would need to build overlays of every country you want to color, which frankly sounds like a mess.
But if you don't need all of the functionalities of Google Maps, perhaps you can use a Map Chart from the fantastic Google Chart Tools (aka Chart API). You can check and tinker with a working example of a Colored Map (among some others) in the interactive Chart Wizard
2017 UPDATE: This answer is quite old and as such the Map Charts API has been deprecated by Google. You can use the Geocharts from the Google Charts API instead:
https://developers.google.com/chart/interactive/docs/gallery/geochart
Hope this helps!
you may check this question,it's the same question you are asking.
How to color countries using google maps?
it's talking about google Geocharts in google maps.
there is a possibility to change the map style. and there is a very nice interactive example here - but, as far as i can see, it isn't possible to change the style of a specific country using this, so you'll have to build your own overlays using polygons.
First, find the shape file in .kml format. Tip: try googling "kml uk" or "kml china".
Once you have the KMLfile, host it somewhere and then call it as a var inside your Google Maps API initMap like this:
var myCustomRegion = new google.maps.KmlLayer({
url: 'FULL_URL_TO_YOUR_SHAPE_FILE',
map: map
});
Now your shape is laid into your map.
You can style the shape using the <LineStyle> and <PolyStyle> tags inside the KML file itself.

Categories

Resources