vue-leaflet / vue2leaflet Goto Github PK
View Code? Open in Web Editor NEWVue 2 components for Leaflet maps
Home Page: https://vue2-leaflet.netlify.app
License: MIT License
Vue 2 components for Leaflet maps
Home Page: https://vue2-leaflet.netlify.app
License: MIT License
A brief look at the components and you only seem to be using loadash's _.forEach
, consider reducing the dependency size by using the modular parts of lodash you need rather than the entire library:
import _each from 'lodash.foreach'
_each(events, (eventName) => {...
enter "npm run dev", then open http://localhost:8080/examples/index.html in browser, dose not work.
vue2-leaflet.js:71Uncaught ReferenceError: require is not defined
at eval (eval at (http://localhost:8080/dist/vue2-leaflet.js:71:2), :1:18)
at Object. (http://localhost:8080/dist/vue2-leaflet.js:71:2)
at webpack_require (http://localhost:8080/dist/vue2-leaflet.js:30:30)
at Object.eval (eval at (http://localhost:8080/dist/vue2-leaflet.js:65:2), :1:66)
at eval (eval at (http://localhost:8080/dist/vue2-leaflet.js:65:2), :130:30)
at Object. (http://localhost:8080/dist/vue2-leaflet.js:65:2)
at webpack_require (http://localhost:8080/dist/vue2-leaflet.js:30:30)
at Object. (http://localhost:8080/dist/vue2-leaflet.js:57:2)
at webpack_require (http://localhost:8080/dist/vue2-leaflet.js:30:30)
at http://localhost:8080/dist/vue2-leaflet.js:50:18(anonymous function) @ external "url"?caec:1(anonymous function) @ vue2-leaflet.js:71__webpack_require__ @ vue2-leaflet.js:30(anonymous function) @ client?8d8f:1(anonymous function) @ client?d013:128(anonymous function) @ vue2-leaflet.js:65__webpack_require__ @ vue2-leaflet.js:30(anonymous function) @ vue2-leaflet.js:57__webpack_require__ @ vue2-leaflet.js:30(anonymous function) @ vue2-leaflet.js:50(anonymous function) @ vue2-leaflet.js:53webpackUniversalModuleDefinition @ vue2-leaflet.js:9(anonymous function) @ vue2-leaflet.js:10
Leaflet.Icon.Glyph.js:4 Uncaught ReferenceError: L is not defined(…)(anonymous function) @ Leaflet.Icon.Glyph.js:4
index.html:139 Uncaught ReferenceError: L is not defined(…)
Hi @KoRiGaN,
Is it possible to use sub-component inside the content of v-popup and v-tooltip, instead of pure HTML string inside the content
property?
So we can do this kind of stuff:
<div id="app">
<v-map :zoom="zoom" :center="center">
<v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
<v-marker :lat-lng="marker">
<v-popup>
<button @click='counter += 1'>{{ some_content }}</button>
</v-popup>
</v-marker>
</v-map>
</div>
Cheers,
Tortue Torche
Hi, i'm unable to set maxZoom above 18.
My code:
<template>
<div style="height: 100%; width:100%">
<v-map style="height: 100%; width:100%" :zoom="zoom" :center="center" :maxZoom="max" :minZoom="min">
<v-tilelayer :url="url" :attribution="attribution" :maxZoom="max" :minZoom="min"></v-tilelayer>
</v-map>
</div>
</template>
<script>
import Vue2Leaflet from 'vue2-leaflet';
export default {
name: 'home',
components: {
'v-map': Vue2Leaflet.Map,
'v-tilelayer' :Vue2Leaflet.TileLayer,
'v-marker': Vue2Leaflet.Marker
},
data () {
return {
zoom: 17,
max: 19,
min: 13,
center: L.latLng(6.328400, 8.105166),
url: 'http://localhost:5000/tiles/{z}/{x}/{y}/',
attribution: 'Demo'
}
}
}
</script>
<style>
</style>
I'd like to add pop-ups to markers, but have no idea on how would be the best way to do that.
The easiest one would be to simply create a new method to the pop-up component which... adds a pop-up. But I don't think that's really the best way.
The other would be to create a pop-up component. In terms of how Vue is supposed to work, that would be the best way (I think).
Or there might be a completely different way to do it and I'm completely lost here.
Either way, I'm open to making a pull request with the necessary changes and/or improving the examples.
Hi, I'm trying to include this dependency in my vue2 component but I'm getting the following error in my log when loading the page:
vue.js?3de6:427 TypeError: _vm._v is not a function
at Proxy.render (eval at <anonymous> (app.js:2322), <anonymous>:1267:23)
at VueComponent.Vue._render (eval at <anonymous> (app.js:606), <anonymous>:2927:22)
at VueComponent.eval (eval at <anonymous> (app.js:606), <anonymous>:2335:21)
at Watcher.get (eval at <anonymous> (app.js:606), <anonymous>:1643:27)
at new Watcher (eval at <anonymous> (app.js:606), <anonymous>:1635:12)
at VueComponent.Vue._mount (eval at <anonymous> (app.js:606), <anonymous>:2334:19)
at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:606), <anonymous>:5916:15)
at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:606), <anonymous>:8199:16)
at init (eval at <anonymous> (app.js:606), <anonymous>:2648:11)
at createComponent (eval at <anonymous> (app.js:606), <anonymous>:4030:9)
logError @ vue.js?3de6:427
My component looks like this, is this the correct way?
<template>
<section class="customer-page">
<vmap :zoom="zoom" :center="center">
<vtilelayer :url="url" :attribution="attribution"></vtilelayer>
</vmap>
</section>
</template>
<script>
/* eslint-disable */
import { Map, TileLayer } from 'vue2-leaflet';
export default {
components: {
vmap: Map,
vtilelayer: TileLayer,
},
name: 'Map',
data() {
return {
zoom: 13,
center: [47.413220, -1.219482],
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
};
},
};
</script>
Does it have to do with a version mismatch of the package dependencies or something? Thanks in advance!
Hi,
have used a plugin for leaflet integration
https://www.npmjs.com/package/vue2-leaflet
but when we try to import css it's not showing image files as it creating wrong paths even if it converts it into inline images
so is there any option to skip plugin files from webpack merge or any other options to handle it.
Happy to make a PR
Like in leaflet, setCenter(), setZoom(), setBounds(), etc?
Where is the map object exposed to use it?
Thanks.
Not sure if i understood marker component code but it seems there's no way to call setLatLng() on marker and just binding :lat-lng="position" will not trigger map refresh when the value changes.
This should be an option for some live maps applications.
Regards.
Hello, how do open popups or tooltips by default and how to trigger their events open/close ?
I've add my html like this and don't know where to bind click event, on parent tag marker or child tags ?
<v-marker v-for='(marker, index) in markers' :lat-lng='marker.position' :key='index'>
<v-tooltip :content="marker.tooltip"></v-tooltip>
<v-popup :content="marker.popup"></v-popup>
</v-marker>
stroke
of my polygon, but it's not working for me currently. <v-map :zoom="zoom" :center="center" class="content__cell product-map">
<v-polygon :lat-lngs="coordinates" :color="'#E94F0A'" :stroke="false"></v-polygon>
<v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
</v-map>
:color="'#E94F0A'"
is working but not :stroke="false"
"leaflet": "^1.0.3",
"vue2-leaflet": "^0.0.40"
import Vue2Leaflet from 'vue2-leaflet';
export default {
components: {
'v-map': Vue2Leaflet.Map,
'v-tilelayer': Vue2Leaflet.TileLayer,
'v-polygon': Vue2Leaflet.Polygon,
},
}
I forked the repo and wanted to add these features but then I realized they are actually implemented already:
const props = {
latLngs: {
type: Array,
default: () => []
},
style: {
type: Object,
},
stroke: {
type: Boolean,
custom: true,
default: true
},
color: {
type: String,
custom: true,
default: '#3388ff'
},
weight: {
type: Number,
custom: true,
default: 3
},
opacity: {
type: Number,
custom: true,
default: 1.0
}
So how can we solve this?
I'm building a custom map from this component and I'm running into a problem.
The url to retrieve the tiles are in the form http://tile.org.com/{z}/{x}/{y}.png?red={r}&green={g}&blue={b}
and it seems that from the declaration of the TileLayer component it is not possible to add custom keys in the template.
Is there a workaround ?
Thanks in advance.
Hi guys, first off, thanks so much for working on this library. Secondly, I'm wondering if there is a way to get a reference to the map
object from within the component that the map is embedded. So, for instance I'd like to be able to use Leaflet to panTo
but I'm unsure how to get a handle on it to call anything against it. I see that the component structure looks like this:
But I'm not sure how to access the map within the VMAP component under my Stroll Map component. Any help with this would be great! Thanks.
I think it does not have dist/
directory uploaded to npm
Hi,
If I need to display control layer (adding a few overlays on top of base map), how can I do so?
Map component can trigger "layeradd" event when the overlay is added, unfortunately, this event also triggers when marker is added.
How can I identify if the layer is a TileLayer (not Marker), and if TileLayer, which one is it (I could not find anything to identify that Tile Layer...
I may also need to add various GroupLayer to the control
I am almost certain its a user error on my part but when i try to add imagoverlay im getting
Cannot read property 'lat' of undefined
here is an example of the usecase
https://jsfiddle.net/b0r7/9f2yf3xh/20/
Hello.
With a simple array configuration, the geojson component is not working for me:
v-geojson-layer(v-for="vector in map.vectors", :key="vector.id", :geojson="vector.geojson")
Gives the following error:
I tried with the sample geojson https://raw.githubusercontent.com/KoRiGaN/Vue2Leaflet/master/examples/src/assets/geojson/france.json in order to check the integrity but If fails.
What to look for?
Ty.
hello, how to integrate leaflet plugin like leaflet.markercluster with Vue2Leaflet? do I need to a custom component?
Thanks
Hi there,
I dont know if this error belongs to you, but I have no more intel to do.
When I try to build project using Vue2Leaflet, I got this short error :
ERROR in client.10c90a41.js from UglifyJs
Invalid assignment [./~/vue2-leaflet/src/utils/eventsBinder.js:1,0][client.10c90a41.js:23407,87]
I am using v0.0.42, before that v0.0.40 (the error is still the same).
Cheers,
First of all, great job on the leaflet component - it is working like a charm.
I just noticed that if I switch between 2 pages in a SPA I get the following error:
vue.common.js?e881:435 TypeError: this.setVisible is not a function
It seems to be caused by this bit (from vue-leaflet2.js in the dist, v0.0.27):
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _eventsBinder = __webpack_require__(2);
var _eventsBinder2 = _interopRequireDefault(_eventsBinder);
var _propsBinder = __webpack_require__(1);
var _propsBinder2 = _interopRequireDefault(_propsBinder);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var events = ['add', 'remove', 'popupopen', 'popupclose', 'tooltipopen', 'tooltipclose'];
var props = {
content: {
custom: true,
default: ''
}
};
exports.default = {
props: props,
mounted: function mounted() {
this.mapObject = L.popup();
(0, _eventsBinder2.default)(this, this.mapObject, events);
(0, _propsBinder2.default)(this, this.mapObject, props);
if (this.$parent._isMounted) {
this.deferredMountedTo(this.$parent.mapObject);
}
},
beforeDestroy: function beforeDestroy() {
this.setVisible(false);
},
methods: {
deferredMountedTo: function deferredMountedTo(parent) {
this.parent = parent;
parent.bindPopup(this.content);
},
setContent: function setContent(newVal, oldVal) {
if (newVal) {
this.parent.bindPopup(this.content);
} else {
if (this.parent.getTooltip) {
this.parent.unbindPopup();
}
}
}
}
};
As soon as I take out the this.setVisible the error is gone.
How can leaflet-heat be used? Have not found an example.
Hi,
It would be useful to support arrays whenever a LatLng object is expected, according to what Leaflet offers.
Typically, passing an array as the center
prop of the map currently works, but it does not work for Marker
position, which has to be an object with a lat
and lng
key.
Also, for bounds
prop on Map
, one has to pass a L.latLngBounds
object whereas leaflet should support passing an Array directly.
Thanks!
I'm trying the following code
<v-map :zoom="zoom" :center="center" id="map" >
<v-tilelayer :url="url" ></v-tilelayer>
<marker-popup :position="marker" title="Hey"> </marker-popup>
</v-map>
where marker-popup's template is:
<template>
<v-marker :lat-lng="position" :title="title" :draggable="false">
<v-popup :content="text"></v-popup>
</v-marker>
</template>
I get this error:
[Vue warn]: Error in mounted hook: "TypeError: this.$children[e].deferredMountedTo is not a function.
Is there something special that I have to do to get this to work?
As opposed as the v-for v-marker behaviour, in which I can add and remove markers of an array and the map updates accordingly, if I do the same with v-for v-image-overlay and add and then remove the image, the layer won't update and the old image remains rendered forever.
Is there a method for forcing to redraw the map or at least redraw the layer?
Thanks.
Hello,
Can you make an example with Vue component?
Thank you
How to set custom Marker icon?
Hello,
Find an issue where modifying url
does not update component. See here: https://jsfiddle.net/k04zpLx9/40/
I'm currently learning Vue, so I'm not an expert. It seems that, as there is no DOM elements, component is not updated. Adding something like this will work:
<template>
<span :url="url"></span>
</template>
<script>
...
updated() {
this.$tileLayer.setUrl(this.url);
}
...
</script>
Is it OK? Is there another solution?
From the example:
<div id="app" style="height: 100%">
<v-map :zoom=13 :center="[47.413220, -1.219482]">
<v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
<v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
</v-map>
</div>
The problem with using arrays like this for 'center' and 'lat-lng' is that Vue gets a new array every time the map gets rendered. This in turn means the map will get re-centered every time the map is refreshed (i.e. anything in the map changes, e.g. a marker moves). Even if the values have not changed they will be sent to the component as though they have changed. Presumably the same thing happens for the markers too (not tested).
A work around is to create the array as a data property:
data: function() {
return {
map_centre: [-38, 145],
map_zoom: 13,
}
...
}
And use this in the map:
<v-map ref="map" :zoom="map_zoom" :center="map_centre" style="height: 500px;">
However this does not work if rendering markers from a list:
<v-marker
ref="marker"
v-for="item in inventory"
v-if="item.c8y_Position && item.c8y_Position.lat && item.c8y_Position.lng"
:key="item.id"
:lat-lng="[item.c8y_Position.lat, item.c8y_Position.lng]">
</v-marker>
Is it possible that we could pass lat and lng and separate properties and not use the array?
I'm having an issue where if the user navigates away from the map while it's loading it's causing strange behavious in other parts of my application. I'm wondering if there is a way to listen for the l-ready
event from the V-Map from the parent component?
I've tried to listen in mounted
:
this.$refs.strollMap.$on('l-ready', function(){
console.log('Ready')
})
But I can't seem to get a hook into it.
<template>
<v-map :zoom="zoom" :center="center" :min-zoom="minZoom" :max-zoom="maxZoom">
<v-tilelayer :url="url"></v-tilelayer>
<v-marker :lat-lng="latlng" :draggable="true" @l-move="markerMoved" @l-click="markerClick">
<v-popup :content="greeting"></v-popup>
<v-tooltip :content="greeting"></v-tooltip>
</v-marker>
</v-map>
</template>
<script>
import Vue2Leaflet from 'vue2-leaflet';
export default {
components: {
'v-map': Vue2Leaflet.Map,
'v-tilelayer': Vue2Leaflet.TileLayer,
'v-marker': Vue2Leaflet.Marker,
'v-tooltip': Vue2Leaflet.Tooltip,
'v-popup': Vue2Leaflet.Popup
}}
</script>
<style>
@import "~leaflet/dist/leaflet.css";
</style>
Hi,
I have a problem with tooltips and popups.
It works perfectly with markers, but don't seems to work with polygon.
JSFiddle example: https://jsfiddle.net/k04zpLx9/18/
Did I miss something ?
Thanks!
Out of the following events on the map component only zoomanim and moveend work.
I need to know when the map loads for the first time. Any suggestions?
<v-map :zoom=13 :center="[47.413220, -1.219482]" @l-zoomanim="mapReady" @l-viewreset="mapReady" @l-ready="mapReady" @l-load="mapReady" @l-moveend="mapReady">
</v-map>
...
mapReady(e){
console.log(e)
}
Hi there,
Cant really get this to work. The resolution of tiles on mobile devices is really poor.
I have a simple Button component, which extends L.Control
and receives a toggle
prop:
<v-map ...>
<v-btn :toggle="mode" v-on:toggleEvent="toggleMode"></v-btn>
</v-map>
A click on the control fires toggleEvent
, which toggles mode
between true
and false
-- nothing more.
I noticed that every time mode
changes the map zooms and pans back into its initial position and zoom level. I checked the leaflet events without much luck, but just found out that I can avoid the problem by patching the setCenter
method on my map with an empty function.
I'm not sure what exactly causes the call to setCenter
in the first place and whether it's desired behaviour? Anyway to avoid this without removing the method?
When the map is created, the container width/height for your 'map-canvas' element has not yet been adjusted to the width/height of the modal dialog. This causes the map size to be incorrect (smaller) than what it should be and for the x and y coordinates of the tiles to be wrong. In particular if I inspect the generated code for my vue2leaflet map I see:
<div id="vmap" class="col-xs-4" style="height: 300px;">
<div class="vue2leaflet-map leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" style="position: relative; outline: none;" tabindex="0">
<div></div>
<div></div>
<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);">
<div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1; opacity: 1;">
<div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt="" role="presentation" src="//a.tile.openstreetmap.org/13/8039/5128.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-17px, -235px, 0px); opacity: 1;">
The transform: translate3d(-17px, -235px, 0px)
is placing the map tiles above and to the left of where they should be.
This is noted elsewhere on the internet and they stipulated that this can be fixed by calling map.invalidateSize() which will work by re-adjusting the width/height bounds of the leaflet Map's container.
Have you exposed invalidateSize()? If so, how do I call it?
Hello,
I'm trying out Vuejs these days. I'm not a font-dev expert though ...
Here is my question :
I'm working on a project with an API serving geo_shapes through json format. I have all my polygons displayed.
In order to understand the underlying mechanism, I'm wondering how to proceed to change the polygon fillColor on mousever for highlighting. What is the recomended way to make this done and how can I access the setFillColor
in my Vue component ?
Here is chunks of component code :
<template>
<v-map id="leaflet">
<v-tilelayer></v-tilelayer>
<v-polygon v-for="area in areas" :key="area.id"
:lat-lngs="area.geometry.coordinates"
@l-dblclick="goto_sublevel(area)"
@l-mouseover="change_color()"> <!--???-->
<v-popup :content="area.name"></v-popup>
</v-polygon>
<v-polygon v-for="area in parent_area" :key="area.id"
:lat-lngs="area.geometry.coordinates" :color="'#ff6056'"></v-polygon>
</v-map>
</template>
<script>
import Vue2Leaflet from 'vue2-leaflet';
export default {
components: {
'v-map': Vue2Leaflet.Map,
'v-tilelayer': Vue2Leaflet.TileLayer,
'v-polygon': Vue2Leaflet.Polygon,
'v-popup': Vue2Leaflet.Popup
},
methods : {
goto_sublevel: function (level) {
// do something to retrieve data of next geographical level ...
},
change_color: function (?) {
// ??? is it here that magic should happen ?
},
}
</script>
Anyway, I found your api clear enough to had some fun with leaflet. Thanks for your job ! ;)
Dithyrambe
leaflet: 1.0.3
vue2-leaflet: 0.0.47
vue: 2.2.6
chrome: 58.0.3029.81 (64-bit)
In v.0.0.47
, I have noticed an issue with the Marker
component being duplicated/shadowed when rendered in the map.
<v-map :zoom=15 :center="[organization.latitude, organization.longitude]">
<v-tilelayer :token="mapboxAPIKey" url="https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token={token}"></v-tilelayer>
<v-marker :lat-lng="{'lat': organization.latitude, 'lng': organization.longitude}">
<v-popup :content="organization.name"></v-popup>
</v-marker>
</v-map>
edit: fixed code copy paste error
If I remove the transform: translate3d(395px, 200px, 0px)
style from the img.leaflet-marker-icon
, then the issue is resolved.
Edit: This change seems to move the "clickable" marker out of the pane, so it cannot be used as the trigger for a popup. The incorrect "fat" marker is the one that remains. I will look into other possible "full" resolutions.
Well some example would be awesome
When I do a zoom in the map the event isn't being called. My component:
<template>
<v-map ref="map" :zoom="zoom" :center="center" v-on:l-zoom="zoom">
<v-tilelayer :url="titleLayer"></v-tilelayer>
<v-marker :lat-lng="center"></v-marker>
</v-map>
</template>
<script>
// Component
export default {
name: 'map',
data () {
return {
titleLayer: 'secret'
}
},
methods: {
zoom (evt) {
console.log(evt) // not showing anything
},
},
computed: {
center () {
return this.$store.state.map.center
},
zoom () {
return this.$store.state.map.zoom
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
I would love a demo or quick "how-to" guide in the README please
Hi,
We are using Vue2Leaflet inside a professional SPA, where maps are literally everywhere and our main concern.
And, for the map, you choose the following HTML implementation :
<div id="map">
<slot></slot>
</div>
Is there a real value-added by the following use ?
This id seem to be present only for the use of css, isnt it ?
Can you consider moving to the following one (or similar) ?
<div class="Vue2Leaflet_Map">
<slot></slot>
</div>
Or IDK if the following style implementation work (need some test)
<style scoped>
:first-of-type {
height: 100%;
width: 100%;
}
</style>
Cheers,
Took me a while to work out why my map wasn't loading properly (it was showing up full browser height with random tiles loading) -- you need to make sure the leaflet.css is included, either via a HTML link tag or in your component style via something like @import "~leaflet/dist/leaflet.css";
When you bind the :center of the map to your vue data coordinates and you change it later (in order to pan the map, for example), the :zoom of the map also restarts to its original value, if it was changed.
This should be two separated processes.
Hi,
thanks for the great component! I have a problem setting the image when using vue-loader.
IconDefault does not set the image path at all,
<leaflet-icon-default path="static/media/map"></leaflet-icon-default>`
Renders to
<img src="http://localhost:4000/static/media/marker-icon.2273e3d8.png")marker-icon.png" class="leaflet-marker-icon ...">
Notice the invalid link.
How to set original Leaflet widget zoom, navigation, scale options like position, attributes, etc?
Hello,
I have an issue using polygons with vue-devtools:
[Vue warn]: "style" is a reserved attribute and cannot be used as component prop"
The warning happens with Polygon, LCircle, Polyline and Rectangle components.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.