pixi-overlay-marker-examples
Version:
sample using pixi-leaflet-markers
159 lines (138 loc) • 7.55 kB
HTML
<html style="height: 100%; margin: 0;">
<head>
<title>Pixi Prototype</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/node_modules/leaflet/dist/leaflet.css" />
<script src="/node_modules/leaflet/dist/leaflet.js"></script>
<script src="/node_modules/pixi.js/dist/pixi.js"></script>
<script src="/node_modules/pixi-filters/lib/pixi-filters.js"></script>
<script src="/node_modules/leaflet-pixi-overlay/L.PixiOverlay.js"></script>
<script src="/node_modules/pixi-overlay-markers/dist/PixiOverlayMarkers.web.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body style="height: 100%; margin: 0; overflow: hidden;">
<div style="position: absolute;
z-index: 9999;
top: 38px;
left: 10px;">
<button onClick="load('french-cities')">Load French Cities (~37k)</button>
</div>
<div style="position: absolute;
z-index: 9999;
top: 68px;
left: 10px;">
<button onClick="load('cities')">Load US Cities (~1k)</button>
</div>
<div style="position: absolute;
z-index: 99999;
bottom: 68px;
left: 10px;">
<div id="slidecontainer">
<input type="range" min="0" max="1" value=".5" step=".1" class="slider" id="myRange">
</div>
</div>
<div id="map" style="height: 100%; width: 100%;">
<div class="legend geometry top center hide">
<div class="wrapper">
<div class="content"></div>
</div>
</div>
</div>
<script>
var self = this;
var slider = document.getElementById("myRange");
slider.oninput = function() {
console.log("opacity", this.value);
if(self.pixiOverlayWrapper){
self.pixiOverlayWrapper.updateProperty({alpha:this.value});
}
}
self.map = L.map('map').setView([46.953387, 2.892341], 6);
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
subdomains: 'abcd',
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
minZoom: 4,
maxZoom: 18
}).addTo(self.map);
self.map.attributionControl.setPosition('bottomleft');
self.map.zoomControl.setPosition('bottomright');
const resources = {
'white': 'white-marker.png'
}
const colors = ['#FF0000', '#0000FF', '#FFFF00', '#FFA500'];
self.pixiOverlayWrapper = new PixiOverlayMarkers(self.map, resources, {
minScale: 0,
maxScale: 8
});
self.overlayMaps = {};
function load(city){
if(city === 'french-cities'){
map.setView([46.953387, 2.892341], 6);
} else if(city === 'cities') {
map.setView([37.49229399862877, -96.94335937500001], 4);
}
if(self.pixiOverlayWrapper.hasLayer(city)){
self.pixiOverlayWrapper.removeLayer(city);
}
const json = `${city}.json`; //;cities.json';
axios.get(json).then((result) => {
var markers = result.data.map(marker => {
marker.lat = marker.latitude;
marker.lon = marker.longitude;
return marker;
});
self.layer = self.pixiOverlayWrapper.createLayer(city, markers, (marker, textures) => {
//use random colors...
const index = Math.floor(Math.random() * colors.length);
const hexColor = self.pixiOverlayWrapper.convertColorToHex(colors[index]);
let markerSprite = new PIXI.Sprite(textures['white']);
markerSprite.tint = hexColor;
markerSprite.originalTint = hexColor;
markerSprite.buttonMode = true;
markerSprite.interactive = true;
markerSprite.hitArea = new PIXI.Circle(0, 0, 15);
markerSprite.alpha = .7;
let leafletMarker;
markerSprite.on('click', () => {
let content = "";//marker.city || marker.label;
debugger;
Object.keys(marker).forEach((key) => {
content += `${key} : ${marker[key]} <br/>`
})
let popup = L.popup({ className : 'custom-popup' }).setContent(content).setLatLng([marker.lat, marker.lon]);
setTimeout(() => {
popup.openOn(self.map);
}, 0);
});
markerSprite.on('mouseover', (event) => {
//const hexColor = self.pixiOverlayWrapper.convertColorToHex("#00000");
markerSprite.tint = hexColor;
markerSprite.alpha = 1;
markerSprite._runTransformation = (sprite, project, scale, invScale) => {
let newScale = .65 / scale;
sprite.scale.set(newScale);
}
//markerSprite.filters = [new window.__pixi_filters.GlowFilter(15, 2, 1, 0xFF0000, 0.5)];
markerSprite.filters = [new window.__pixi_filters.GlowFilter(5, 8, 8, 0x22228c, 1)];
self.pixiOverlayWrapper.update();
});
markerSprite.on('mouseout', () => {
//markerSprite.tint = markerSprite.originalTint;
markerSprite.alpha = .7;
markerSprite._runTransformation = (sprite, project, scale, invScale) => {
sprite.scale.set(invScale);
}
markerSprite.filters = [];
self.pixiOverlayWrapper.update();
});
return markerSprite;
});
//self.pixiOverlayWrapper.createLayer(city, markers);
self.pixiOverlayWrapper.update();
});
}
</script>
</body>
</html>