Comments (3)
Some of the examples actually use GeoJSON https://manubb.github.io/Leaflet.PixiOverlay/leg-t2.html (well, it's TopoJSON which is an extension of GeoJSON)
from leaflet.pixioverlay.
Some of the examples actually use GeoJSON https://manubb.github.io/Leaflet.PixiOverlay/leg-t2.html (well, it's TopoJSON which is an extension of GeoJSON)
Hello guy, i found a way to add geojson based in these files. the problem is that the documentation doesn't have a good specification of pixi.js uses to draw a geojson. However I found a way that uses the library and the pixi.js library to draw polygons through geojson data:
This is a hook i created that draw the poligon using geojson data:
import "leaflet-pixi-overlay/L.PixiOverlay";
import "pixi.js";
import * as d3 from "d3"
const useCreatePolygon = (data, map, escala = undefined, escalaVar = undefined, pixiContainer) => {
// POLÍGONOS
var firstDraw = true;
var pixiOverlay = L.pixiOverlay((utils) => {
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var colorescala = d3.scaleLinear()
.domain([0, 33, 66, 100])
.range(["#D2DFFF", "#7D96E8", "#577DE8", "#295FFF"]);
PIXI.utils.clearTextureCache();
const drawPoly = (color, alpha) => {
return (poly, properties) => {
var shape = new PIXI.Polygon(poly[0].map(function (point) {
var proj = project([point[1], point[0]]);
return new PIXI.Point(proj.x, proj.y);
}));
var pixiPolygon = new PIXI.Graphics();
pixiPolygon.beginFill(color, alpha);
pixiPolygon.drawShape(shape);
pixiPolygon.lineStyle(0.5, 0x000000);
pixiPolygon.drawShape(shape);
if (poly.length > 1) {
for (var i = 1; i < poly.length; i++) {
var hole = new PIXI.Polygon(poly[i].map(function (point) {
var proj = project([point[1], point[0]]);
return new PIXI.Point(proj.x, proj.y);
}));
pixiPolygon.drawShape(hole);
pixiPolygon.lineStyle(0.5, 0x000000);
pixiPolygon.drawShape(hole);
pixiPolygon.addHole();
}
}
// OnClick
pixiPolygon.interactive = true;
pixiPolygon.cursor = 'pointer';
pixiPolygon.on('pointerdown', onClick);
function onClick() {
console.log(`${properties.NM_BAIRRO} [${escalaVar}]: ${properties[escalaVar]}`)
}
container.addChild(pixiPolygon);
};
}
if (firstDraw) {
var geojson = data
geojson.features.forEach(function (feature, index) {
var alpha, color;
var tint = d3.color(colorescala(100)).rgb();;
if (feature.properties[escalaVar] !== undefined) {
var valor = feature.properties[escalaVar]
}
if (escala !== undefined) {
if (valor < escala) {
tint = d3.color(colorescala(0)).rgb();
} else if (valor > escala && valor < escala * 2) {
tint = d3.color(colorescala(33)).rgb();
} else if (valor > escala * 2 && valor < escala * 3) {
tint = d3.color(colorescala(66)).rgb();
} else if (valor > escala * 3) {
tint = d3.color(colorescala(100)).rgb();
}
}
color = 256 * (tint.r * 256 + tint.g) + tint.b;
alpha = 0.5;
if (feature.geometry === null) return;
if (feature.geometry.type === 'Polygon') {
drawPoly(color, alpha)(feature.geometry.coordinates, feature.properties);
} else if (feature.geometry.type == 'MultiPolygon') {
feature.geometry.coordinates.forEach(drawPoly(color, alpha));
}
});
}
firstDraw = false;
renderer.render(container);
}, pixiContainer);
pixiOverlay.addTo(map);
}
export default useCreatePolygon;
This is a code in a Map component i use this hook to create a polygon on the map
if (mapContainerRef.current) {
// MAPA
mapState = (L.map(mapContainerRef.current).setView(coordenatesState, zoomState)); // Chicago origins
const mapTiles = '//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png';
const osmCPLink = '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
const mapCPLink = '<a href="http://maps.stamen.com/toner">Stamen Design</a>';
L.tileLayer(mapTiles, {
attribution: `${osmCPLink} | ${mapCPLink}`,
detectRetina: false,
minZoom: minzoom,
maxZoom: maxZoom,
noWrap: false,
subdomains: 'abc'
}).addTo(mapState);
var pixiContainer = new PIXI.Container();
// Gera polígono com ou sem choropleth
let variable;
if (dataState) {
if (dataState.features[0].properties[choroplethVariableState] !== undefined) {
variable = choroplethVariableState;
}
useCreatePolygon(dataState, mapState, choroplethScale, variable, pixiContainer);
}
from leaflet.pixioverlay.
For more information i created a repo that uses a lot of feutures in the React Projecet based in leaflet-pixi-overlay LINK
from leaflet.pixioverlay.
Related Issues (20)
- Render stage to a texture
- Remove and add a new layer
- BUG: Library doesn't work with latest version of leaflet. HOT 4
- WebGL: CONTEXT_LOST error HOT 1
- Stop propagation HOT 1
- Change the order and style of multiple pixi overlays after adding to the map
- Add support for PixiJS@7 HOT 6
- What is included in the example.min.js at many-markers example? HOT 1
- There is way to add a interactive polygon and a marker in the same PIXI Conteiner? HOT 5
- examples HOT 4
- Using Vue3 HOT 1
- PIXI v7 events HOT 1
- Help with custom coordinates HOT 8
- Resolved, texture image not loading HOT 1
- Error after updating the Pixi version HOT 3
- Adapting Pixi to Openlayers
- Unable to render large (~18mb) multipolygon (?)
- Adding type definitions for L.pixiOverlay HOT 2
- Pixi 8 support?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.pixioverlay.