ChartJS vector maps - javascript

I'm using ChartJS to include some maps in my website but the ChartJS library doesn't have the map I want.
I want to know if this type of vector maps is something easy to find free online or do you have to build from scratch?
ChartJS website isn't clear about that.
Thanks for your time!

From what I've noticed in vectormap-data/world.js file map data is an array of objects and each object has a coordinates field. It looks like each object corresponds to some country.
You may try to change those coordinates and see how this affects the map. Maybe, that will allow you to create you own map data.
Good luck!

Related

Using Google Maps API with custom tiles

So, basic gist is, I have my own tiles of not the real world I'd like to display with the Google Maps viewer. I've found examples of how to split an existing single image into tiles for use with it, but nothing that deals with setting up your own tiler.
I have map data such as this:
https://dl.dropboxusercontent.com/u/44766482/superimage/index.html
Which right now is just a bunch of 1600x1600 images in an html table. This naive method works, but I'd like to switch to the more robust google api for better zooming and smarter streaming of the image data.
I've been unable to find a good example of how to generate your own tiles for the zoom levels and bring it together with some html/js.
If you want some more information for the goal process;
I have a python script that can output any size tiles of the map, at any zoom level. I'd like to bundle those together into a google maps api website. But in my own efforts I have not found a good example or documentation of how to do that. For one, I can only find examples of how the zoom levels work for the real world map, but not for a custom one.
Edit:
Got most things working as I want them, but I'm still confused regarding the "center" that can be set, as it's in lat and lng, which don't apply. I'd also like to set boundaries as currently it tries to load .png files outside of the maps range.
My current progress:
https://dl.dropboxusercontent.com/u/44766482/googlemapspreview/index.html
I think what you are looking for is the google maps imageMapTypes:
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
Basically, each zoom level is the 4 lower zoom tiles combined. A Projection function can be skipped to get orthogonal mapping.

custom maps in zingchart

I am using the Zingchart library to add a map and charts to my website.
For the Map there are some predefined maps included in the library. Is there a way I can define my own map? I am looking for a way to enter the coordinates of the polygons
I want with their name, and they get loaded.
I tried too see how they are done by looking at the source code but I have the minified version and its not very intuitive to figure out how to modify them.
The Zingchart Maps Module docs include a handful country maps as demos. As you said, these are the predefined maps the library comes with. If you load up one of the maps (on their docs page) and right click, their custom context menu should show the option "view source", amongst other export options. Within the result window, you will see the Parsed JSON tab. This JSON object defines the map. For example, an excerpt of Argentina's map definition looks like this:
...
{
"type":"poly",
"id":"NQ",
"points":[[183,180],
[183,181],
[184,182],
[185,182],
[185,183],
[185,184],
[186,185],
[186,185],
...
In order to define you own map, you simply need to mirror this structure. Start by cloning any of the included maps and substitute in your own values for points.
Hope that helps.

interpolation method for google maps

I wanted to ask you about the way to make spatial interpolation in google maps API. This means- I have values for some points inside an area and want to recalculate values for every point in this area (and create an raster overlay).
In "offline" GIS softwares, there are more methods to do this. For example Kriging (http://en.wikipedia.org/wiki/Kriging).
Thanks for answer
There is no real practical way to do such a thing. Spatial Interpolation is something you really need a full-blown GIS to accomplish. It requires storing, analyzing, and presenting data in way that ArcGis or QGis is best suited for. There is some new feature in ArcGis Online that works with Google Maps API but I don't know much about it and am unsure if it would be any help for you but a link is here.
I know, its not something geostatiscically correct, but I have made this:
- I have created a net of rectangle polygons.
- I have connected all my points to polygon they lie and have made mean value for polygons with at least one point
- I have checked every polygon without points and at least 2 neighbourly polygons with points, and have made mean from this neighbourly values
- I have checked again all my polygons with values and at least 2 neighbourly polygons with values and smoothed origin values according to the neighbours´ values.

Using a slider controller to update map data/shading? Example included

How can I create a similar map without using Flash?
map example here
I have a map of the U.S. with each state colored based on annual data (heat map). For instance, obesity rates from 2000 to 2010 (each year would have different values for each state). I would like the user to scrub with the slider to update the map for each year similar to the example above.
I'm very new to Javascript so I'm wondering if there's a library that could help. I'm aware of raphael.js but haven't seen any examples of this particular behavior. Thanks for any pointers.
Yes you can use the OpenLayers API to create similar heat map without using Flash. OpenLayers API is based on javascript and pretty simple to use. First, you need to look into the basics:
http://openlayers.org/
OpenLayers HeatMap Examples:
http://maps.seai.ie/wind/
http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/heatMap.html
http://sloweb.org.uk/ollie/heatmap/

JavaScript SVG World Map library that works offline?

I'm looking for a JavaScript library that allows me to build SVG maps from locally hosted shape data (to allow users to use the application without internet connection).
1) Where should I be looking?
2) Is GeoJson a good candidate for shape data?
3) Where do I find shape data for country borders and (1-level deep) subnational entities?
If the library also supported drawing circles with the center point at specific lat/long coordinates, that would be a bonus :)
You could try to use jVectorMap for that. It has a converter to generate custom maps.
Raphaeljs should meet all your requirements. There is an actual example of a map right here http://raphaeljs.com/australia.html. Of course you'll need to provide the appropriate data.

Categories