
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
geojson2svg
Advanced tools
Converts geojson to svg/path string given svg viewport size and maps extent.
Converts geojson to svg string given svg viewport size and maps extent. Check world map and color coded map examples to demostrate that its very easy to convert geojson into map.
Using in node.js or with browserify
npm install geojson2svg
For including in html page standard way, download file dist/geojson2svg.min.js
<script type="text/javascipt" src="path/to/geojson2svg.min.js"></script>
This creates a global variable 'geojson2svg'
geojson2svg is also available on cdnjs and can be included like:
<script type="text/javascipt" src="//cdnjs.cloudflare.com/ajax/libs/geojson2svg/x.x.x/geojson2svg.min.js"></script>
Using in node.js or with browserify
var geojson2svg = require('geojson2svg');
var converter = geojson2svg(options);
var svgString = converter.convert(geojson,options);
Using in browser standard way
var converter = geojson2svg(options);
var svgString = converter.convert(geojson,options);
convert function returns array of svg element string
{
width: 256,
height: 256
}
{
left: -20037508.342789244,
right: 20037508.342789244,
bottom: -20037508.342789244,
top: 20037508.342789244
}
output: 'svg'|'path' default is 'svg'
'svg' - svg element string is returned like '<path d="M0,0 20,10 106,40"/>'
'path' - path 'd' value is returned 'M0,0 20,10 106,40'
a linestring
fitTo 'width' | 'height' Fit ouput svg map to width or height.
explode: true | false, default is false. Should multigeojson be exploded to many svg elements or not.
attributes: json object containing attribute(key) and values(value) for all svg elements. These attributes would be added to svg string. If option is like
{"attributes": {"class": "mapstyle"}}
returned string would be
'<path class="mapstyle" d="M0,0 20,10 106,40"/>'
pointAsCircle: true | false, default is false. For point geojson return circle element for option:
{ "pointAsCircel": true }
output svg string would be:
'<cirlce cx="30" cy="40" r="1" />'
r: radius of point svg element
callback: function, accept function that will be called on every geojson conversion with output string as one input variable e.g:
{ "callback": function(svgString) {
// do something with svgString
}}
Callback function could be used to render SVG string.
The options 'attributes', 'r' and 'callback' can also be given in convert function
var svgString = convertor.convert(geojson,
{
"attributes": ...,
"r": ...,
"callback": function
}
mapExtent is critical option default are the extents of Web Mercator projection ('EPSG:3857') or also known as Spherical Mercator. This projection is used by many web mapping sites (Google / Bing / OpenStreetMap). In case your source data is in geographic coordinates, it can be converted on the fly to Web Mercator Projection using reproject-spherical-mercator or reproject or proj4js. Check my world map example for detail.
Converts geojson LineString to svg element string:
var converter = geojson2svg(
{
viewportSize: {width: 200, height: 100},
mapExtent: {left: -180, bottom: -90, right: 180, top: 90},
output: 'svg'
}
);
var svgString = converter.convert(
{type:'LineString',coordinates:[[10,10],[15,20],[30,10]]}
);
//svgString: ['<path d="M105.55555555555556,44.44444444444444 108.33333333333333,38.888888888888886 116.66666666666666,44.44444444444444" />']
Converts geojson Polygon to svg path data 'd' string:
var converter = geojson2svg(
{
viewportExtent: {width: 200, height: 100},
mapExtent: {left: -180, bottom: -90, right: 180, top: 90},
output: 'path'
}
);
var pathData = converter.convert(
{
"type": "Polygon",
"coordinates": [
[[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
]
}
);
// pathData: ['M116.66666666666666,44.44444444444444 122.22222222222221,27.77777777777778 111.11111111111111,27.77777777777778 105.55555555555556,38.888888888888886 116.66666666666666,44.44444444444444Z']
Check my blog maps-on-blackboard for more detailed examples.
Once you run
npm install
then for running test
npm run test
to create build
npm run build
##License This project is licensed under the terms of the MIT license.
FAQs
Converts geojson to svg/path string given svg viewport size and maps extent.
We found that geojson2svg demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.