I'm using Google Image Charts (yes, I know it's deprecated :-)) to draw circular icons on a Google Map, i.e.:
http://chart.apis.google.com/chart?cht=it&chs=48x48&chco=33FF33,000000ff,ffffff01&chl=a&chx=000000,0&chf=bg,s,00000000&ext=.png
Is there a way to draw square icons instead? Unfortunately all references to "cht=it" chart type seems to be disappeared from the Net.
Is there an alternative to Google Image Charts for drawing dynamic icons on a Google Map? I need to control dimensions, color, shape and label.
Is there an alternative to Google Image Charts for drawing dynamic
icons on a Google Map? I need to control dimensions, color, shape and
label.
Yes there is. What you're looking for is Drawing on the Map. Here you can use your custom icons, whatever shape they maybe.
Some actual examples for the things you've mentioned:
-Labels example
-Square shapes
-Custom shapes
-Draw on the Map
Related
What I'm trying to achieve is to map icons, labels, polygons to raster images.
And to have an ability to zoom.
I.e. to map furniture to offices / buildings.
Also it's needed to be said that user should work with it through API (through web site interface).
Recently I've spot Mapbox.
While Mapbox is awesome and seems to be a good fit to achieve my goal, I find it hard to find docs for implementing it.
What I've found so far is:
I can use mapbox-gl-draw to draw polygons
I can upload datasets. Which consist of position, data. With that I can upload icons, labels and probably polygons.
The missing puzzle is: How I can work with raster images?
and
Should I position (edit) icons, labels on my own and later save to dataset? Or there already exist a functionality drag-drop out-of-box?
One idea is to use Mapbox with transparent background and to zoom raster image separately. Kind of synchronizing it with the map.
Any help would be appreciated
I believe this example from the mapboxGL examples shows what you're looking for: https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/.
Note that the radar layer, while it looks like a layer constructed in data, is simply a gif added as an image layer, with a bounding box of of four lngLat coordinates. https://www.mapbox.com/mapbox-gl-js/assets/radar.gif
I use such a map on my website, it's created by amCharts:
All regions are SVG path elements. I'm thinking how to put a chart.js (or any other) pie chart on each of them. The chart of chart.js is a canvas element. Is there any easy solution to achieve it? I could also change the map provider if neccessary.
This should be the effect:
There's a demo on the AmCharts website that shows how to do that. You essentially need to create image markers that you can place on your map using latitude and longitude coordinates and use the positionChanged event to create/update custom external divs which contain your pie charts.
I have some partly transparent tile layers for features on the map that would cost too much runtime performance drawn as vectors.
To order my layers, I use setZIndex on them. But it seems like a constraint that GeoJson layers are drawn on top of tile layers, even if their z index is smaller.
Is this a general limitation in Leaflet and how can I bypass it?
This may or may not work but I recently modified the canvas mask plugin :
https://github.com/domoritz/leaflet-maskcanvas
to display approximately 20k+ features in leaflet. Would that work for your purposes?
The solution is to create a custom map pane, set its z-index to be above the default GeoJSON pane and add the transparent tile layer to it.
I'm using the google charts library to make some interactive scatter plots. And I cannot find is whether you can have symbols other than circles as "markers" ? As far as I can see it was possible with the previous obsolete version of google charts. But is it impossible with the current one ?
Scatter chart "playground":
https://code.google.com/apis/ajax/playground/?type=visualization#scatter_chart
Currently (as of July, 2013) there is no way to do this within the chart options. You have a choice between circles and no markers, and that's it.
You could go through the code and change the SVG using javascript, changing the circles to rectangles, and manipulating the coordinates appropriately (or drawing paths, or whatever you'd like). That's really the only way to do it.
Edited to add:
Additionally, you could set a fill for the circles themselves using javascript, and make the fill any shape you'd like.
You can do it with the help of image charts. You can change the color and shape of the markers using this.Refer this link. An example for the different shape markers
Click here to see this. For more google charts related queries take a look at this jqfaq.com
I am fairly new to using the Google Maps API, but I have been playing around with getting an overlay of a gridded PNG image into Google Maps. Here is the url: http://www.nohrsc.noaa.gov/~lkarsten/Alaska_SWE.html.
Just a little background on the image being displayed. It's a gridded PNG file displaying snow water equivalent values at 0.01 degree lat/lon resolution with the bounds of the image being 48.0 - 72.0 degrees latitude and -126.0 to -168.0 degrees longitude.
When I use the ground overlay function (google.maps.GroundOverlay), the image is overlayed correctly. This url has the correct overlay positioning using google.maps.GroundOverlay: http://www.nohrsc.noaa.gov/~lkarsten/Alaska_SWE.html.20120312.
However, I wish to add features to the overlay, such as opacity, etc. You cannot do that with the GroundOverlay function, so I have been using the google.maps.OverlayView function, but I am getting some sort of weird distortion to the image. The extents seem to be fine, but it's as if the image has been stretched in the middle. The image was generated in lat/lon coordinates, so I am not quite sure why the image is being distorted in this manner. Perhaps it has to do with the Google Maps API Mercator projection?
Has anyone else encountered this issue before?
GroundOverlay support opacity, according to the API reference.
GroundOverlay class slides an image into multiple divs to minimize distortion for large areas. You need to implement similar logic if you want do a custom class.