I am trying to create the bubbles on my SVG map generated by Kartograph.I want to do something like this: http://kartograph.org/showcase/symbols/
The map loads but the symbol does not display. I have no errors thrown in the Javascript console.
$(document).ready(function() {var map = $K.map('#map');map.loadMap("mapfinal.svg", function() { // add layers map.addLayer('background', { styles: { fill: '#e8f9fb', 'stroke': 'none' } }); map.addLayer('world', { styles: { fill: '#f5f3f2', 'stroke': 'none' } }); map.addLayer('states', { styles: { fill: '#FFF', 'stroke': '#882222', 'stroke-width': 0.5, 'stroke-opacity': 0.4 } }); map.addLayer('urban', { styles: { fill: '#553344', 'fill-opacity': 0.6, 'stroke': 'none' } }); map.addSymbols({ type: kartograph.Bubble, data: [{ lon: -104, lat: 40.5, name: 'Berlin' }], radius: 40, location: function(d) { return [d.lon, d.lat] }, style: 'fill:#800000; stroke: #fff; fill-opacity: 0.5', });});});
I don't know what else to do. I have followed all the example code and read the docs.
أكثر...
The map loads but the symbol does not display. I have no errors thrown in the Javascript console.
$(document).ready(function() {var map = $K.map('#map');map.loadMap("mapfinal.svg", function() { // add layers map.addLayer('background', { styles: { fill: '#e8f9fb', 'stroke': 'none' } }); map.addLayer('world', { styles: { fill: '#f5f3f2', 'stroke': 'none' } }); map.addLayer('states', { styles: { fill: '#FFF', 'stroke': '#882222', 'stroke-width': 0.5, 'stroke-opacity': 0.4 } }); map.addLayer('urban', { styles: { fill: '#553344', 'fill-opacity': 0.6, 'stroke': 'none' } }); map.addSymbols({ type: kartograph.Bubble, data: [{ lon: -104, lat: 40.5, name: 'Berlin' }], radius: 40, location: function(d) { return [d.lon, d.lat] }, style: 'fill:#800000; stroke: #fff; fill-opacity: 0.5', });});});
I don't know what else to do. I have followed all the example code and read the docs.
أكثر...