kartograph.js
Open source JavaScript renderer for Kartograph SVG maps
Kartograph.org
I want to plot around a million data points on an svg with qtip pop ups but obviously the memory cost is very high for this.
How can I reduce the cost of this operation?
Source: (StackOverflow)
I have image that is the map of a country with districts. For example this image http://upload.wikimedia.org/wikipedia/commons/c/ca/POLSKA_mapa_powiaty2.png. I want to trace/convert it to svg format to have each district as separate shape (polygon) - and later I want to use it in http://kartograph.org/. What program I have to use? And how?
I tried so far inkscape/photoshp but those didnt work.
Is there maybe some special tool/program to trace/convert bitmap to vectors?
Source: (StackOverflow)
I have modified this question to reflect some progress on discovering the problem. I am using the following python code to generate an SVG of the continental USA. The shapefile is irrelevant, as the problem I describe occurs regardless of what shapefile I use. The script is really simple. I basically just take a shapefile for the US and use a bounding box to exclude Hawaii and Alaska.
from kartograph import Kartograph
K = Kartograph()
blah={
"layers": [
{
"id":"mylayer",
"src":"/Users/austinc/Documents/shapefiles/states_21basic/states.shp",
}
],
"bounds":{
"mode":"bbox",
"data":[-130,25,-65,50],
},
"proj":{
"id":"mercator"
}
}
K.generate(blah,outfile='/Users/austinc/Desktop/mymap.svg')
The problem is that the svg generated by this code has incorrect coordinates associated with it. When I use javascript to try to map points on it, the points appear at the correct latitude, but are off by roughly 100 degrees of longitude.
When I use a pre-made SVG from Kartograph, I do not have this problem (I have not tried cropping away Alaska and Hawaii yet). So something about my python script is causing this but I don't understand what.
FIXED: The comment below got me thinking that maybe this was something to do with the projection. I removed the part of the python script that draws the graph as a mercator projection and this fixed everything. I'm not sure I understand why but if you are having a similar issue and find this question: try changing your projection or not using a projection at all.
Source: (StackOverflow)
I have been recently taking a look at kartograph. I understand that we generate the svg with kartograph.py and then use the svg in kartograph.js to render maps in a web interface.
I want to generate something like this http://kartograph.org/showcase/animated-symbols/. But using world map instead. The problem is I am very new to mapping and geo data. Its super difficult for me to find how to generate a svg only with country outlines using kartograph.py.
There is an example to test kartograph.py which generates a world map svg but its close to 2MB in size. Is this normal? Wont it delay the initial loading of the graph with a 2 MB svg ( atleast in poor internet connection).
Also the example uses some .shp files to draw the map, where can i get those files.
In other simple words, I am trying to find a simple end to end example to how to use kartograph, but it looks like one such thing is not available.I have googled for several times and just returned empty handed.
any pointers on how to generate the a simple world map with country outlines and what are layers, filters and explanation of few terms to get me started will be very helpful. Thanks in advance
Source: (StackOverflow)
Recently I started using Kartograph. I am inexperienced in SVG, so the map creation is creating headaches for me. After initial trouble creating a world map that outlines country borders - similar to this - and a few other things(city regions and some decorating elements), my problem boils down to a undocumented - or at least I haven't found it in the docs - error. I guess it is related with my ignorance towards the kartograph.py framework.
The json file I provide Kartograph looks like that:
{
"proj": {
"id": "lonlat",
"lon0": 20,
"lat0": 0
},
"layers": {
"background": {
"special": "sea",
"charset": "latin-1",
"simplify": false
},
"graticule": {
"special": "graticule",
"charset": "latin-1",
"simplify": false,
"latitudes": 1,
"longitudes": 1,
"styles":{
"stroke-width": "0.3px"
}
},
"world":{
"src": "ne_50m_admin_0_countries.shp",
"charset": "latin-1",
"simplify": false
},
"lakes":{
"src": "Lakes.shp",
"charset": "latin-1",
"simplify": false
},
"trees":{
"src": "Trees.shp",
"charset": "latin-1",
"simplify": false
},
"depth":{
"src": "DepthContours.shp",
"charset": "latin-1",
"simplify": false
},
"cities":{
"src": "CityAreas.shp",
"charset": "latin-1",
"simplify": false
}
}
}
I know the output file will be huge and the generation will take ages, but it is just a test. I will experiment with the "simplify" option later. Much of the code in the file is based on this tutorial. Also, the empty simplify clause might not be necessary, but kartograph complained about the lack of the option, so I added it.
The command I use is this one:
kartograph world.json -o world.svg
It runs for some time(I guess, parsing all the input files etc.) before aborting. Now, the error I am facing is this one:
cli.py, in render_map()
71: K.generate(cfg, args.output, preview=args.preview, format=format, stylesheet=css) kartograph.py, in generate()
46: _map = Map(opts, self.layerCache, format=format) map.py, in __init__()
50: me.bounds_poly = me._init_bounds() map.py, in _init_bounds()
192: features = self._get_bounding_geometry() map.py, in _get_bounding_geometry()
257: charset=layer.options['charset']
get_features() got an unexpected keyword argument 'filter'
I tried looking at the file which throws the error(map.py), but I realized quickly that there's just too much interaction in the files for me to grasp things quickly.
I hope the data I provided is sufficient for someone more familiar with kartograph than me to track the error down.
UPDATE: The error is still valid. I tested it on both a MacBook Pro and an Asus Netbook now(Arch and Bodhi Linux, respectively).
Thanks in advance,
Carson
Source: (StackOverflow)
I'm kicking around an idea for a side project and am looking for advice on which direction to go in terms of technology. I've done some research already, but am still fairly confused as to what the realistic options are.
I'd like to make an interactive map based on a fictional world (think Middle Earth), including a timeline filter and a details section for additional information on an event or location.
Desired Features:
- map on the left
- details pane on the right
- timeline slider/filter at bottom
- Territories
- color for political affiliation
- displays details in details pane
- labels
- labels for cities
Hurdles:
- Get a clean map image to work with
- Map image into intermediate format (svg, geojson, topojson?)
- Display map on webpage, style map, add animations, etc
Technologies
- SVG
- I'm pretty sure I could code all of this in SVG using events and boundaries. I've already been able to create SVG Paths from the image using GIMP, so converting the map into an SVG file seems plausible.
- The issue with doing it this way is I would end up doing all the work the hard way when there seems to be lots of frameworks for this kind of thing already.
- Kartograph
- La Bella Italia is a very nice example and would serve as a good starting point. I love the trade route animations and the border styling with the glow filters.
- The bonus here is that I know I can make an svg map, which is all this would need to get up and running.
- My issue here is it doesn't seem like Kartograph is as rich of a platform as D3.js. I'm not sure if I can double dip and link some D3 stuff with the kartograph events. If I could, that might be the solution.
- D3.js
- The sliders, animations(hover and selection), and topojson seem like they would be perfect. But the main issue I have here is getting my image converted into a GeoJson format. From what I can tell these formats are strictly for Real World maps, using longitude/latitude.
So there you have it! I'm hoping there is some good news on how I might convert my map image into topojson so I can enjoy the benefits of D3.js. If not, I suppose I could just try kartograph and wire the events up with D3 controls.
Thoughts?
Source: (StackOverflow)
I want to use Kartograph.js for creating an interactive map. My code is as follows:
var map = kartograph.map('#map');
map.loadMap('map.svg', function(map) {
map.addLayer('asia', { name: 'Asia' });
});
Code for map.svg can be seen here: http://pastebin.com/069xEJKm
My problem is, that after initializing the map, all I'm getting is the error - Uncaught TypeError: Cannot read property 'getAttribute' of undefined.
What can I do?
Source: (StackOverflow)
There is a very similar topic but solutions there didn't helped me.
I am trying to install and run kartograpgh.py tests from installation, and it breaks like this =>
C:\tests-kartograph>run_tests.py
Traceback (most recent call last):
File "C:\tests-kartograph\run_tests.py", line 1, in <module>
from kartograph import Kartograph
File "C:\Python27\lib\site-packages\kartograph.py-0.6.5-py2.7.egg\kartograph\_
_init__.py", line 2, in <module>
from kartograph import Kartograph
File "C:\Python27\lib\site-packages\kartograph.py-0.6.5-py2.7.egg\kartograph\k
artograph.py", line 8, in <module>
from map import Map
File "C:\Python27\lib\site-packages\kartograph.py-0.6.5-py2.7.egg\kartograph\m
ap.py", line 3, in <module>
from maplayer import MapLayer
File "C:\Python27\lib\site-packages\kartograph.py-0.6.5-py2.7.egg\kartograph\m
aplayer.py", line 2, in <module>
from layersource import handle_layer_source
File "C:\Python27\lib\site-packages\kartograph.py-0.6.5-py2.7.egg\kartograph\l
ayersource\__init__.py", line 11, in <module>
from shplayer import ShapefileLayer
File "C:\Python27\lib\site-packages\kartograph.py-0.6.5-py2.7.egg\kartograph\l
ayersource\shplayer.py", line 6, in <module>
from osgeo.osr import SpatialReference
File "C:\Python27\lib\site-packages\osgeo\__init__.py", line 21, in <module>
_gdal = swig_import_helper()
File "C:\Python27\lib\site-packages\osgeo\__init__.py", line 17, in swig_impor
t_helper
_mod = imp.load_module('_gdal', fp, pathname, description)
ImportError: DLL load failed: No se encontr¾ el proceso especificado.
I managed to install all dependent libraries, and also kartograph.py. But as soon as I run the tests provided with kartograph.py i get the error above.
My python version is:
C:\tests-kartograph>python
Python 2.7 (r27:82525, Jul 4 2010, 09:01:59) [MSC v.1500 32 bit (Intel)] on win
32
Type "help", "copyright", "credits" or "license" for more information.
I followed the solutions provided in the similar topic I mentioned above:
I have set both environment variables, also taking care of writing it ahead in the 'path' variable. The version of the GDAL core and its python binaries I have installed are:
- gdal-19-1500-core.msi GDAL
- GDAL-1.9.2.win32-py2.7.msi
And I also tried the core 'gdal-19-1600-core.msi', since i wasn't 100% sure the GDAL core I need, does't seem trivial to me this installation.
I have tried the installation of osgeo4w, which installs GDAL by its own, but it failed, so i don't have it installed right now. i am afraid that this left some kind of registration that would make my actual installation of GDAL and its DLL not being found by the execution of kartograph.py which calls gdal modules.
Help it's really appreciated, especially tips of how to track or locate the real problem :)
Source: (StackOverflow)
As a beginner i want to get the most basic example to work.
So i downloaded a map from here
Looked into the file to find that the id for the first and only 'g' is 'admin1'.
So, i started:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" rel='nofollow' href="map.css" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="k.css" type="text/css" />
<script type="text/javascript" src="/js/script.min.js"></script>
<script type="text/javascript">
$script(['/js/jquery.min.js'], 'jquery');
$script(['/js/raphael-min.js', '/js/kartograph.js', '/js/chroma.min.js'], 'kartograph');
</script>
</head>
<body>
<script>
$script.ready(['jquery','kartograph'], function() {
$(function() {
map = $K.map('#map');
map.loadMap('DEU.svg', function(map) {
map.addLayer({ id: "admin1" });
});
});
});
</script>
<div id="map"></div>
</body>
</html>
That is it basically - it is not showing anything. I checked the file locations, and checked if everything after the $script.ready function was running. all ok - but no result.
I took all the files I include from the kartograph lib folder (on git) - and added the k.css and a small map.css
map.css looks like this:
#map {
width: 900px;
height: 900px;
}
Source: (StackOverflow)
I can't get Kartograph.js to display my .svg map. Here's what I've done:
I've successfully made a .svg map from a .shp using the most basic json file I could with kartograph.py, according to Kartograph's docs, doing the basic world.json -o world.svg. Here's the json:
{
"layers": [{
"src": "ne_50m_admin_0_countries.shp",
"simplify": 3
}]
}
I've set up a simple http host with python and directed chrome to the host, since I understand you can't do this locally.
I've written the code below. I don't get any errors, so I don't what I've done wrong. Could it be that I haven't put in any layers? I wanted to make as simple an example as possible for my first try.
<div id="map"></div>
<script>
function loadMap() {
var map = kartograph.map('#map');
map.loadMap('world.svg', function() {
});
};
</script>
<script src="jquery-1.11.0.min.js"></script>
<script src="kartograph.js-master/dist/kartograph.js"></script>
<script src="raphael-master/raphael-min.js"></script>`
Thanks guys.
Source: (StackOverflow)
I'm trying to create an animation of the population density of the Appalachian region from roughly 1790 to 2010 in decennial steps at the county level.
I've successfully created a choropleth for 2010 by modifying what was done in this tutorial by Nathan Yau. I've run into a few problems. For one, US county boundaries evolve rapidly over time so I can't use the same SVG file as in the tutorial. I think I need to do the following:
- Obtain historical county boundaries as GIS files from here.
- Convert GIS files into SVG files using Kartograph (after installing its numerous dependencies).
- Obtain population data (with FIPS info) for each county in Appalachian region since 1790 from US census data.
- Mimic what was done in tutorial to create choropleth for each decade and stitch together into animation.
This just seems insanely complicated for something so simple and I'm new to a lot of this so I'm not convinced I'll be able to get all of it to work. I guess my questions are the following:
Will the strategy I outlined work? Is there a better/simpler way to do what I'm trying to do?
Also, as for getting the census data, this also seems harder than it has to be. I just want a simple .csv file with say FIPS label, county name, and population for a given year, and yet the best I can find is something like this with a link to the actual source in some arcane format.
Thanks for any help!
Source: (StackOverflow)
I'm using kartograph.js and I have an svg of several connected areas/paths and I want to highlight the clicked area by coloring it and then displaying other information about it on another div. I'm having trouble with removing the highlight of a shape when you click a new shape. how can i accomplish this? thanks!
var previd=0;
var prevpath;
function mapLoaded(map) {
map.addLayer('mylayer', {
tooltips: function(d) {
return [d.watershedname,"area: "+d.area];
},
styles: {
stroke: '#aaa',
fill: '#f6f4f2'
},
click: function(d, path) {
// @path is a Raphael.element, do with it whatever you like
// @d holds the data attached to each path
//retrieve and set text to other div
$("#infoname").text(d.watershedname);
$("#infoarea").text(numberWithCommas(Math.floor(d.area))+" hectares");
//highlight the selected path
path.attr('fill', 'red');
//i'm trying to get the previous path by id here
//so i can remove the previous highlight
//doesn't work
prevpath =mylayer.getById(previd);
prevpath.attr('fill','blue');
//set the new id for later access
previd=path.attr('id');
}
});//end of add layer
}//end of mapLoaded
Source: (StackOverflow)
Running into a few different problems here. Trying to install Kartograph and first installing dependencies. Here are my steps and results thus far:
- Install GDAL from .pkg. Goes well. No problems here.
- Try to install Kartograph using the default instructions for OSX with several packages. This fails with the following errors:
File "", line 4, in
main.gdal_config_error: [Errno 2] No such file or directory
Command python setup.py egg_info failed with error code 1 in
/Users/chris/ENV/build/GDAL
- Ok, no dice. So then I try the install excluding GDAL as that seems to be presenting a problem to pip's install of Kartograph. That doesn't work either and produces the following errors:
raise KeyError('please set the environment variable PROJ_DIR to point to the location of your proj.4 installation')
KeyError: 'please set the environment variable PROJ_DIR to point to
the location of your proj.4 installation'
---------------------------------------- Command python setup.py egg_info failed with error code 1 in /Users/chris/ENV/build/pyproj
Now, I've edited the activate script of my virtualenv with the PYTHONPATH variable assignment per the Kartograph documentation. However, not sure that helped or has changed anything.
Has anyone run into a similar sequence of errors and if so, how did you solve this issue?
Source: (StackOverflow)
Situation:
There is a complex map in Kartograph.js with many svg paths.
For example this one :
http://kartograph.org/showcase/choropleth/
Problem:
init of the map is slow (up to 5 seconds)
On the other hand when complex map is rendered directly via Raphael.js like here:
http://raphaeljs.com/world/
the init is basically immediate.
Question:
Is there an easy way to speed up the first example?
My thoughts:
I was thinking that in Kartograph.js there is processing of raw svg and maybe even some resizing of paths, which is slow. Maybe it could be somehow precompiled into raphael calls, but I don't know where to even start.
I'd be very grateful for any hint.
Source: (StackOverflow)
I'm using kartograph on a map to adapt style/tooltip depending on data, so I follow this showcase : http://kartograph.org/showcase/choropleth/
map.addLayer('layer_0', {
styles: {
'stroke-width': 0.7,
fill: function(d) {
return color(stars[d["nuts-id"]]?
stars[d["nuts-id"]].total_stars:
0);
},
stroke: function(d) {
return color(stars[d["nuts-id"]]?
stars[d["nuts-id"]].total_stars:
0).darker();
},
},
tooltips: function(d) {
return [d["nuts-id"], stars[d["nuts-id"]]?
stars[d["nuts-id"]].total_stars:
0];
}
});
The map is good, now I want to edit it.
For the style I did it successfully with :
map.getLayer('layer_0').style('fill', function(d) { ... });
map.getLayer('layer_0').style('stroke', function(d) { ... });
But I don't manage to edit the tooltip function...
I try this solution : https://github.com/kartograph/kartograph.js/wiki/Tooltips
but I get a "map.tooltips is not defined" error...
Source: (StackOverflow)