
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.
mixmap-georender
Advanced tools
a mixmap layer for rendering peermaps georender data
var mixmap = require('mixmap')
var regl = require('regl')
var prepare = require('mixmap-georender/prepare.js')
var getImagePixels = require('get-image-pixels')
var decode = require('georender-pack/decode')
var lpb = require('length-prefixed-buffers')
var mix = mixmap(regl, { extensions: [
'oes_element_index_uint', 'oes_texture_float','EXT_float_blend' ] })
var map = mix.create({
viewbox: [+36.2146, +49.9962, +36.2404, +50.0154],
backgroundColor: [0.82, 0.85, 0.99, 1.0],
pickfb: { colorFormat: 'rgba', colorType: 'float32' }
})
var geoRender = require('mixmap-georender/index.js')(map)
var draw = {
area: map.createDraw(geoRender.areas),
lineStroke: map.createDraw(geoRender.lineStroke),
lineFill: map.createDraw(geoRender.lineFill),
lineStrokeT: map.createDraw(geoRender.lineStroke),
lineFillT: map.createDraw(geoRender.lineFill),
point: map.createDraw(geoRender.points),
pointT: map.createDraw(geoRender.points),
}
function ready({style, decoded}) {
var prep = prepare({
stylePixels: getImagePixels(style),
styleTexture: map.regl.texture(style),
decoded
})
var zoom = Math.round(map.getZoom())
var props = null
update(zoom)
map.on('viewbox', function () {
var z = Math.round(map.getZoom())
if (zoom !== z) update(z)
zoom = z
})
function update(zoom) {
props = prep.update(zoom)
draw.point.props = [props.pointP]
draw.pointT.props = [props.pointT]
draw.lineFill.props = [props.lineP]
draw.lineStroke.props = [props.lineP]
draw.lineFillT.props = [props.lineT]
draw.lineStrokeT.props = [props.lineT]
draw.area.props = [props.area]
map.draw()
}
}
require('resl')({
manifest: {
style: {
type: 'image',
src: './example/style.png'
},
decoded: {
type: 'binary',
src: './example/kharkiv' || location.search.slice(1),
parser: data => decode(lpb.decode(Buffer.from(data)))
}
},
onDone: ready
})
window.addEventListener('resize', function (ev) {
map.resize(window.innerWidth, window.innerHeight)
})
window.addEventListener('keydown', function (ev) {
if (ev.code === 'Digit0') {
map.setZoom(Math.min(6,Math.round(map.getZoom()+1)))
} else if (ev.code === 'Minus') {
map.setZoom(map.getZoom()-1)
} else if (ev.code === 'Equal') {
map.setZoom(map.getZoom()+1)
}
})
document.body.appendChild(mix.render())
document.body.appendChild(map.render({ width: window.innerWidth, height: window.innerHeight }))
to run example:
npm install
.npm run download
. this should download the files kharkiv
and style.png
into the example
directory.npm run example
.Server running at http://192.168.129.29:9966/
. in the browser, navigate to that url.(the directions above assume that you have node.js and npm installed. instructions are for usage on the command line.)
see a live demo of this example
var mixmapGeorender = require('mixmap-georender')
var prepare = require('mixmap-georender/prepare')
return a collection of shaders for georender data from
map
, a mixmap instance created with
mix.create
.
you can set up all the shaders with:
var draw = {
area: map.createDraw(geoRender.areas),
lineStroke: map.createDraw(geoRender.lineStroke),
lineFill: map.createDraw(geoRender.lineFill),
lineStrokeT: map.createDraw(geoRender.lineStroke),
lineFillT: map.createDraw(geoRender.lineFill),
point: map.createDraw(geoRender.points),
pointT: map.createDraw(geoRender.points),
}
and then populate their props
arrays with data from the prepare() function
(see below) before calling map.draw()
.
create a prepare instance from:
opts.decoded
is an object created by georender-pack
decodeopts.styleTexture
is a texture created with
georender-style2png.opts.stylePixels
is the pixel data of the style texture. in the example we use
get-image-pixels to get the
data out of the texture created with georender-style2png.calling prepare.update(zoom)
returns all the properties you will
need when making your draw calls at a given zoom level. for example:
var props = prep.update(zoom)
draw.point.props = [props.pointP]
draw.pointT.props = [props.pointT]
draw.lineFill.props = [props.lineP]
draw.lineStroke.props = [props.lineP]
draw.lineFillT.props = [props.lineT]
draw.lineStrokeT.props = [props.lineT]
draw.area.props = [props.area]
map.draw()
npm install mixmap-georender
MIT
FAQs
a mixmap layer for rendering peermaps georender data
The npm package mixmap-georender receives a total of 10 weekly downloads. As such, mixmap-georender popularity was classified as not popular.
We found that mixmap-georender demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.