custom maps in zingchart - javascript

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.

Related

Mapbox getCanvas().toDataURL() not rendering markers

I'm trying to obtain a picture of a map using Mapbox. This should be very simple using
map.getCanvas().toDataURL(); The catch is that I have markers on my map and these are not present when I obtain the image using the method mentioned above.
This is an example of what I'm experiencing: https://codepen.io/loskiorama/pen/YzeeMqm
Is there any way I could get a "screenshot" of my map that includes the markers?
I'm bundling this on a single js file so I can't use solutions like html2canvas as I'd like to keep my file as small as possible.
Thanks!

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.

ChartJS vector maps

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!

How to generate a new, custom map for the JVectorMap jquery plugin?

Useful Links
JVectorMap: http://jvectormap.com/
Shopping Complex Example: http://jvectormap.com/examples/mall/
Note; Please view the above link for the converter link as due to having less than 10 reputation being a new member, I cannot add more than two links.
About the Shopping Complex
In the 'Useful Links' section of this question, I have added a link to a shopping complex example which can be found on the JVectorMap website. On this page, it explains the following; Example of custom map created from SVG using converter available here(see note). Please note that if you use map generated from SVG you need to position markers by pixel coordinates, not by latitude and longitude as in case of map generated from GIS.
What I need help with
I need to make similar maps for my local shopping complexes, whom the complex manager(s) ave provided a digital map. I need to know how to take this every-day image format of a building complex and turn it into a shape file and then how to use the file with the converter to create my own custom map.
I hope you are familiar with gimp or photoshop. I'm a gimp guy so the way I do it is I would take the digital map that you get from your employer and build paths around the selected regions you want included. Go to your paths option, right click and export path as SVG. Once you have the svg file go to http://svgto.jvectormap.com/ and copy/paste the SVG code inside your file into the converter. This will help you build a map.
Note you can also import the svg code directly into your html file without jvectormap.

How to highlight a region on Google Maps

How can I highlight/cover a region or multiple regions with different colors (for example 3 US states), using google maps polygon arrays?
I found a tuto on google code about how to draw a polygon but it's not giving detailed information.
Thank you for your help.
This documentation on Google is about as straight forward as you can get.
http://code.google.com/apis/maps/documentation/javascript/overlays.html
View the source of this page. Copy and paste the code into your own page and start from there.
http://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html
In the example above you simply need to make more than one instance of bermudaTriangle and name it something else and add it to the map.

Categories